How to change color of hamburger icon in material design navigation drawer
Asked Answered
T

13

94

I am following this example

http://www.androidhive.info/2015/04/android-getting-started-with-material-design/

and in this example it is showing hamburger icon white,i want to customize it and make it black,but i am not able to find anything to how to change it,can any one tell how to customize it?

Manifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.materialdesign" >


    <uses-permission android:name="android.permission.INTERNET"></uses-permission>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/MyMaterialTheme" >
        <activity
            android:name=".activity.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

style

<resources>

    <style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

    </style>

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="homeAsUpIndicator">@drawable/hamburger</item>
    </style>

</resources>

MainActivity

public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawerListener {

    private static String TAG = MainActivity.class.getSimpleName();

    private Toolbar mToolbar;
    private FragmentDrawer drawerFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       mToolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);

        drawerFragment = (FragmentDrawer)
                getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
        drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
        drawerFragment.setDrawerListener(this);

        // display the first navigation drawer view on app launch
        displayView(0);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        if(id == R.id.action_search){
            Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onDrawerItemSelected(View view, int position) {
        displayView(position);
    }

    private void displayView(int position) {
        Fragment fragment = null;
        String title = getString(R.string.app_name);
        switch (position) {
            case 0:
                fragment = new HomeFragment();
                title = getString(R.string.title_home);
                break;
            case 1:
                fragment = new FriendsFragment();
                title = getString(R.string.title_friends);
                break;
            case 2:
                fragment = new MessagesFragment();
                title = getString(R.string.title_messages);
                break;
            case 3:
                fragment = new ContactUsFragment();
                title = getString(R.string.title_contactus);
                break;
            case 4:
                fragment = new AboutUsFragment();
                title = getString(R.string.title_aboutus);
                break;
            default:
                break;
        }

        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
            fragmentTransaction.replace(R.id.container_body, fragment);
            fragmentTransaction.commit();

            // set the toolbar title
            getSupportActionBar().setTitle(title);
        }
    }
Trump answered 7/8, 2015 at 5:14 Comment(6)
just use the following line <item name="homeAsUpIndicator">@drawable/icon_top_menu </item> in style.xml theme.,,replace icon_top_menu with custom drawableBeet
i add this <item name="homeAsUpIndicator">@drawable/icon_top_menu </item>..now can you tell what to do..Trump
add another image in your drawable with desired color burger menu icon and replace icon_top_menu with that in aboveEmpirical
icon_top_menu should be image right?Trump
i added one image <item name="homeAsUpIndicator">@drawable/hamburger</item> its stil showing white imageTrump
post your manifest and style.xmlBeet
C
254

To change color of hamburger icon you have to open "style.xml" class, then try this code:

<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">

</style>

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/black</item>
</style>

So check <item name="color">@android:color/black</item> line. Just change your desired color here.

Casper answered 7/8, 2015 at 6:6 Comment(7)
anyway you can check this github.com/codepath/android_guides/wiki/… link. It have good tutorial.Casper
so write above code in your MainActivity , it will work.Casper
but its not allowing for downloadTrump
Let us continue this discussion in chat.Trump
Good answer. Would you happen to know how to change the colour of the icon for selected activities instead?Fortunetelling
Any way to set DrawerArrowStyle to specific toolbars ? And what's the default value of it?Bondholder
it only worked for me programmatically - actionBarDrawerToggle.drawerArrowDrawable.color = Color.WHITECourtenay
S
70

do it programmatically add this line

actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.white));
Skelton answered 20/10, 2017 at 7:41 Comment(2)
but how do we get a reference to actionBarDrawerToggle? (running your suggested code will return null because we don't a reference to the actionBarDrawerToggle)Tallia
Look no further, Sai Gopi N answered the question correctly. To answer Daron, you have to make an instance in your main activity. ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);Strobe
K
17

1.In Color.xml.<color name="hamburgerBlack">#000000</color>

2.In style.xml.

<style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/hamburgerBlack</item>
    </style>

3. Then your main theme class(File name style.xml).I have “AppTheme”.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <item name="drawerArrowStyle">@style/DrawerIcon</item>
    </style>
Killie answered 19/12, 2017 at 13:2 Comment(1)
Please provide full step to apply icon in kotlinHabitude
W
14

Overriding colorControlNormal also works.

<item name="colorControlNormal">@android:color/holo_red_dark</item>
Wickliffe answered 16/8, 2016 at 16:31 Comment(0)
U
13

yourProject/res/values/styles.xml

in the styles.xml add:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>
Urgent answered 9/8, 2017 at 14:55 Comment(1)
only for API 20 and upConfined
M
12

