Mastering Screen Transition Tracking in Jetpack Compose

Navigating and Managing Compose Navigation

In a previous article, I explored the implementation of navigation within Jetpack Compose. Article link:

Implementing Navigation in Jetpack Compose

In this follow-up piece, we will delve deeper into managing navigation complexities. The initial article primarily focused on the implementation aspect of navigation, leaving out the intricacies of tracking and understanding the screens currently displayed to users. Thus, in this article, we aim to explore these nuances. Specifically, we will learn how to display text on the bottom bar indicating the current screen, enhancing user awareness within the app’s navigational flow.

☛ Setting Up the Bottom Bar

Firstly, it’s necessary to establish a bottom bar, a crucial component even though it’s not directly related to tracking screen transitions. For this tutorial, we’ll utilize the navigation setup from the previous article. Don’t worry if you haven’t read the previous article; understanding the basics of navigation in Jetpack Compose should suffice to follow along with the code.

Note that in our example, screen names are declared using an enum class as follows:

enum class Screens {
   HOME,
   SCREEN_A,
   SCREEN_B
}

To set up a bottom bar, use the Scaffold structure and pass a composable to its bottomBar parameter. In this case, we will simply use a Text composable to display the current screen name.

Here’s the example code for the bottom bar:

Scaffold(bottomBar = {
   Text(
       text = "Current screen is ...",
       fontSize = 24.sp,
       textAlign = TextAlign.Center,
       modifier = Modifier
           .fillMaxWidth()
           .padding(vertical = 16.dp)
   )
}) {
   // Create NavHost
   NavHost(
       modifier = Modifier.padding(it),
       // The rest of the code is omitted
}

At this stage, the current screen name cannot be displayed yet, so the text “Current screen is …” is used as a placeholder.

Below is what the Home screen’s preview looks like with this setup:

Now we’re ready to show text on the bottom bar!

Remember to apply PaddingValues to the composable within Scaffold. PaddingValues are crucial for setting appropriate padding, especially when adding a top bar or bottom bar.

☛ Tracking the Current Screen and Displaying Its Name

To track the current screen and display its name in Jetpack Compose, we don’t need to write extensive code. However, it’s worth noting that the navigation system in Android can be quite complex, and a deep understanding might require going through extensive documentation. For this article, we’ll keep the explanation of tracking the current screen straightforward.

First, ensure that the NavController is declared as follows:

// Create NavController
val navController = rememberNavController()

Next, obtain the current back stack entry using currentBackStackEntryAsState(). This function allows you to keep track of the current screen:

// Get current back stack entry
val backStackEntry by navController.currentBackStackEntryAsState()

Then, extract the current screen name from backStackEntry:

// Get the current screen name
val currentScreen = Screens.valueOf(
   backStackEntry?.destination?.route ?: Screens.HOME.name
)

Utilize the safe call operator (?.) and the Elvis operator (?:) since backStackEntry may be null. For more on these operators, you can refer to a previous article I wrote:

Understanding the Concept of Null in Kotlin

Finally, update the bottom bar’s text to reflect the current screen:

Scaffold(bottomBar = {
   Text(
       text = "Current screen is ${currentScreen.name}",
       fontSize = 24.sp,
       textAlign = TextAlign.Center,
       modifier = Modifier
           .fillMaxWidth()
           .padding(vertical = 16.dp)
   )
}) { // The rest of the code is omitted }

As a result, you’ll see that the bottom bar text changes accurately according to the current screen.

By displaying the current screen name to users, it becomes easier for them to understand which screen they are viewing, thereby enhancing the overall quality of your app.

<aside>
  <p>
    Thank you for reading!<br>
    If you enjoyed this post, <br>
    I'd appreciate a clap. 😄
  </p>
</aside>