Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

The process for defining the title in the app bar using Navigation Architecture Component involves the following steps:

  1. Add the dependency for Navigation Architecture Component in the app build.gradle file.

  2. Define the navigation graph in the res/navigation directory of the project.

  3. In the layout XML file for the destination fragment, add the attribute app:defaultNavHost="true" to the NavHostFragment.

  4. Define the app bar in the layout XML file for the activity that contains the NavHostFragment.

  5. In the MainActivity.kt file, add an instance of the NavController and set it as the NavigationUI controller for the app bar.

  6. In each destination fragment, set the title using the NavigationUI setTitle method.

  7. Build and run the app to see the updated title in the app bar when navigating between fragments.

Example code snippets for some of these steps are provided below:

Step 2 - Define the navigation graph

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="@string/home_title" />

    <fragment
        android:id="@+id/aboutFragment"
        android:name="com.example.app.AboutFragment"
        android:label="@string/about_title" />

</navigation>

Step 3 - Add attribute to NavHostFragment

<fragment
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true"
    ... />

Step 4 - Define the app bar in activity layout XML

<com.google.android.material.appbar.AppBarLayout
    ...
    >
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/appBar"
        ...
        />
</com.google.android.material.appbar.AppBarLayout>

Step 5 - Set NavigationUI controller for app bar in MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

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

        navController = findNavController(R.id.navHostFragment)

        val appBar = findViewById<Toolbar>(R.id.appBar)
        setSupportActionBar(appBar)
        NavigationUI.setupActionBarWithNavController(this, navController)
    }

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

Step 6 - Set title in destination fragment

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        NavigationUI.setTitle(activity, R.string.home_title)
    }

    ...
}