For that you can proceed as follows:

protected ActionBarDrawerToggle drawerToggle;

drawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.black));
Mealy answered 8/11, 2018 at 14:12 Comment(1)
@Gratien Asimbahwe this code you posted will crash because there is no reference to drawerToggle....how do we get a reference?Tallia
D
2
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorTransparent"

remove themes too

    android:theme="@style/AppThemeNoActionBar.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
      ***

remove this

*** app:popupTheme="@style/AppThemeNoActionBar.PopupOverlay">

</android.support.design.widget.AppBarLayout>

finally add this

 <style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

To your main heme

        <item name="colorControlNormal">@color/colorRedTitle</item>

    </style>
Dynamotor answered 12/11, 2018 at 10:6 Comment(0)
L
1

This works fine when you set app:theme="@style/MyMaterialTheme"

Leverett answered 2/3, 2016 at 8:29 Comment(1)
Or if you match your android manifest theme name to the style name in your styles.xml.Blowy
D
0

After a struggle of 2 hours , this post helped me . In Androidhive material example, change primary color to another for getting new actionbar color. this below code is for getting arrow mark on action bar and making custom text. Finally i understood that, arrow icon will be in appcompat resource files but hamburger icon not present in resources. if it is present we can change it at runtime

setSupportActionBar(toolbar);
        final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        upArrow.setColorFilter(getResources().getColor(R.color.black), PorterDuff.Mode.SRC_ATOP);
        getSupportActionBar().setHomeAsUpIndicator(upArrow);
        getSupportActionBar().setTitle(Html.fromHtml("<font color=\"black\">" + "All Addresses" + "</font>"));
        getSupportActionBar().show();

for changing the home button, i followed @anandsingh answer.

Donitadonjon answered 8/11, 2015 at 12:2 Comment(2)
That's is a pretty hacky and hard to maintain way.. I'd say it would be better not to do anything than follow this. That could help to get a sample working for a demo though.Nosing
@Tarun Voora - this might be just what i am looking for...i am looking for a way to change it using code...i will look into this within the next couple of days...thanks in advance!... i am looking for the hamburger menu icon though...but this may point me in the right direction.Tallia
P
0
//----------your own toolbar-----------------------------

            <?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="wrap_content"
                android:elevation="4dp"
                android:padding="1dp"
                android:background="@color/blue"
                >
                </android.support.v7.widget.Toolbar>

    //-----------Main activity xml, add your own toolbar-----------------------------------------------
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.v1technologies.sgcarel.FrameActivity">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"
            />
        <FrameLayout
            android:padding="2dp"
            android:layout_marginTop="70dp"
            android:id="@+id/frame_frame_activity"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    </FrameLayout>
    </RelativeLayout>


        //----  In your activity-----------------------

                   toolbar = (Toolbar) findViewById(R.id.toolbar);       
                    setSupportActionBar(toolbar);

            //===========================================================================

             @Override
                public boolean onCreateOptionsMenu(Menu menu) {
                    // Inflate the menu; this adds items to the action bar if it is present.
                    getMenuInflater().inflate(R.menu.menu_main, menu);

                    int color = Color.parseColor("#334412");
                    final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP);

                    for (int i = 0; i < toolbar.getChildCount(); i++) {
                        final View v = toolbar.getChildAt(i);

                        if (v instanceof ImageButton) {
                            ((ImageButton) v).setColorFilter(colorFilter);
                        }
                    }
                    return true;
                }
Polychrome answered 18/3, 2017 at 22:5 Comment(0)
F
0
  val drawerToggle = DrawerArrowDrawable(this)
    drawerToggle.color = ContextCompat.getColor(this,R.color.white)
    (actionBarDrawerToggle as ActionBarDrawerToggle).drawerArrowDrawable = drawerToggle
Flatiron answered 31/1, 2023 at 11:35 Comment(0)
M
-1

If you want to change the color just to your navigation drawer icon, try this:

<android.support.design.widget.NavigationView
    app:itemIconTint="@color/thecolorthatyouwant"
 />

straight in your activity_drawer.xml

Munt answered 22/8, 2018 at 20:28 Comment(0)
C
-1

The hamburger icon is controlled by your action ActionBarDrawerToggle class. If you are using the android compat libraries which is a must as at now. You can change the color like this:

    toggle?.drawerArrowDrawable?.color = ContextCompat.getColor(context, R.color.colorPrimary)
Cutis answered 24/7, 2019 at 10:25 Comment(1)
this code you posted will crash because there is no reference to drawerToggle....how do we get a reference?Tallia

© 2022 - 2024 — McMap. All rights reserved.