Step by Step Guide to Setup AndroidX Compose Navigation: Part 2

Step by Step Guide to Setup AndroidX Compose Navigation: Part 2

Apr 14, 2024·

2 min read

We’ll discuss how to setup Compose Navigation by using Google’s navigation library.

Kindly check the part 1 of this series:

This will be the part 2 of "AndroidX Compose Navigation" Series.

In the last part, we have developed a simple navigation, here comes the preview.

Let's add some spicy states... For simplicity I'll add a count state.

fun FirstScreen(navigateToSecondScreen: () -> Unit) {
    OuterComposable {
        // Newly added count state        
        var count by remember {
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "First Screen", fontSize = 48.sp)
            // Added a new button to change state
            Button(onClick = { count++ }) {
                Text(text = "Count: $count")
            Button(onClick = {
            }) {
                Text(text = "Navigate to 2nd Screen")

Let's run the code in our Intent Navigation.

It works as expected, lets do the same for our Compose Navigation.

It may look working, But look closely for the count state, it resets when coming back from Second Screen. Why?

We have declared the count state inside the First Screen, while navigation FirstScreen is getting destroyed and recreated while coming back.

Three options to fix this:

  • Add the count state out of the First Screen, into the MainActivity class itself.

  • Add a ViewModel, add these state inside the Viewmodel.

  • Instead of remember use rememberSaveable.

I tried three options, but third option seems to have less code changes 😜.
Adding ViewModel may be a overkill.

remember and rememberSaveable are same, but differs in one feature.

It attaches the state to Parent Activity.

Note: Don't use rememberSaveable more often, as it has a size limit.

Let's change remember with rememberSaveable.

Now it works as same as our Intent Navigation, No loss of state.

Source Code

That's it for the Part 2.