Android Development
Toolbar Customization
UI Design
Navigation
Back Button

Display Back Arrow on Toolbar

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Displaying a back arrow on an Android toolbar is part of navigation architecture, not just visual styling. The arrow should reflect screen hierarchy, integrate with back stack behavior, and remain consistent across activities and fragments. Correct setup prevents common deep-link and double-pop bugs.

Understand Up Navigation Versus System Back

The toolbar arrow represents Up navigation to logical parent. System back represents history navigation. They often feel similar but are not always identical.

Use Up navigation when:

  • user should move to parent screen in app hierarchy

Use system back when:

  • user should return to previous history state

Designing this explicitly avoids confusing behavior in nested flows.

Activity-Based Setup with AppCompat

For activity screens, configure toolbar as support action bar and enable home-as-up.

kotlin
1class DetailsActivity : AppCompatActivity() {
2    override fun onCreate(savedInstanceState: Bundle?) {
3        super.onCreate(savedInstanceState)
4        setContentView(R.layout.activity_details)
5
6        val toolbar = findViewById<Toolbar>(R.id.toolbar)
7        setSupportActionBar(toolbar)
8
9        supportActionBar?.setDisplayHomeAsUpEnabled(true)
10        supportActionBar?.title = "Order details"
11    }
12
13    override fun onSupportNavigateUp(): Boolean {
14        finish()
15        return true
16    }
17}

Use onSupportNavigateUp as central handler rather than scattered menu item conditionals.

Declare Parent Activity for Correct Hierarchy

Manifest parent mapping improves behavior when app is opened from notifications or deep links.

xml
<activity
    android:name=".DetailsActivity"
    android:parentActivityName=".OrdersActivity" />

Without parent metadata, Up behavior can become inconsistent in non-happy-path entry routes.

Fragment-Based Apps with Navigation Component

For fragment navigation, wire toolbar to NavController and AppBarConfiguration.

kotlin
1class MainActivity : AppCompatActivity() {
2    private lateinit var navController: NavController
3    private lateinit var appBarConfig: AppBarConfiguration
4
5    override fun onCreate(savedInstanceState: Bundle?) {
6        super.onCreate(savedInstanceState)
7        setContentView(R.layout.activity_main)
8
9        val toolbar = findViewById<Toolbar>(R.id.toolbar)
10        setSupportActionBar(toolbar)
11
12        val host = supportFragmentManager
13            .findFragmentById(R.id.nav_host_fragment) as NavHostFragment
14        navController = host.navController
15
16        appBarConfig = AppBarConfiguration(setOf(R.id.homeFragment, R.id.searchFragment))
17        setupActionBarWithNavController(navController, appBarConfig)
18    }
19
20    override fun onSupportNavigateUp(): Boolean {
21        return navController.navigateUp(appBarConfig) || super.onSupportNavigateUp()
22    }
23}

Top-level destinations should not show back arrow. Child destinations should.

Customize Arrow Icon and Accessibility

You can style the arrow while preserving behavior.

kotlin
val icon = AppCompatResources.getDrawable(this, R.drawable.ic_arrow_back)
icon?.setTint(ContextCompat.getColor(this, android.R.color.white))
supportActionBar?.setHomeAsUpIndicator(icon)

If custom icon is used, keep content descriptions meaningful for assistive technologies.

Verify Navigation Paths

Test more than the list-to-details happy path.

Recommended checks:

  • launch details from list and tap Up
  • launch details from deep link and tap Up
  • compare Up behavior with system back
  • rotate screen and confirm toolbar state remains correct

Automated UI tests for these routes pay off quickly.

Integrate with Predictive Back Carefully

Newer Android back behavior and predictive back animations increase need for consistent navigation contracts. If app mixes manual fragment transactions and Navigation Component, standardize one approach per module to avoid diverging back semantics.

Consistency matters more than custom transitions.

Instrumented Navigation Test Example

For regressions, keep one instrumented test that verifies Up navigation from deep-linked destination to expected parent destination. This catches many misconfigurations around parent mapping and graph setup.

kotlin
1@Test
2fun deepLinkDetails_upNavigatesToOrders() {
3    // Launch activity with deep link intent here
4    onView(withContentDescription(R.string.abc_action_bar_up_description)).perform(click())
5    onView(withId(R.id.ordersRecycler)).check(matches(isDisplayed()))
6}

Even one targeted navigation test prevents many production regressions after route refactors.

Common Pitfalls

  • Treating Up and system back as always identical.
  • Enabling arrow without declaring parent hierarchy.
  • Wiring both manual toolbar click and NavController, causing duplicate navigation.
  • Showing back arrow on top-level screens.
  • Forgetting to test deep-link entry scenarios.

Summary

  • Back arrow setup is a navigation concern, not only a toolbar style change.
  • Use AppCompat or Navigation Component patterns consistently.
  • Declare parent hierarchy for predictable Up behavior.
  • Validate deep-link, rotation, and mixed back-path scenarios.
  • Keep icon customization accessible and behaviorally correct.
  • Add at least one instrumented Up-navigation test so route refactors do not silently break expected parent navigation behavior.

Course illustration
Course illustration

All Rights Reserved.