Changing Overflow Icon in the Action Bar

Changing overflow icon in the action bar

You can with a style, but you have to add it to the main Theme declaration.

<resources>
    <!-- Base application theme. -->
    <style name="Your.Theme" parent="@android:style/Theme.Holo">
        <!-- Pointer to Overflow style ***MUST*** go here or it will not work -->
        <item name="android:actionOverflowButtonStyle">@style/OverFlow</item>
    </style>

    <!-- Styles -->
    <style name="OverFlow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_action_overflow</item>
    </style>

</resources>

You also can change it dynamically, which I go into detail about here:

Changing the Android Overflow menu icon programmatically

Change Action Bar Overflow Icon in an app

You can change the Overflow Icon programmatically by using Toolbar.setOverflowIcon() method.

// ToolBar
Toobar toolbar = (Toolbar) findViewById(R.id.toolbar);

if (toolbar != null) {
    setSupportActionBar(toolbar);
    toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.your_overflow_icon));
}

Toolbar XML

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Light"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar>

or, you can also define a style for custom Overflow Icon in your main styles.xml like this:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="actionOverflowButtonStyle">@style/OverFlow</item>
</style>

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

Change action bar overflow icon

 i want to apply these styles above 4.0 version 

But you have the styles in values-v11

Also note

parent="android:Theme.Holo.Light" // in your code

to

parent="@android:style/Theme.Holo" // mine

It should be in values-v14

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="MyTheme" parent="@android:style/Theme.Holo">
        <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
    </style>
    <style name="MyActionButtonOverflow" parent="@android:style/Widget.Holo.Light.ActionButton.Overflow">
       <item name="android:src">@drawable/ic_launcher</item>    
    </style>
</resources>
Snap

Forget how the ui look's this is for testing. But you see the launcher icon as the overflow menu icon.

Edit:

This is my test sample

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
             <item name="android:actionBarStyle">@style/MyActionBar</item>
              <item name="android:actionBarDivider">@color/red</item>
              <item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
    </style>

    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
         <item name="android:background">#FF9D21</item>

         <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style> 
    <style name="MyActionBarTitleText"
           parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/red</item>
        <item name="android:textStyle">bold</item>
    </style>
      <style name="MyActionButtonOverflow" parent="@android:style/Widget.Holo.Light.ActionButton.Overflow">
    <item name="android:src">@drawable/launcher</item>    
    </style>
    <style name="ActionButton" parent="@android:style/Widget.Holo.Light.ActionButton">
</style>
</resources>

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#FF0000</color>
</resources>

Snap

How do I change the Action Bar Overflow button color

I found another way to do it which does not require replacing the image!

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/AppTheme.ActionBarTheme</item> <!-- used for the back arrow on the action bar -->
</style>

<style name="AppTheme.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <!-- THIS is where you can color the arrow and the overflow button! -->
    <item name="colorControlNormal">@color/splash_title</item> <!-- sets the color for the back arrow -->
    <item name="actionOverflowButtonStyle">@style/actionOverflowButtonStyle</item> <!-- sets the style for the overflow button -->
</style>

<!-- This style is where you define the tint color of your overflow menu button -->
<style name="actionOverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">@color/white</item>
</style>

how to change Android overflow menu icon

Define a custom style: for example, let's call it customoverflow.

In this style you set android:src to the picture you would like to use.
Now create a style with parent Theme.holo.

In this style you need to define:

<item name="android:actionOverflowButtonStyle">@style/customoverflow</item>

I just tested this and it works.

Changing the action bar overflow icon to the dark version

Use Theme.Holo.Light.DarkActionBar as your base if you want to do this. It will take care of these details.

---

Related Topics