Android Studio: customize the “back to parent” ActionBar icon image (homeAsUpIndicator)

Like you probably already know, the ActionBar of an Android App can be set to allow backwards navigation from a child Activity to its parent, assuming that the relationship has been properly configured in the AndroidManifest.xml file:

<application>
    <!-- Parent Activity -->
    <activity
        android:name="com.example.myfirstapp.MainActivity"
        ...
    </activity>
    <!-- Child Activity -->
    <activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="@string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity">
        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

We won’t go any further: for a full reference guide to Backwards / Up Navigation we strongly suggest reading the official documentation. We’re just pointing out that, in order to show the “up to parent” icon, we need to set up the 

setDisplayHomeAsUpEnabled()

  method accordingly:

@Override
public void onCreate(Bundle savedInstanceState) {
    getActionBar().setDisplayHomeAsUpEnabled(true);
}

This simple command will bring the backwards navigation icon into the leftmost side of the activity ActionBar

In order to replace the default theme icon with a custom drawable image we need to add the following declaration to our theme xml file:

<item name="android:homeAsUpIndicator">@drawable/ic_custom_indicator</item>

The theme file location may vary: it can be 

/values/styles.xml

  or  

/values/themes.xml

  or even another file, depending on your app project configuration. Also remember that, if you are supporting pre-11 APIs, the above declaration should be put into the theme file located into the 

/values-v11/

 folder, whileast the theme file in 

/values/

  would require the old API style syntax instead:

<item name="homeAsUpIndicator">@drawable/ic_custom_indicator</item>

 

Here’s a couple .rar archives containing some homeAsUpIndicator icons you can use to replace your theme‘s default ones: they are both white, so they could be a nice fit if your ActionBar features a black or dark-colored background color.

Happy coding!

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it's also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies. Microsoft MVP for Development Technologies since 2018.

View all posts by Ryan

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.