Custom AppCompat Theme not changing Overflow icon on older devices

Question

Recently I decided to change the Action Overflow Icon on my app. I got it working on Lollipop devices, but it isn't working on my Ice Cream Sandwich and Kitkat device. Note: on both the devices that it does not work on, the action overflow icon has 3 rounded dots, so the theme is changing it to the Material version....just not my version.

My issue is that I cannot get this to work on older devices, but it works on Lollipop.

Before, I would have had to create separate themes for each version, but now that is not needed. Only one theme is recommended.

Code

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:actionOverflowButtonStyle">@style/OverflowMenuButton</item>
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <!--<item name="colorPrimaryLight">@color/primary_light</item>-->
        <item name="colorAccent">@color/accent</item>
        <item name="android:textColorPrimaryInverse">@color/primary_text_light</item>
        <item name="android:textColorPrimary">@color/primary_text</item>
        <item name="android:textColorSecondary">@color/secondary_text</item>
        <!--<item name="icons">@color/icons</item>-->
        <item name="divider">@color/divider</item>

    </style>

    <style name="OverflowMenuButton" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_star_rate_white_18dp</item>
    </style>


</resources>

Correct icon

Incorrect icon

Perkoff

I checked a lot of similar questions on here, but they are mostly saying "Hey. the custom icon is not showing up [on my new device]". I am saying, "Hey, it works on my new device, but it isn't showing up on my old devices, and I noticed the icon has 3 rounded dots on older devices, too" – Perkoff

One note: using a star as the overflow icon is probably a really bad idea - older devices with a physical menu button will never see the icon and the content description (i.e., what a low vision user will hear) won't match the actual behavior. Consider using a submenu instead, which would allow you to have an action that triggers opening a menu without overloading the overflow button. – Emmanuelemmeline

The overflow is for loosely-related items, and you can group highly-related items within a single submenu. I thought that since I would only have 1 submenu (with 3 checkboxes for "Favorite", "Watched", and "Will Watch"), it would be better to reduce clicks and place them all as menu items because you can click 2 out of those 3 (So 4 clicks instead of 6). The 3 dots indicate a sortment of options, but I have highly-related, top-level menu items, so it seemed good to change the icon. My lowest API level is 14 and the hard buttons were removed in API 11. Still you think I should change back? – Perkoff

Answer 1

You are using android:actionOverflowButtonStyle, which is the correct approach for replacing the framework overflow button, only available on Lollipop and higher devices.

However, AppCompat has its own actionOverflowButtonStyle attribute which works on all API 7+ devices - you should use that in place of android:actionOverflowButtonStyle:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <item name="actionOverflowButtonStyle">@style/OverflowMenuButton</item>

    ...

</style>

Emmanuelemmeline

Two question: (1) do I leave android:actionOverflowButtonStyle along with your inclusion? (2) Is there a fix for pre-17 devices as I have a 4.0.2 device – Perkoff

Just actionOverflowButtonStyle should do it. Are you seeing differently? – Emmanuelemmeline

Oh, my bad, it works. I assumed when you said API 17+ that my API 14 device would not get it. But I tested it and it works. – Perkoff

But I have 1 more question that is related. I grabbed the icon from Google's icon website with the 5 buckets(mdpi - xxxdpi), but that places a very tiny icon for the overflow button. I did a workaround by removing all the icons and only having 1 icon instead. But you can see that the star icon is blurry. Why don't the 5 bucket solution work? – Perkoff

I'm not sure what you mean by 'removing all the icons and only having 1 icon instead' - what size icon did you have in what folder? The icons come in a number of sizes so I'd just try out different sizes. – Emmanuelemmeline

As you said, there are different icons that change based on size. I had them in my project under drawable-mpdi ... drawable-xxxpdi (as extracted from Google's icon website), but deleted all of them. I chose just 1 of those icon (just placed in drawable) that was displayed the correct size; however, the resolution isn't correct. – Perkoff

I did the guess and check method....and the results are above. If I choose the 72x72 icon, then it is displayed as 72x72 (my thought was that it would be scaled down to the correct size, but it wasn't). I settled on the 36x36 icon, but it has a low resolution – Perkoff

Putting things in the drawable folder means they get scaled automatically for you. If the 36x36px icon works for you in the drawable folder, then just download the appropriate set of _36dp sized icons from the material design icons site – Emmanuelemmeline

Ah got it. The one I had was originally 18dp, so everything was scaled down to 18dp.....not the recommended icon size for the toolbar. I didn't see any other size....but I see the recommended size is _24dp so I would prefer to use that – Perkoff