Display Back Arrow on Toolbar

Implementing a Back Arrow on Your Android Toolbar

Learn how to effectively add and manage a back navigation arrow (Up button) on your Android application's toolbar, enhancing user experience and navigation consistency.

The back arrow, often referred to as the 'Up' button, is a crucial UI element in Android applications. It provides a consistent way for users to navigate hierarchically up the app's navigation stack, typically returning to the previous screen or parent activity. While the system back button handles historical navigation, the Up button provides logical navigation within your app's structure. This article will guide you through the process of implementing and customizing this essential feature using Toolbar and ActionBar (or ActionBarCompat) in your Android projects.

Understanding the Up Button vs. System Back Button

It's important to distinguish between the Up button and the system's back button. The system back button navigates through the user's history of screens, regardless of the app's internal hierarchy. The Up button, conversely, navigates to a specific parent activity defined in your app's manifest or programmatically. This distinction is key for maintaining a predictable and intuitive user experience. For instance, if a user arrives at a detail screen from a search result, the system back button might take them back to the search results, while the Up button would take them to the parent list of items.

flowchart TD
    A[User Action] --> B{Navigation Type?}
    B -->|System Back Button| C[Goes to previous screen in history]
    B -->|Up Button (Back Arrow)| D[Goes to logical parent activity]
    C --> E[Can exit app if no history]
    D --> F[Stays within app's hierarchy]

Comparison of System Back Button vs. Up Button (Back Arrow)

Implementing the Back Arrow with Toolbar

Modern Android development heavily relies on the Toolbar for app bar functionality. To display a back arrow on your Toolbar, you typically need to set it as the ActionBar for your activity and then enable the home as up indicator. This involves a few steps in your activity's onCreate method.

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.os.Bundle;
import android.view.MenuItem;

public class DetailActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);

        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Enable the Up button
        if (getSupportActionBar() != null) {
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            // Handle the Up button click
            onBackPressed(); // Or navigate to parent activity
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Java code to enable the Up button on a Toolbar

<!-- activity_detail.xml -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:titleTextColor="@android:color/white" />

    <!-- Your activity content goes here -->

</LinearLayout>

XML layout for an activity with a Toolbar

Defining Parent Activity in AndroidManifest.xml

To ensure the Up button navigates to the correct parent activity, you can declare the parent-child relationship in your AndroidManifest.xml. This is the recommended approach for simple hierarchical navigation.

<!-- AndroidManifest.xml -->
<application ... >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".DetailActivity"
        android:label="@string/title_activity_detail"
        android:parentActivityName=".MainActivity" >
        <!-- Parent activity meta-data to support lower API levels -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value=".MainActivity" />
    </activity>
</application>

Defining parent activity in AndroidManifest.xml

1. Step 1: Add Toolbar to Layout

Include a androidx.appcompat.widget.Toolbar in your activity's layout XML file. Ensure it has an id (e.g., @+id/toolbar) and appropriate layout_width and layout_height.

2. Step 2: Set Toolbar as ActionBar

In your activity's onCreate method, find the Toolbar by its ID and call setSupportActionBar(toolbar) to set it as the activity's action bar.

3. Step 3: Enable Up Button

After setting the support action bar, check if getSupportActionBar() is not null, then call setDisplayHomeAsUpEnabled(true) and setDisplayShowHomeEnabled(true) on it to display the back arrow.

4. Step 4: Handle Up Button Clicks

Override the onOptionsItemSelected method in your activity. Check if the selected item's ID is android.R.id.home. Inside this condition, call onBackPressed() or use NavUtils.navigateUpFromSameTask(this) to handle the navigation.

5. Step 5: Define Parent Activity (Optional but Recommended)

For proper hierarchical navigation, declare the parent activity in your AndroidManifest.xml using android:parentActivityName for API 16+ and a <meta-data> tag for older API levels.