How to style the DrawerArrowToggle from Android appcompat v7 21 library

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?

score 101 · Accepted Answer · answered Oct 18 '14 at 13:56

101

The following works for me:

<style name="MyTheme" parent="Theme.AppCompat">
   <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

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

answered Oct 18 '14 at 13:56

Chris Banes

31,763
16
59
50

1

My base theme is holo not appcompat. I don't support api below 15. Changing to a appcompat theme for my base would change everything. Any way I can do this? – BigDX Oct 18 '14 at 22:32
1

Okay i have converted everything to appcompat, changed my fragmentactivity to actionbaractivity, getactionbar to getsupportactionbar and created a toolbar. i then used what you put above and still will not work. will not even change color or animate. what could i be doing wrong? – BigDX Oct 19 '14 at 02:11
Also i reviewed your work (which is great) here https://chris.banes.me/2014/10/17/appcompat-v21/ but still have no luck. – BigDX Oct 19 '14 at 02:12
For some reason this changed only color of hamburger icon, but not drawer. I needed to set `colorControlNormal` attr to change both. See my answer http://stackoverflow.com/a/28450500/905565 – marwinXXII Feb 11 '15 at 09:18
this workson 5.1.1 - api 22 but not working on 4.2.2 api 17, though I added above solution in values-v14. Anybody please know what should I do to work it on api 14-api 22 – Shirish Herwade Nov 25 '15 at 12:43
@ShirishHerwade In the XML code where you defined your toolbar, does it say `android:theme="@style/Toolbar_Theme"`? If it does try changing it to `app:theme="@style/Toolbar_Theme"` – Paul M. Dec 17 '15 at 14:07

marwinXXII · Answer 2 · 2015-02-11T09:41:09.437

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.

This is exactly what I'm trying to do as well but for some reason, it doesn't change a thing for me. — Barodapride, Sep 20 '15 at 04:52

score 3 · Answer 3 · answered Aug 19 '15 at 17:13

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);
        }
    }
});

score 0 · Answer 4 · answered Apr 27 '16 at 19:17

0

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>

answered Apr 27 '16 at 19:17

softwaresupply

1,908
3
20
34

score 0 · Answer 5 · answered Jan 23 '18 at 12:07

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

Stefano · Answer 6 · 2014-10-20T18:00:08.253

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

score -1 · Answer 7 · answered Oct 21 '14 at 12:33

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

How to style the DrawerArrowToggle from Android appcompat v7 21 library

7 Answers7

Linked

Related