CODEWITHSUNDEEP
androidandroid-actionbar-compat
billiout
billiout

Reputation: 705

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

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"/>

Upvotes: 11

Views: 22697

Answers (5)

Asad
Asad

Reputation: 41

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

Upvotes: 3

android developer
android developer

Reputation: 116412

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;
}

Upvotes: 4

Piyush
Piyush

Reputation: 5737

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/

Upvotes: -2

n1m1
n1m1

Reputation: 979

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>

Upvotes: 4

Kingsley Adio
Kingsley Adio

Reputation: 728

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.

Upvotes: 20

Related Questions