As we all know that in Android development, the onBackPressed() method has been widely used to handle the back button press event. After introducing the Navigation component in Android Jetpack, this has been deprecated. In this article, we’ll see how to handle the back button press event in Kotlin using the navigation component.

What is the Navigation component?

The Navigation component provides a standardized way to handle navigation in Android apps. It uses a more structured and modular approach to navigation, making the app’s navigation graph more declarative and easier to manage.

Add the navigation Component dependency

In the build.gradle file, add the following dependency information.

implementation "androidx.navigation:navigation-fragment-ktx:2.4.0"
implementation "androidx.navigation:navigation-ui-ktx:2.4.0"

Create navigation graph

Now, we need to create a navigation graph XML that defines the app’s navigation flow. It contains the overall navigation structure of the app.

<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/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.app.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/detailsFragment"
        android:name="com.example.app.DetailsFragment"
        android:label="Details"
        tools:layout="@layout/fragment_details" />

    <action
        android:id="@+id/action_homeFragment_to_detailsFragment"
        app:destination="@id/detailsFragment" />
</navigation>

The nav_graph.xml starts with <navigation> tab which contains several namespaces such as android, app and tools.

Inside the <navigation> tag, we define different destinations using <fragment> tags where each <fragment> represents a screen in our app.

For example, the homeFragment and detailsFragment are defined as destinations with their IDs.

We can also define <action> tags to represent navigation actions between destinations. In the above example, there is an action action_homeFragment_to_detailsFragment that navigates from the homeFragment to the detailsFragment.

The app:startDestination attribute specifies the initial destination when the navigation starts which is homeFragment as per the above example.

Setting up navigation in the activity

In the activity’s XML layout file, add a NavHostFragment that serves as the container for our fragments.

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

Handling the back button pressed

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.navigation.findNavController
import androidx.navigation.ui.NavigationUI

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val navController = findNavController(R.id.navHostFragment)
        NavigationUI.setupActionBarWithNavController(this, navController)
    }

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

In the above example,onSupportNavigateUp() method is overridden to handle the Up button press event. It uses the NavController to navigate up when the Up button is pressed.

Categorized in:

Tagged in:

,