1

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

enter image description here

Incorrect icon

enter image description here

Christopher Rucinski
  • 4,737
  • 2
  • 27
  • 58
  • 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" – Christopher Rucinski Aug 20 '15 at 01:19
  • 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](http://developer.android.com/guide/topics/ui/menus.html#xml) instead, which would allow you to have an action that triggers opening a menu without overloading the overflow button. – ianhanniballake Aug 20 '15 at 01:55
  • 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? – Christopher Rucinski Aug 20 '15 at 02:34

1 Answers1

3

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>
ianhanniballake
  • 191,609
  • 30
  • 470
  • 443
  • 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 – Christopher Rucinski Aug 20 '15 at 01:34
  • Just `actionOverflowButtonStyle` should do it. Are you seeing differently? – ianhanniballake Aug 20 '15 at 01:35
  • 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. – Christopher Rucinski Aug 20 '15 at 01:39
  • 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? – Christopher Rucinski Aug 20 '15 at 01:42
  • 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. – ianhanniballake Aug 20 '15 at 01:53
  • 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. – Christopher Rucinski Aug 20 '15 at 01:57
  • 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 – Christopher Rucinski Aug 20 '15 at 02:00
  • 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](https://github.com/google/material-design-icons) – ianhanniballake Aug 20 '15 at 02:03
  • 1
    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 – Christopher Rucinski Aug 20 '15 at 02:11