[TIMOB-25669] Android: when using Ti.UI.Toolbar as ActionBar, onHomeIconItemSelected doesn't work

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Not Our Bug
Resolution Date	2018-01-15T09:15:05.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	android, drawerlayout, toolbar
Reporter	Guillermo Figueras
Assignee	Unknown
Created	2018-01-12T11:39:38.000+0000
Updated	2019-01-16T20:37:09.000+0000

Description

I'm using a Toolbar as an ActionBar and I want to show the left drawer menu when clicking on the navigation icon, but the problem is that nothing happens when I click it. Check my code below. view/xml:

<Alloy>
	<Window class="container" id="window" onOpen="open" title="Directions List" >
		
		<DrawerLayout id="drawerLayout">
			
			<LeftView>
				
			</LeftView>
			
			<CenterView>
				<View>
					<Toolbar
						title="Directions List"
						width="Ti.UI.FILL"
						elevation="10"
						top="0"
						barColor="#db4337"
						titleTextColor="white"
						displayHomeAsUp="true"
						homeButtonEnabled="true" 
						id="actionBar"
						navigationIcon="/icons/nav_menu_white.png" / > 
					  
					<Label text="test" />
					
				</View>

			</CenterView>
		</DrawerLayout>

	</Window>
</Alloy>

style/tss:

"Window":{
	theme : 'AppTheme.TransBtns.Drawer',
	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_STATE_HIDDEN
}

android theme:

<style name="AppTheme.TransBtns.Drawer" parent="Theme.AppCompat.Light.DarkActionBar">
    	<item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
	<item name="android:buttonStyle">
		@style/Widget.AppCompat.Button.Borderless.Colored
	</item>
</style>

controller/js:

function open() {
	var activity = $.window.getActivity();
	
	if (activity) {
		var actionBar = activity.getActionBar();
		if (actionBar) {
			actionBar.displayHomeAsUp = true;
			actionBar.onHomeIconItemSelected = function() {
				$.drawerLayout.toggleLeft();
			};
		}
	}
}

I tried showing on console the value of activity.getActionBar() and apparently it shows the value of the original ActionBar, the one which isn't visible, instead of showing the Toolbar. I also tried this but nothing happens:

// $.actionBar is the id of the Toolbar
$.actionBar.onHomeIconItemSelected = function() {
	$.drawerLayout.toggleLeft();
};

Comments

Mostafizur Rahman 2018-01-13

Hello [~gfigueras], Thanks for sharing with us. Can you please share a complete runnable test case with us to reproduce the issue on our end?

Guillermo Figueras 2018-01-15

Hi Mostafizur, I came up with a solution for my problem. I added the customToolbar property to my DrawerLayout (it has to be the id of the Toolbar).

   <DrawerLayout id="drawerLayout" toolbarEnabled="false" customToolbar="actionBar">

And I also did this on my controller:

   $.window.activity.supportToolbar = $.actionBar;
   
   function open() {
       $.window.activity.actionBar.displayHomeAsUp = true;
       $.window.activity.actionBar.onHomeIconItemSelected = function() {
           $.drawerLayout.toggleLeft();
       }
   }

The ticket can be closed.

Hans Knöchel 2018-01-15

Thanks [~gfigueras], I've resolved the ticket. But it would still make sense to improve the documentation regarding this point I think. If you feel you can describe this in a few sentences, feel free to submit a PR by simply editing [this file](https://github.com/appcelerator/titanium_mobile/edit/master/apidoc/Titanium/UI/Android/DrawerLayout.yml). Thanks for your time!
Eric Merriman 2018-08-06

Closing as "not our bug". If you disagree, please reopen.

Michael Gangolf 2019-01-16

It would be nice to be able to use the onHomeIconItemSelected with a DrawerLayout. In the following XML the onClickHome is triggered in the controller:

   <Alloy>
   	<Window backgroundColor="#fff" theme="Theme.AppCompat.NoTitleBar" customToolbar="toolbar" onOpen="onOpen">
   		<Toolbar homeButtonEnabled="true" displayHomeAsUp="true" id="toolbar" title="win" top="0" titleTextColor="white" backgroundColor="#333" onHomeIconItemSelected="onClickHome"/>
   	</Window>
   </Alloy>

But when you add a DrawerLayout:

   <Alloy>
   	<Window backgroundColor="#fff" theme="Theme.AppCompat.NoTitleBar" customToolbar="toolbar" onOpen="onOpen">
   		<Toolbar homeButtonEnabled="true" displayHomeAsUp="true" id="toolbar" title="win" top="0" titleTextColor="white" backgroundColor="#333" onHomeIconItemSelected="onClickHome"/>
   		<DrawerLayout id="drawer">
   			<LeftView>
   				<View backgroundColor="#fff"/>
   			</LeftView>
   			<CenterView>
   				<View id="main">
   					<Label text="Main view"/>
   				</View>
   			</CenterView>
   		</DrawerLayout>
   	</Window>
   </Alloy>

it won't trigger the onHomeIconItemSelected function. Both cases create the following classic code

   $.__views.index.activity.setSupportActionBar($.__views.toolbar), 
   $.__views.index.activity.actionBar.displayHomeAsUp = !0, 
   $.__views.index.activity.actionBar.homeButtonEnabled = !0, 
   $.__views.index.activity.actionBar.onHomeIconItemSelected = onClickHome)

Tested with Ti SDK 7.5.0.GA, Android 7 (HTC A9). Assigning the JS in the controller by hand is working as mentioned in the comment above, so you can create a workaround. Still not sure why it is not working with the Alloy-only way

Ahmed Mohamed 2019-01-16

The toolbar must be child of window. and you can't put it inside any view to support toolbar by customToolbar

   <Window backgroundColor="#fff" theme="Theme.AppCompat.NoTitleBar" customToolbar="toolbar">
       	<View height="Titanium.UI.SIZE" top="0">
       		<Toolbar onHomeIconItemSelected="onClickHome" homeButtonEnabled="true" displayHomeAsUp="true" id="toolbar" title="win" top="0" titleTextColor="white" backgroundColor="#333"/>
       	</View>
       </Window>

   function onClickHome(){
   	$.drawer.toggleLeft();
   }
   
   $.index.open();

JSON Source