Display back button on toolbar on first screen of navigation graph

Question

I'm trying out androidx navigation component and have setup my activity with a toolbar a container. I'm doing this in one of the intermittent screens of my app which has a lot of internal navigation/steps and I thought I could navigation arch component a try with this.

Since this is an intermittent screen, I want to display a back button on the toolbar from the first screen itself.

I've already setup the toolbar with the below code in the onCreate() method of my host activity,

 setSupportActionBar(toolbar);
 if (getSupportActionBar() != null) {
   getSupportActionBar().setDisplayHomeAsUpEnabled(true);
   getSupportActionBar().setDisplayShowHomeEnabled(true);
 }
NavigationUI.setupActionBarWithNavController(this, navHostFragment.getNavController());

I can see the back button/back arrow on the second screen of my graph but not on the first screen.

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation"
    app:startDestination="@id/listing">

    <fragment
        android:id="@+id/listing"
        android:name=".ui.ItemsListingFragment"
        android:label="Items"
        tools:layout="@layout/items_listing" >
        <action
            android:id="@+id/listToQuantity"
            app:destination="@id/quantity"
           />
        <action
            android:id="@+id/listToReason"
            app:destination="@id/reason"
            />
    </fragment>
    <fragment
        android:id="@+id/quantity"
        android:name=".ui.ItemQuanitySelectionFragment"
        android:label="Items"
        tools:layout="@layout/fragment_item_quanity_selection" >
        <action
            android:id="@+id/quantityToReason"
            app:destination="@id/reason"
            />
    </fragment>
    <fragment
        android:id="@+id/reason"
        android:name=".ui.ItemReasonFragment"
        android:label="Items"
        tools:layout="@layout/fragment_item_reason">
    </fragment>
</navigation>

What more changes do I need to make to add the back button on the toolbar right from the first step.

dhabensky · Answer 1 · 2019-08-14T07:29:50.557

31

As you noted, navigation component show back button on all destinations except top-level. It uses an AppBarConfiguration to determine which destinations are considered 'top-level'.

So you need to:
1) create AppBarConfiguration without top-level destinations
2) call a 3-argument version of setupActionBarWithNavController

AppBarConfiguration abc = new AppBarConfiguration.Builder().build();
NavigationUI.setupActionBarWithNavController(this, navHostFragment.getNavController(), abc)

To customise up button behavior on 'top-level' destination you can set fallback OnNavigateUpListener in your appbar configuration builder:

new AppBarConfiguration.Builder().setFallbackOnNavigateUpListener(listener).build()

More info from sources:
click on up button calles NavigationUI.navigateUp(NavController, AppBarConfiguration) which in turn calles NavController.navigateUp() which tries to pop the backstack. As it cannot pop back stack, it just does nothing and returns false. Your fallback listener will be called in that case.

edited Aug 14 '19 at 07:29

answered May 25 '19 at 17:50

dhabensky

1,045
8
15

2

yap, back button appears but doesn't know how to go back – rafaelasguerra Aug 13 '19 at 18:16
1

@rguerra Added info about this – dhabensky Aug 14 '19 at 07:31
1

Thanks for your good search --> very specific .. works with me after 8 hours of search – Mina Samir Oct 27 '19 at 23:37
very well explained. Thanks – Roger Garzon Nieto May 11 '20 at 14:45
@rafaelasguerra I have issue that back button not showing. Can you help me out. – Balwinder Singh Dec 09 '20 at 12:06

score 4 · Answer 2 · answered Nov 26 '20 at 06:43

The back button is displayed as onSupportNavigateUp() method return true. You need to override onSupportNavigateUp() method.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //
        setSupportActionBar(mToolbar)
        mNavController = getNavController();
        mAppBarConfiguration = new AppBarConfiguration.Builder().build();
        NavigationUI.setupActionBarWithNavController(this, mNavController, mAppBarConfiguration);
    }


    @Override
    public boolean onSupportNavigateUp() {
        //
        if (!(mNavController.navigateUp() || super.onSupportNavigateUp())) {
            onBackPressed();
        }
        return true;
    }

score 1 · Answer 3 · answered Mar 14 '20 at 13:43

When calling setUpActionBarWithNavCntroller you have to override the function onSupportNavigateUp, like this:

override fun onSupportNavigateUp(): Boolean {
    return findNavController(R.id.navHostFragment).navigateUp() 
            || super.onSupportNavigateUp()
}

score 1 · Answer 4 · answered Apr 23 '20 at 03:52

1- I created an interface to show/hide up button from the nav host activity.

    interface ShowUpButtonListener {
    fun showUpButton()
    fun hideUpButton()
}

2- Here is how the activity implements the interface methods to show/hide up button:

    override fun showUpButton() {
    val navController = this.findNavController(R.id.nav_host)
    val listener = AppBarConfiguration.OnNavigateUpListener { navController.navigateUp() }
    val abc = AppBarConfiguration.Builder().setFallbackOnNavigateUpListener(listener).build()
    NavigationUI.setupActionBarWithNavController(this, navController, abc)
}


override fun hideUpButton() {
    val navController = this.findNavController(R.id.nav_host)
    NavigationUI.setupActionBarWithNavController(this, navController)
}

3- Here the method in the activity when up button pressed. If in start destination, implement onBackPressed():

    override fun onSupportNavigateUp(): Boolean {
    val navController = this.findNavController(R.id.nav_host)
    if(!navController.navigateUp()){ // When in start destination
        onBackPressed()
    }
    return navController.navigateUp()
}

4- In a fragment create show up button listener property:

private lateinit var showUpButtonListener: ShowUpButtonListener

5- Assign property to context activity:

    override fun onAttach(context: Context) {
    super.onAttach(context)
    if(context is ShowUpButtonListener){
        showUpButtonListener = context
    }
}

6- In the fragment call hide or show up button from the interface property:

fun someFunction() { 
    showUpButtonListener.showUpButton()
}

7- In a fragment can listen whenever back button (NOT up button) pressed:

    private fun setupBackPress() {
    requireActivity()
        .onBackPressedDispatcher
        .addCallback(this, object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() { 
            }
        })
}

Display back button on toolbar on first screen of navigation graph

4 Answers4

Linked