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

billiout picture billiout · Oct 31, 2014 · Viewed 19.9k times · Source

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

Answer

Kingsley Adio picture Kingsley Adio · Nov 2, 2014

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.