CODEWITHSUNDEEP
androidmaterial-designandroid-themeandroid-styles
Mikey Chen
Mikey Chen

Reputation: 2420

Change color of DrawerToggle in toolbar on Android

Can anybody pinpoint why my drawer toggle (the little hamburger icon that animates to open the navigation drawer) refuses to switch color on me? It's causing me a lot of downtime and I can't seem to figure out why.

Here's my theme - the drawer toggle takes on the color of disabled_default_text.

<style name="Theme.MyApp.NoActionBar" parent="Theme.MyApp.NoActionBar">
    <item name="actionBarStyle">@style/Widget.MyApp.ActionBar</item>
    <item name="colorAccent">@color/cs7</item>
    <item name="colorControlNormal">@color/disabled_default_text</item>
</style>

And here's the toolbar layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@drawable/ab_solid"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/MyToolbarTheme"
    app:elevation="@dimen/toolbar_elevation"/>

MyToolbarTheme - where I overwrite colorControlNormal with the color white.

<style name="MyToolbarTheme"     parent="@style/Widget.AppCompat.ActionBar.Solid">
    <item name="background">@drawable/ab_solid</item>
    <item name="titleTextStyle">@style/MyTitleStyle</item>
    <item name="colorControlNormal">@color/white</item>
</style>

What's odd is that adding colorControlNormal changes the color of the overflow menu from the disabled_default_text color to white, but the drawer toggle doesn't get changed. Can anybody figure out what I'm doing wrong?

Upvotes: 2

Views: 663

Answers (3)

dara
dara

Reputation: 763

Above solutions are using style that's probably gonna work.But what if you want to replace it with your icon.Hope this will help to someone.

DrawerLayout mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
Toolbar mToolbar = (Toolbar)findViewById(R.id.toolbar);
ActionBarDrawerToggle mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close);

mToggle.setDrawerIndicatorEnabled(false); // this is very important don't miss it
mToggle.setHomeAsUpIndicator(R.drawable.ic_action_logo); // here your logo

When you enable drawer indicator you lose listener for click of toggle that's why you have to handle it by yourself.

mToggle.setToolbarNavigationClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View view) {
              mDrawerLayout.openDrawer(GravityCompat.START)
        }
});

That's it happy coding:)

Upvotes: 0

Sanjeet A
Sanjeet A

Reputation: 5227

You can add drawerArrowStyleto your theme as

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

and you can customize your MyDrawerArrowToggle as 

 <style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/white</item>
 </style>

Upvotes: 4

Diego Cardenas
Diego Cardenas

Reputation: 55

proof this:

style.xml

<style name="AppTheme" parent="AppTheme.Base"></style>

<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/theme_primary</item>
    <item name="colorPrimaryDark">@color/theme_dark</item>
    <item name="colorAccent">@color/theme_accent</item>
    <item name="android:windowBackground">@color/theme_wbackground</item>
</style>

style-v21.xml

<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:colorPrimary">@color/theme_primary</item>
    <item name="android:colorPrimaryDark">@color/theme_dark</item>
    <item name="android:colorAccent">@color/theme_accent</item>
    <item name="android:windowBackground">@color/theme_wbackground</item>
    <item name="android:navigationBarColor">@color/theme_primary</item>
</style>

and int Toolbar: app_bar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/theme_primary"/>

Upvotes: 0

Related Questions