Add back arrow to fragment with Navigation Component

Question

I implemented a basic Navigation component on an app that consist of a MainActivity that holds a Toolbar (that I have added to have the back arrow functionality) and a fragment container which starts with Fragment A. In this fragment I have a button which redirects to a blank Fragment B.

I can return to fragment A (from fragment B) from the bottom Android navigation using Navigation component, but I want to do the same using the back arrow from the toolbar that I have added. I implemented the arrow putting setSupportActionBar(findViewById(R.id.toolbar)) in Main Activity and (activity as AppCompatActivity).supportActionBar?.setDisplayHomeAsUpEnabled(true) on Fragment B, but when I tap it it doesn't redirect to Fragment A because (I suppose) that the back stack is empty.

MainActivity

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setSupportActionBar(findViewById(R.id.toolbar))
}

MainActivity xml

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar"
    app:navGraph="@navigation/nav_graph" />

FragmentB

 override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    (activity as AppCompatActivity).supportActionBar?.setDisplayHomeAsUpEnabled(true)
}

Added this to remove the default toolbar in styles.xml

<item name="windowNoTitle">true</item>

In FragmentB up button not working fragmentB with back not working

I want to do that using Navigation Component, any ideas?

Thanks.

Answer 1

Thanks to @MustafaKhaled I could find the correct documentation that is in this link

I deleted setDisplayHomeAsUpEnabled of fragmentB (you don't need to add anything in this fragment).

I leave as it is the code of styles.xml.

My new MainActivity is like this:

private lateinit var toolbar: Toolbar

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    toolbar = findViewById(R.id.toolbar)
    setupNavigation()
}

private fun setupNavigation() {
    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    val navController = navHostFragment.navController
    val appBarConfiguration = AppBarConfiguration.Builder(navController.graph).build()
    toolbar.setupWithNavController(navController, appBarConfiguration)
}

Following this way you manage the toolbar behavior through the Navigation-UI feature.

---

UPDATE 28/04/20

There is an approach simpler than this that doesn't need a toolbar because uses the default one.

MainActivity

class MainActivity : AppCompatActivity() {
private lateinit var appBarConfiguration: AppBarConfiguration
private lateinit var navController: NavController

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setupNavigation()
}

private fun setupNavigation() {
    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    navController = navHostFragment.navController
    appBarConfiguration = AppBarConfiguration.Builder(navController.graph).build()
    setupActionBarWithNavController(navController, appBarConfiguration)
}

override fun onSupportNavigateUp(): Boolean {
    return navController.navigateUp(appBarConfiguration)
            || super.onSupportNavigateUp()
}

}

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 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/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/nav_graph" />

And my styles.xml file is like the default one:

 <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

The updated repo link

Answer 2

In your MainActivity

setup your navigation:

    private fun setupNavigation() {
    val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment?
    navController = navHostFragment!!.navController
    appBarConfiguration = AppBarConfiguration.Builder(setOf(R.id.checklocation,R.id.questions,R.id.news,R.id.profile_tab)).build()
    NavigationUI.setupWithNavController(bottomNavigation,navController)
    NavigationUI.setupActionBarWithNavController(this,navController)
}

to enable back arrow be shown and shows the previous destination override this function

    override fun onSupportNavigateUp(): Boolean {
    return navController.navigateUp()
}

By the way, using navigation component with bottom navigation, we don't have to configure your toolbar, this will be handled by adding above dunctions in your MainActivity.