Android: AppCompat 21, how to change the back icon and the overflow icon to a custom one?

Question

On my project until some days ago I used sherlock actionbar but I dicided to change the whole actionbar style to the new material design. On my old theme for the back and overflow icon I had some custom icons setted on my theme. But on the appcompat I tried define it on my theme where I use it on a toolbar but it's not working. Anyone knows how to make this possible?

My theme where I use on the toolbar(Generated with asset studio):

<style name="Theme.Themewiz" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar.Solid.Themewiz</item>

    <item name="android:actionBarItemBackground">@drawable/selectable_background_themewiz</item>
    <item name="android:popupMenuStyle">@style/PopupMenu.Themewiz</item>
    <item name="android:dropDownListViewStyle">@style/DropDownListView.Themewiz</item>
    <item name="android:actionBarTabStyle">@style/ActionBarTabStyle.Themewiz</item>
    <item name="android:actionDropDownStyle">@style/DropDownNav.Themewiz</item>
    <item name="android:actionModeBackground">@drawable/cab_background_top_themewiz</item>
    <item name="android:actionModeSplitBackground">@drawable/cab_background_bottom_themewiz</item>
    <item name="android:actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Themewiz</item>

            <!-- Light.DarkActionBar specific -->
    <item name="android:actionBarWidgetTheme">@style/Theme.Themewiz.Widget</item>

    <item name="android:actionOverflowButtonStyle">@style/Theme.AppCompat.Overflow</item>

</style>

<style parent="@style/Widget.AppCompat.ActionButton.Overflow" name="Theme.AppCompat.Overflow">

    <item name="android:src">@drawable/ic_action_overflow</item>

</style>

Toolbar xml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimaryDark"
    app:theme="@style/Theme.Themewiz"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Pycnidium

Code? XML? Without it it's impossible to help. – Manard

I edit my original post with the xmlfrom the theme and the xml from the toolbar. – Pycnidium

Answer 1

Using appcompat 21 to acheive these is pretty easy.

To change the back icon, you'd have to use the support toolbar as your actionbar instead. This post by Chris Banes should get you started.

Once you're done adding the toolbar, all you have to do is:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_id);
toolbar.setNavigationIcon(R.drawable.back_icon);

To change the overflow icon on the other hand, the easiest way is to add a custom style to the main theme declaration. Something like:

<resources>
    <!-- Base application theme. -->
    <style name="Your.Theme" parent="@style/Theme.AppCompat">
        <!-- Your theme items go here -->

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

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

</resources>

Hope that helps.

Lizettelizotte

Worked for me, except using @style/Widget.AppCompat.ActionButton.Overflow instead of @android:style/Widget.AppCompat.ActionButton.Overflow – Guimond

It worked for me, but it's using a really big version of my icon. I have multiple icons in multiple drawable folders, but it doesn't seem to choose a size that matches my other icons. – Oren

Actually, I just got a solution for that problem I was having. I had to use a 24dp icon. You can see my SO question & its answer here: #32450644 – Oren

Answer 2

I have done this way and it works for me

<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/custom_button</item>
</style>

Falls

Answer 3

Getting the views themselves is a bit tricky, but setting their icons and/or color is possible using the Toolbar's functions. Example:

toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
final Drawable navigationIcon = toolbar.getNavigationIcon();
toolbar.setNavigationIcon(getTintedDrawable(this, navigationIcon, 0xffff0000));
final Drawable overflowIcon = toolbar.getOverflowIcon();
toolbar.setOverflowIcon(getTintedDrawable(this, overflowIcon, 0xffff0000));

public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
    Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
    DrawableCompat.setTint(wrapDrawable, color);
    DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN);
    return wrapDrawable;
}

Marinetti

Answer 4

<style name="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="homeAsUpIndicator">@drawable/back_white1</item>
</style>

Plastometer

Answer 5

For Change Navigation Arrow check below code

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

First we need to add the content description attribute to the overflow menu icon in styles.xml file. It can be any string, it’s just needed to find the proper view later in code by it’s description.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MyTheme">
    <!-- Customize your theme here. -->
    <item name="android:actionOverflowButtonStyle">@style/Widget.ActionButton.Overflow</item>
</style>

<style name="Widget.ActionButton.Overflow" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:contentDescription">@string/accessibility_overflow</item>
</style>

Second, we implement the method responsible for finding and colorizing the Overflow Icon:

  /* It's important to set overflowDescription atribute in styles, so we cangrab the reference
* to the overflow icon. Check: res/values/styles.xml
* @param activity
* @param colorFilter
*/
private static void setOverflowButtonColor(final Activity activity, final PorterDuffColorFilter colorFilter) {
    final String overflowDescription = activity.getString(R.string.abc_action_menu_overflow_description);
    final ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
    final ViewTreeObserver viewTreeObserver = decorView.getViewTreeObserver();
    viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            final ArrayList<View> outViews = new ArrayList<View>();
            decorView.findViewsWithText(outViews, overflowDescription,
                    View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
            if (outViews.isEmpty()) {
                return;
            }
            TintImageView overflow=(TintImageView) outViews.get(0);
            overflow.setColorFilter(colorFilter);
            removeOnGlobalLayoutListener(decorView,this);
        }
    });
}

/***Use below code in your activity screen for apply color*/

 final PorterDuffColorFilter colorFilter= new PorterDuffColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
setOverflowButtonColor(this,colorFilter);

Please check below link for know more https://snow.dog/blog/how-to-dynamicaly-change-android-toolbar-icons-color/

Chalmer

Please check my new update let me know if any question – Chalmer

Is it possible to get the overflow button at runtime, without setting the style? – Marinetti