Fragment recreation issue with android Navigation component

Question

Our project is using jetpact compose and navigation component .

We have 2 fragments- Fragment A & B . In Fragment A, UI is bit complex because of multiple elements like View Pager and lazycolumn. Lazy column is updated based on the viewpager selection. On selection of a item from lazy column from Fragmnt A it will navigate to Fragment B . We are currently using android navigation component. The problem is navigation component will do fragment replace . Which will recreate Fragment A when onbackpress of Fragment B is called. Because of this we are loosing the UI state of fragment A. We cannot make Fragment B as dialog destination since it should be in stack when Fragment C is opened from Fragment B.

We found 3 solution but all are having some problems.

1. Save UI state in ViewModel and restore state while recreating Fragment A.

   -- We can save the UI state of Viewpager in ViewModel. But saving the list scroll state won't work because list will refresh after viewpager state update. This approach again doing a view recreation which will create performance delay while pressing back from Fragment B

2. Provide CustomFragmentNavigator after replacing fragment replace with Fragment Add.

   -- This will introduce more boiler plate code and We feel its a antipattern since google made fragment replace in navigation purposefully.

3. Do older Frgament transactions in Fragment A instead of using navigation component. Going with hybrid approach when fragment add is required use older fragment transaction or use Navigation component.

   -- Since we are using navhost fragment , Unable to fetch the container ID for doing normal fragment transaction. We have only container fragment in root layout.

Expecting some technical guidance on this problem. What should be the approach to solve this fundamental issue.

Answer 1

According to documentation:

When you use popUpTo to navigate to a destination, you can optionally save the states of all destinations popped off of the back stack.

To enable this option, define popUpToSaveState as true in the associated action, or call to NavController.navigate().

When you navigate to a destination, you can also define restoreSaveState as true to automatically restore the state associated with the destination in destination property.

XML example

<action
  android:id="@+id/action_a_to_b"
  app:destination="@id/b"
  app:popUpTo="@+id/a"
  app:popUpToInclusive="true"
  app:restoreState=”true”
  app:popUpToSaveState="true"/>

Compose Examples

@Composable
fun MyAppNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),
    startDestination: String = "destination_a"
) {
    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = startDestination
    ) {
        composable("destination_a") {
            DestinationA(
                onNavigateToB = {
                // Pop everything up to the "destination_a" destination off the back stack before
                // navigating to the "destination_b" destination
                    navController.navigate("destination_b") {
                        popUpTo("destination_a") {
                            inclusive = true
                            saveState = true
                        }
                    }
                },
            )
        }
        composable("destination_b") { DestinationB(/* ... */) }
    }
}

@ Composable
fun DestinationA(onNavigateToB: () -> Unit) {
    Button(onClick = onNavigateToB) {
        Text("Go to A")
    }
}

More granularly, you can change how you call NavController.navigate() in the following ways:

// Pop everything up to the destination_a destination off the back stack before
// navigating to the "destination_b" destination
navController.navigate("destination_b") {
    popUpTo("destination_a")
}

// Pop everything up to and including the "destination_a" destination off
// the back stack before navigating to the "destination_b" destination
navController.navigate("destination_b") {
    popUpTo("destination_a") { inclusive = true }
}

// Navigate to the "search” destination only if we’re not already on
// the "search" destination, avoiding multiple copies on the top of the
// back stack
navController.navigate("search") {
    launchSingleTop = true
}

See this link for more information: Navigation and the back stack