[AC-5413] Ti.UI.Android.createDrawerLayout there is no way to set the color of the title on AppBar via theme

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Done
Resolution Date	2017-12-27T22:10:56.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	n/a
Reporter	Henry Orozco
Assignee	Shak Hossain
Created	2017-11-28T22:03:31.000+0000
Updated	2018-01-12T08:46:36.000+0000

Description

Ti.UI.Android.createDrawerLayout SDK 6.3.0.GA There is no way to set the color of the title on AppBar via theme XML file. Defaults to black, in this case I want the title on white. The only way (not ideal because editing the SDK file) I've found so far is editing the file https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/ui/res/layout/titanium_ui_drawer_layout.xml and add android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" to android.support.v7.widget.Toolbar Sample Alloy project: *inde.js* var win = Ti.UI.createWindow({ theme: "Theme.AudioVerse.NoActionBar" }); var leftView = Ti.UI.createView({ backgroundColor:'white' }); var centerView = Ti.UI.createView({ backgroundColor:'white' }); var drawer = Ti.UI.Android.createDrawerLayout({ leftView: leftView, centerView: centerView }); win.add(drawer); win.open(); *themes.xml on app/platform/android/res/values* http://schemas.android.com/apk/res/android">

Attachments

File	Date	Size
Screen Shot 2017-11-28 at 4.54.05 PM.png	2017-11-28T21:55:40.000+0000	9831
Screen Shot 2017-11-28 at 5.00.52 PM.png	2017-11-28T22:01:11.000+0000	9928

Comments

Mostafizur Rahman 2017-11-29

Hello [~horozco], Thanks for sharing with us. Please provide a full sample test project that regenerates the issue. We will test the issue in our environment. Also, provide the SDK and CLI version you are testing on. Thanks. Best
Henry Orozco 2017-11-29

Hi Mostafizur! I've updated the description to include the full sample code that regenerates the issue. Thanks! Kind regards.
Sharif AbuDarda 2017-12-27

The issue is resolved in SDK 7.0.1.GA.

Guillermo Figueras 2018-01-10

When using a Toolbar as an Actionbar, how do I add the left icon which used to show the left drawer menu? I mean, the icon that's in the blue rectangle: http://belencruz.com/wp-content/uploads/2015/04/android_actionbar_default-1024x253.png I have this on my alloy file:

   <DrawerLayout id="drawerLayout">	
   	<LeftView>
   		
   	</LeftView>
   			
   	<CenterView>
   		<View>
   			<Toolbar
   				title="title"
   				width="Ti.UI.FILL"
   				elevation="10"
   				top="0"
   				barColor="#db4337"
   				titleTextColor="white"
   				displayHomeAsUp="true"
   				homeButtonEnabled="true" 
   				id="actionBar"  />
   	         </View>
   	</CenterView>
   </DrawerLayout>

And I have this on my controller:

   var actionBar = $.actionBar;
   
   if (actionBar) 
   {
          actionBar.displayHomeAsUp = true;
          actionBar.onHomeIconItemSelected = function() {
                 $.drawerLayout.toggleLeft();
          };
   }

Henry Orozco 2018-01-10

Hey Guillermo, Check this out: Add a custom toolbar and use the navigationIcon property - http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Toolbar Sample: https://github.com/appcelerator/titanium_mobile/pull/9646 Hope that helps :)
Guillermo Figueras 2018-01-11

@Henry Orozco thank you!
Guillermo Figueras 2018-01-11

Well, now I'm not sure on how to show the drawer menu when clicking on the navigationIcon. How do I add the click listener to it?

Henry Orozco 2018-01-11

@Guillermo

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

Guillermo Figueras 2018-01-11

I'm getting this error when using your code:

   [ERROR] :  TiExceptionHandler: (main) [1782,3374] ----- Titanium Javascript Runtime Error -----
   [ERROR] :  TiExceptionHandler: (main) [0,3374] - In undefined:240,42
   [ERROR] :  TiExceptionHandler: (main) [0,3374] - Message: Uncaught TypeError: Cannot read property 'getActivity' of undefined
   [ERROR] :  TiExceptionHandler: (main) [0,3374] - Source:     var activity = $.drawerLayout.window.getActivity();
   [ERROR] :  V8Exception: Exception occurred at undefined:240: Uncaught TypeError: Cannot read property 'getActivity' of undefined

Henry Orozco 2018-01-11

@Guillermo, replace $.drawerLayout.window for the id of the window that is wrapping your DrawerLayout. e.g var activity = $.myWindow.getActivity();

Guillermo Figueras 2018-01-12

I tried that but nothing happens. I also tried this but it doesn't work:

    $.toolbarId.onHomeIconItemSelected = function() {
    	$.drawerLayout.toggleLeft();
    };

JSON Source