How do I change the color of the ActionBar hamburger icon?

Question

I'm using NavigationView from android design support library and toolbar and everything works fine, but I want to know how to make the hamburger icon dark (right now it appears white). Also I wanna adjust distance from screen edge to ActionBar Title. So how do I do this? Thanks for help.

I set theme as Theme.AppCompat.Light.NoActionBar. So I use toolbar. Here is my code:

public class MainActivity extends AppCompatActivity {

//Defining Variables
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
ViewPager pager;
ViewPagerAdapter adapter;
SlidingTabLayout tabs;
CharSequence Titles[]={"Песни","Исполнители"};
int Numboftabs =2;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Initializing Toolbar and setting it as the actionbar
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

And xml:

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".MainActivity">

<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    >
    <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar"
        />

    <ru.amdm.amdm.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="2dp"
        android:background="@color/ColorPrimary"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:foreground="?android:windowContentOverlay">

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"

            android:layout_height="match_parent"
            android:layout_width="match_parent"/>
    </FrameLayout>

</LinearLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    app:headerLayout="@layout/header"
    app:menu="@menu/drawer"
    />

Are you using ActionBar only or ToolBar? Please post your current code. — hungryghost, Jun 10 '15 at 19:49

hungryghost · Accepted Answer · 2015-06-11T06:37:16.257

10

To change the hamburger icon, just create a new icon (e.g. ic_my_dark_menu) then assign that to your action bar:

actionBar.setHomeAsUpIndicator(R.drawable.ic_my_dark_menu);

Or, you can tint your existing icon, if you'd rather do it this way:

Drawable drawable = ResourcesCompat.getDrawable(getResources(), R.drawable.ic_menu, null);
drawable = DrawableCompat.wrap(drawable);
DrawableCompat.setTint(drawable, Color.BLACK);
actionBar.setHomeAsUpIndicator(drawable);

To change amount of space between your action bar title and the edge, just edit your toolbar layout (res/layout/tool_bar.xml). For example, you can add padding like this:

res/layout/tool_bar.xlml

<android.support.v7.widget.Toolbar
    ...
    android:paddingTop="16dp" />

edited Jun 11 '15 at 06:37

answered Jun 10 '15 at 20:13

hungryghost

9,463
3
23
36

How can I browse through support.design library to find source of this hamburger icon? 'Cause I think it manages icon appearance. Or may be there is some method or xml attribute to configure that icon? – AlexKost Jun 11 '15 at 01:12
As I stated in my answer, the hamburger icon is set with `actionBar.setHomeAsUpIndicator()`. With that method, you specify the drawable to use as the hamburger icon. That is the source of the icon. If you want to further configure the icon, again, you can do so with the code I already posted in my answer. – hungryghost Jun 11 '15 at 06:41
Thank you! It works fine. Also I found another simple way to do that - set theme of toolbar as android:theme="@style/ThemeOverlay.AppCompat.Light" – AlexKost Jun 11 '15 at 13:50
Adding a ThemeOverlay style will work, but it also affects other aspects of your ActionBar as well (like text color, overflow menu, etc.). But if that's what you want and not just the hamburger icon, then changing your style is the best way to go. – hungryghost Jun 11 '15 at 16:44
Yes, you're right. And solution of this issue I find here: http://stackoverflow.com/a/28205087/4656400 – AlexKost Jun 12 '15 at 07:16

score 1 · Answer 2 · answered Jun 11 '15 at 09:38

1

May be you have to try this ..Apply this theme to toolbar ...

<style name="MyThemeOverlay">
   <item name="android:colorControlNormal">@color/myControlColor</item>
</style>

answered Jun 11 '15 at 09:38

Moinkhan

12,732
5
48
65

1

This only works in API level 21. My current min is 15 – AlexKost Jun 11 '15 at 13:39
2

@AlexKost, use `colorControlNormal` instead of `android:colorControlNormal`. That's compatible with lower API level thanks to appcompat – Nicolás Carrasco-Stevenson Feb 17 '16 at 22:02

How do I change the color of the ActionBar hamburger icon?

2 Answers2

Linked