Custom overflow icon is too big (Using android.support.v7 and AppCompat)

问题

My goal is to have the action bar be a red color, but since my only options from the default android library were white and black, I tried customizing it. I made some custom red icons by using a paint bucket on gimp to just fill in the white icons and re-save it under a different name. I did the same thing with the overflow icon, but for some reason, it's rendering a lot bigger than my other icons, which I don't want.

I am using android:minSdkVersion="15" and targetSdkVersion 21 and the support library (specifically, android.support.v7). My activity extends android.support.v7.app.ActionBarActivity and contains a fragment filling the whole activity. But my overflow icon is bigger than the other ones, but I want them to be the same size:

I know it is choosing the right icon because they are both blue. It must be resizing a different way, but I don't know why? I actually have 5 differently-colored zoom-in icons in drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi, and drawable-xxxhdpi, just so I can see if the problem is the wrong icon being used.

When I use the default icons that come with the @style/Widget.AppCompat.Light.ActionBar.Solid.Inverse parent theme, then the sizes all look the same:

Experiment using the "more vertical" icon:

Using the drawable-xxhdpi size looks like this:

I tested a smaller icon (drawable-mdpi size) by putting it in drawable and forcing it to be used (even though my android uses the drawable-xxhdpi icons), but it ended up being blown up to a large size anyway:

Here is my custom theme code that I used:

<style name="NGT48Theme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/NGT48ActionBar</item>
        <item name="android:windowBackground">@color/white</item>
        <item name="actionBarStyle">@style/NGT48ActionBar</item>
        <item name="android:actionOverflowButtonStyle">@style/NGT48Theme.OverFlow</item>
        <item name="actionOverflowButtonStyle">@style/NGT48Theme.OverFlow</item>
    </style>

<!-- ~~~~~~~~~~~~~~~~~~~~  ActionBar styles ~~~~~~~~~~~~~~~~~~~~ -->
<style name="NGT48ActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/white</item>
    <item name="background">@color/white</item>
    <item name="android:titleTextStyle">@style/NGT48ActionBarTitleTextStyle</item>
    <item name="titleTextStyle">@style/NGT48ActionBarTitleTextStyle</item>
</style>

<!-- ~~~~~~~~~~~~~~~~~~~ ActionBar Title Text Styles ~~~~~~~~~~~~~~~ -->
    <style name="NGT48ActionBarTitleTextStyle"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
           >
        <item name="android:textColor">@color/red_NGT48</item>
    </style>


    <!-- ~~~~~~~~~~~~~~~~~~~ Overflow Icon Styles ~~~~~~~~~~~~~~~ -->
    <style name="NGT48Theme.OverFlow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_zoom_in_red_48dp</item>
    </style>

---

Edit: Here are the results of Ivan's answer. I downloaded 24dp versions of the icon, changed the color, tested it, and it worked! :)

回答1:

The more [aka action overflow] icon is what's called a system icon in Google's design spec, and according to the spec, size should be 24dp (as opposed to usual 48dp of a product icon)

So, for xxhdpi your icon size should be 72px. You can also check out the original Material icon. For appcompat, it's location is ../appcompat-v7/[version]/res/drawable-xxhdpi/abc_ic_menu_moreoverflow_mtrl_alpha.png

PS Actually, if you only need to change the color of the more button (and text, as I see from screenshots), another option is to just use tinting to color the items. Appcompat supports it for all widgets in Toolbar, stock icons are uncolored and alpha-enabled, to allow tinting.

Use stock drawable of the icon (i.e. don't override) and add (I may be a bit rusty on this)

// Text color
<item name="android:textColorPrimary">@color/red</item>
// Icon color
<item name="android:textColorSecondary">@color/red</item>

To your actionbar theme.

回答2:

You can create a Image Asset within res directory, just select; Icon type:(Action Bar and Tab Icons), and Asset Type:(Image), add your image and it's done. Add your new drawable resource

来源：https://stackoverflow.com/questions/32450144/custom-overflow-icon-is-too-big-using-android-support-v7-and-appcompat