How to style the DrawerArrowToggle from Android ap

Question

So now that Android 5.0 was released i was wondering how to style the animated actionbar icons.

This library here implements and styles it fine for me but since the appcompat v7 library has it how can it be styled?

I got this implemented using the v7 DrawerToggle. However I cannot style it. Please Help

I found the styling for it in the v7 styles_base.xml

    <style name="Base.Widget.AppCompat.DrawerArrowToggle" parent="">
    <item name="color">?android:attr/textColorSecondary</item>
    <item name="thickness">2dp</item>
    <item name="barSize">18dp</item>
    <item name="gapBetweenBars">3dp</item>
    <item name="topBottomBarArrowSize">11.31dp</item>
    <item name="middleBarArrowSize">16dp</item>
    <item name="drawableSize">24dp</item>
    <item name="spinBars">true</item>
</style>

I added this to my styles and did not work. Also added to my attr.xml

<declare-styleable name="DrawerArrowToggle">
    <!-- The drawing color for the bars -->
    <attr name="color" format="color"/>
    <!-- Whether bars should rotate or not during transition -->
    <attr name="spinBars" format="boolean"/>
    <!-- The total size of the drawable -->
    <attr name="drawableSize" format="dimension"/>
    <!-- The max gap between the bars when they are parallel to each other -->
    <attr name="gapBetweenBars" format="dimension"/>
    <!-- The size of the top and bottom bars when they merge to the middle bar to form an arrow -->
    <attr name="topBottomBarArrowSize" format="dimension"/>
    <!-- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow -->
    <attr name="middleBarArrowSize" format="dimension"/>
    <!-- The size of the bars when they are parallel to each other -->
    <attr name="barSize" format="dimension"/>
    <!-- The thickness (stroke size) for the bar paint -->
    <attr name="thickness" format="dimension"/>
</declare-styleable>

But crashes and says color type error when doing so. What am i missing?

Answer 1

In my case I wanted to change color of drawer arrow and hamburger icon. Setting drawer arrow style changed only hamburger icon color.

So I opened Widget.AppCompat.DrawerArrowToggle style in values.xml of appcompat-v7.

<style name="Widget.AppCompat.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
    <item name="color">?attr/colorControlNormal</item>
</style>

So I created special theme:

<style name="Toolbar_Theme">
    <item name="colorControlNormal">@android:color/black</item>
</style>

and applied it to my toolbar as following:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    app:theme="@style/Toolbar_Theme" />

Note, that I'm using theme attribute instead of defining controlColorNormal in my app theme. This way color will aply only to toolbar items, if I set it in app theme, then it will also affect scroll bars color, etc.

Setting colorControlNormal attribute change both color of hamburger and drawer arrow.

Answer 2

I wanted to make the hamburguer/arrow white, but nothing of all this "styles" stuff worked for me. I removed all and adding this line just solve it, as an attribute of the "the android.support.v7.widget.Toolbar" element in the layout:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar

Answer 3

Your style name has no parent Here's working with android 5 and Material Theme, without need to replace actionbar with appCompat Here's my style, i just needed to change color to white because i had a coloured bar

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

And here's my theme

<style name="Theme_AppTheme.Light" parent="@android:style/Theme.Material.Light">

     <!-- Drawer\arrow in white -->
     <item name="drawerArrowStyle">@style/myTheme.DrawerArrowToggle</item>

ps. there's just a problem, on adroid 4.4 and normal actionbar is not rendering well. And unluckily the nre drawerToggle from v7 does not inherit from v4

Answer 4

For anyone that ends up here (like I did) looking for a way to replace the drawer indicator icon with your own drawable(non animated) using the v7 ActionBarDrawerToggle, you can do the following:

//After instantiating your ActionBarDrawerToggle
mDrawerToggle.setDrawerIndicatorEnabled(false);
Drawable drawable = ResourcesCompat.getDrawable(getResources(), R.drawable.your_custom_icon, getActivity().getTheme());
mDrawerToggle.setHomeAsUpIndicator(drawable);
mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
            mDrawerLayout.closeDrawer(GravityCompat.START);
        } else {
            mDrawerLayout.openDrawer(GravityCompat.START);
        }
    }
});

Answer 5

Not sure what's the exact error, if you get color already defined, go to attrs.xml search for attr name="color" and rename it or for test comment it, you might need to change your custom attr to someother name, not sure this is an support lib issue, this works for me

Answer 6

For my case the theming of the actionbar was relevant to switch between a white and a dark hamburger icon:

<item name="actionBarWidgetTheme">@style/Theme.AppCompat</item>

vs.

<item name="actionBarWidgetTheme">@style/Theme.AppCompat.Light</item>