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

Ryan

9 years ago

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>

<activity

android:name="com.example.myfirstapp.MainActivity"

...

</activity>

<activity

android:name="com.example.myfirstapp.DisplayMessageActivity"

android:label="@string/title_activity_display_message"

android:parentActivityName="com.example.myfirstapp.MainActivity">

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

@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>

1	<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>

1	<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!