Develop Reference

Jetpack Compose Navigation - Bottom Nav Multiple Back Stack - View Model Scoping Issue

So I have two tabs, Tab A and Tab B. Each tab has its own back stack. I implemented the multiple back stack navigation using code in this google docs
val navController = rememberNavController()
Scaffold(
bottomBar = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
items.forEach { screen ->
BottomNavigationItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
label = { Text(stringResource(screen.resourceId)) },
selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
onClick = {
navController.navigate(screen.route) {
// Pop up to the start destination of the graph to
// avoid building up a large stack of destinations
// on the back stack as users select items
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
// Avoid multiple copies of the same destination when
// reselecting the same item
launchSingleTop = true
// Restore state when reselecting a previously selected item
restoreState = true
}
}
)
}
}
}
) {
NavHost(navController, startDestination = A1.route) {
composable(A1.route) {
val viewModelA1 = hiltViewModel()
A1(viewModelA1)
}
composable(A2.route) {
val viewModelA2 = hiltViewModel()
A2(viewModelA2)
}
composable(A3.route) {
val viewModelA3 = hiltViewModel()
A3(viewModelA3)
}
}
}
Tab A has 3 screens (Screen A1 -> Screen A2 -> Screen A3). I use the hiltViewModel() function to instantiate the view model and I invoked it inside the composable() block for each screen
The issue is when I'm navigating from A1 to A2 to A3 and then when I change tab to Tab B, the view model for Screen A2 seems like it's being disposed (onCleared is called). So when I go back to Tab A displaying Screen A3 then hit back to Screen A2, the view model for A2 is instantiated again (init block is called again). What I wanted to achieve is to retain the view model for A2 for this flow until I back out of A2.
Is this even possible?

This seems like a bug when you click on the next navigation item too fast, while the current view appear transition is not yet finished. This is a known issue, please star it to bring more attention.
Meanwhile you can wait current screen transition to finish before navigating to the next one. To do so you can check visibleEntries variable and navigate only after it contains only single item.
Also I think that current documentation provide not the best example of bottom navigation, because if you're not on a start destination screen, pressing back button will bring you back to the start destination, when I expect the view to be dismissed. So I've changed how you navigate too, if you're fine with the documentation behaviour, you can replace content of fun navigate() with your own.
val navController = rememberNavController()
var waitEndAnimationJob by remember { mutableStateOf<Job?>(null)}
Scaffold(
bottomBar = {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
val scope = rememberCoroutineScope()
items.forEach { screen ->
fun navigate() {
navController.navigate(screen.route) {
val navigationRoutes = items
.map(Screen::route)
val firstBottomBarDestination = navController.backQueue
.firstOrNull { navigationRoutes.contains(it.destination.route) }
?.destination
// remove all navigation items from the stack
// so only the currently selected screen remains in the stack
if (firstBottomBarDestination != null) {
popUpTo(firstBottomBarDestination.id) {
inclusive = true
saveState = true
}
}
// Avoid multiple copies of the same destination when
// reselecting the same item
launchSingleTop = true
// Restore state when reselecting a previously selected item
restoreState = true
}
}
BottomNavigationItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
label = { Text(stringResource(screen.resourceId)) },
selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
onClick = {
// if we're already waiting for an other screen to start appearing
// we need to cancel that job
waitEndAnimationJob?.cancel()
if (navController.visibleEntries.value.count() > 1) {
// if navController.visibleEntries has more than one item
// we need to wait animation to finish before starting next navigation
waitEndAnimationJob = scope.launch {
navController.visibleEntries
.collect { visibleEntries ->
if (visibleEntries.count() == 1) {
navigate()
waitEndAnimationJob = null
cancel()
}
}
}
} else {
// otherwise we can navigate instantly
navigate()
}
}
)
}
}
}
) { innerPadding ->
// ...
}

Found the root cause of this. I was using these dependencies and they don't seem to go together.
androidx.hilt:hilt-navigation-compose:1.0.0-alpha03
androidx.navigation:navigation-compose:2.4.0-alpha10"
I removed the navigation:navigation-compose dependency and it seemed to work fine now.

How to handle backstack between fragments and viewpagers?

I am using a ViewPager having 2 pages. First page of that ViewPager is MainFragment. MainFragment has ViewPager as bottomNavigationView. Each page has a FragmentContainerView and By default they contains HomeFragment, CommunityFragment and NotificationFragment respectively.
This is the Source Code and this is the APK of the project. So you can test it and improve it easily.
Now if i am in HomeFragment and I click on a profile button so It transact to ProfileFragment and from there setting and so on. And on clicking on back button it get back perfectly one-by-one. But it does not happens same with other FragmentContainerView. Even they get back directly to the parent fragment. Overall i am unable to handle the backstack between different ViewPagers and fragments.
To avoid the confusion of FragmentContainers i transact it like this
val containerId = (view?.parent as ViewGroup).id
activity?.supportFragmentManager?.beginTransaction()?.add(containerId, profileFragment)?.addToBackStack(null)?.commit()
Now the handling of BackPressed() in MainActivity is here
if (view_pager_main_activity?.currentItem == 0)
{
if (view_pager_main_fragment?.currentItem == 0)
{
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view_home)
val appbarHome = findViewById<AppBarLayout>(R.id.appbar_home)
val layoutManager = recyclerView?.layoutManager as LinearLayoutManager
when {
layoutManager.findFirstCompletelyVisibleItemPosition() == 0 -> {
super.onBackPressed()
}
supportFragmentManager.backStackEntryCount != 0 -> {
supportFragmentManager.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE)
}
else -> {
layoutManager.scrollToPositionWithOffset(0, 0)
appbarHome.setExpanded(true)
//recyclerView.smoothScrollToPosition(0)
}
}
}
else
{
// Otherwise, select the previous step.
view_pager_main_fragment?.setCurrentItem(view_pager_main_fragment.currentItem - 1, false)
}
}
else
{
// Otherwise, select the previous step.
view_pager_main_activity?.currentItem = view_pager_main_activity.currentItem - 1
}

I checked your code and the problem was the usage of
supportFragmentManager.popBackStack(null,FragmentManager.POP_BACK_STACK_INCLUSIVE)
If you read the description of the flag POP_BACK_STACK_INCLUSIVE it says:
If set, and the name or ID of a back stack entry has been supplied,
then all matching entries will be consumed until one that doesn't
match is found or the bottom of the stack is reached. Otherwise, all
entries up to but not including that entry will be removed.
So it was removing the multiple entries at once.
The reason it worked for Home screen was that it never reached that case. It always went in the first case of:
layoutManager.findFirstCompletelyVisibleItemPosition() == 0 -> {
super.onBackPressed()
}
And that's what you exactly need for your case just call super.onBackPressed() when you want to pop only one fragment at once. So your final code becomes like this:
In your MainActivity's onBackPressed()
override fun onBackPressed() {
if (view_pager_main_activity?.currentItem == 0) {
if (view_pager_main_fragment?.currentItem == 0) {
val recyclerView = findViewById<RecyclerView>(R.id.listRecyclerView)
val appbarHome = findViewById<AppBarLayout>(R.id.appbar_home)
val layoutManager = recyclerView?.layoutManager as LinearLayoutManager
when {
layoutManager.findFirstCompletelyVisibleItemPosition() == 0 -> {
super.onBackPressed()
}
//This is never reached. It can be removed
supportFragmentManager.backStackEntryCount != 0 -> {
supportFragmentManager.popBackStack(
null,
FragmentManager.POP_BACK_STACK_INCLUSIVE
)
}
else -> {
layoutManager.scrollToPositionWithOffset(0, 0)
appbarHome.setExpanded(true)
//recyclerView.smoothScrollToPosition(0)
}
}
} else if (supportFragmentManager.backStackEntryCount != 0) {
super.onBackPressed()
} else {
// Otherwise, select the previous step.
view_pager_main_fragment?.setCurrentItem(
view_pager_main_fragment.currentItem - 1,
false
)
}
} else if (supportFragmentManager.backStackEntryCount != 0) {
super.onBackPressed()
} else {
// Otherwise, select the previous step.
view_pager_main_activity?.currentItem = view_pager_main_activity.currentItem - 1
}
}
Edit 1: From the comments
I want to clear the backstack when bottom nav selection changes.
If you want to clear the selection when you change the bottom navigation selection changes then you've to set a listener and clear the back stack in your MainFragment as following:
view?.bottomNavView?.setOnNavigationItemSelectedListener { item ->
//check if item is being re-selected then just return and don't do anything
if (bottomNavView.selectedItemId == item.itemId){
return#setOnNavigationItemSelectedListener false
}
//if the bottom nav item selection changes then clear the back stack of previous tab
parentFragmentManager.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE)
when (item.itemId) {
R.id.homeFragment -> viewPager2.setCurrentItem(0, false)
R.id.searchFragment -> viewPager2.setCurrentItem(1, false)
R.id.notificationsFragment -> viewPager2.setCurrentItem(2, false)
}
true
}
And the rest can remain same. Try this out and do let me know.

Android/Kotlin - Select current fragment

On my action, I use the onBackPressed() method. When I compare the fragment that triggered the event, the id is never the same and always falls into the else-statement. What's wrong?
override fun onBackPressed() {
val navHost = this.supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val pressed = navHost?.childFragmentManager.fragments?.get(0) as IOnBackPressed
var currentFragment = navHost?.childFragmentManager.fragments?.get(0)
pressed?.onBackPressed()?.takeIf { it }?.let {
when (currentFragment.id) {
R.id.myfragmet -> {
// implementation
}
else -> {
super.onBackPressed()
}
}
}
}
I want to know from what fragment I returning when I press the back button, so that I can do the necessary action. Let me simplify the code:
override fun onBackPressed() {
// get the nav host in the action
val navHost = this.supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
// get the current fragment in the nav host
var currentFragment = navHost?.childFragmentManager.fragments?.get(0)
// Verify the fragment to do a action
when (currentFragment.id) {
R.id.myfragmet -> {
// implementation
}
else -> {
super.onBackPressed()
}
}
}
But the currentFragment.Id is never equals R.id.myfragemnt

How to prevent recreation of Fragments while navigating back and forth?

I have set of Fragments navigates inside activity. While I called findFragmentByTag() the fragments onCreateView() and onViewCreated() are called again and the data is reset to normal. how to prevent the recreation of fragment?

You can have look on the code of the advanced navigation in android samples
fun BottomNavigationView.setupWithNavController(
navGraphIds: List<Int>,
fragmentManager: FragmentManager,
containerId: Int,
intent: Intent): LiveData<NavController> {
// Map of tags
val graphIdToTagMap = SparseArray<String>()
// Result. Mutable live data with the selected controlled
val selectedNavController = MutableLiveData<NavController>()
var firstFragmentGraphId = 0
// First create a NavHostFragment for each NavGraph ID
navGraphIds.forEachIndexed { index, navGraphId ->
val fragmentTag = getFragmentTag(index)
// Find or create the Navigation host fragment
val navHostFragment = obtainNavHostFragment(
fragmentManager,
fragmentTag,
navGraphId,
containerId
)
// Obtain its id
val graphId = navHostFragment.navController.graph.id
if (index == 0) {
firstFragmentGraphId = graphId
}
// Save to the map
graphIdToTagMap[graphId] = fragmentTag
// Attach or detach nav host fragment depending on whether it's the selected item.
if (this.selectedItemId == graphId) {
// Update livedata with the selected graph
selectedNavController.value = navHostFragment.navController
attachNavHostFragment(fragmentManager, navHostFragment, index == 0)
} else {
detachNavHostFragment(fragmentManager, navHostFragment)
}
}
// Now connect selecting an item with swapping Fragments
var selectedItemTag = graphIdToTagMap[this.selectedItemId]
val firstFragmentTag = graphIdToTagMap[firstFragmentGraphId]
var isOnFirstFragment = selectedItemTag == firstFragmentTag
// When a navigation item is selected
setOnNavigationItemSelectedListener { item ->
// Don't do anything if the state is state has already been saved.
if (fragmentManager.isStateSaved) {
false
} else {
val newlySelectedItemTag = graphIdToTagMap[item.itemId]
if (selectedItemTag != newlySelectedItemTag) {
// Pop everything above the first fragment (the "fixed start destination")
fragmentManager.popBackStack(firstFragmentTag,
FragmentManager.POP_BACK_STACK_INCLUSIVE)
val selectedFragment = fragmentManager.findFragmentByTag(newlySelectedItemTag)
as NavHostFragment
// Exclude the first fragment tag because it's always in the back stack.
if (firstFragmentTag != newlySelectedItemTag) {
// Commit a transaction that cleans the back stack and adds the first fragment
// to it, creating the fixed started destination.
fragmentManager.beginTransaction()
.attach(selectedFragment)
.setPrimaryNavigationFragment(selectedFragment)
.apply {
// Detach all other Fragments
graphIdToTagMap.forEach { _, fragmentTagIter ->
if (fragmentTagIter != newlySelectedItemTag) {
detach(fragmentManager.findFragmentByTag(firstFragmentTag)!!)
}
}
}
.addToBackStack(firstFragmentTag)
.setCustomAnimations(
R.anim.nav_default_enter_anim,
R.anim.nav_default_exit_anim,
R.anim.nav_default_pop_enter_anim,
R.anim.nav_default_pop_exit_anim)
.setReorderingAllowed(true)
.commit()
}
selectedItemTag = newlySelectedItemTag
isOnFirstFragment = selectedItemTag == firstFragmentTag
selectedNavController.value = selectedFragment.navController
true
} else {
false
}
}
}
// Optional: on item reselected, pop back stack to the destination of the graph
setupItemReselected(graphIdToTagMap, fragmentManager)
// Handle deep link
setupDeepLinks(navGraphIds, fragmentManager, containerId, intent)
// Finally, ensure that we update our BottomNavigationView when the back stack changes
fragmentManager.addOnBackStackChangedListener {
if (!isOnFirstFragment && !fragmentManager.isOnBackStack(firstFragmentTag)) {
this.selectedItemId = firstFragmentGraphId
}
// Reset the graph if the currentDestination is not valid (happens when the back
// stack is popped after using the back button).
selectedNavController.value?.let { controller ->
if (controller.currentDestination == null) {
controller.navigate(controller.graph.id)
}
}
}
return selectedNavController
}
this example code you can find the full code here
https://github.com/android/architecture-components-samples/tree/master/NavigationAdvancedSample

Prevent navigating to the same fragment

I'm using Android navigation jetpack library with BottomNavigationView. I have implemented the NavHost, the NavGraph and my fragments. Everything is working as intented when I use actions to navigate.
I use the following code to setup everything:
val navController = Navigation.findNavController(this, R.id.nav_host)
bottom_navigation.setupWithNavController(navController)
The problem is that if I click a tab 2 times the fragment is recreated twice. Is there any way to intercept navigation? I don't want to navigate to the same fragment that's being shown.

As per this issue,
Feel free to set a OnNavigationItemReselectedListener, which takes precedence over the OnNavigationItemSelectedListener set by NavigationUI.
val navController = Navigation.findNavController(this, R.id.nav_host)
bottom_navigation.setupWithNavController(navController)
bottom_navigation.setOnNavigationItemReselectedListener {
// Do nothing to ignore the reselection
}

inside setOnItemSelectedListener use :
if( item.getItemId() == navController.getCurrentDestination().getId()){ return true; }
because OnNavigationItemSelectedListener is deprecated now.

I write this extension. It will check current fragment with destinations and if both are same, it will only close drawer. But there is a some animation problem while closing drawer.
fun NavigationView.setupWithUniqueFragment(navController: NavController) {
this.setNavigationItemSelectedListener(object : NavigationView.OnNavigationItemSelectedListener {
override fun onNavigationItemSelected(item: MenuItem): Boolean {
val parent = this#setupWithUniqueFragment.parent
if (item.itemId == navController.currentDestination?.id) {
if (parent is DrawerLayout) {
parent.closeDrawer(this#setupWithUniqueFragment, true)
}
return true
}
val handled = NavigationUI.onNavDestinationSelected(item, navController)
if (handled) {
if (parent is DrawerLayout) {
parent.closeDrawer(this#setupWithUniqueFragment, true)
}
}
return handled
}
})
val weakReference = WeakReference<NavigationView>(this#setupWithUniqueFragment)
navController.addOnDestinationChangedListener(
object : NavController.OnDestinationChangedListener {
override fun onDestinationChanged(
controller: NavController,
destination: NavDestination, arguments: Bundle?
) {
val view = weakReference.get()
if (view == null) {
navController.removeOnDestinationChangedListener(this)
return
}
val menu = view.menu
var h = 0
val size = menu.size()
while (h < size) {
val item = menu.getItem(h)
item.isChecked = matchDestination(destination, item.itemId)
h++
}
}
})
}
internal fun matchDestination(
destination: NavDestination,
#IdRes destId: Int
): Boolean {
var currentDestination: NavDestination? = destination
while (currentDestination!!.id != destId && currentDestination.parent != null) {
currentDestination = currentDestination.parent
}
return currentDestination.id == destId
}

I had this same problem where I am using an About page (using the really good AboutLibraries), and it would stack up duplicate pages. I ended up doing this in my OnOptionsItemSelected method
case R.id.action_about:
NavController navController = Navigation.findNavController( this, R.id.nav_host_fragment );
if ( navController.getCurrentDestination().getId() != R.id.nav_about )
{
navController.navigate( R.id.nav_about );
}
And now it only shows a single fragment and won't stack the same one ontop. It's a shame this behaviour couldn't be defined in the XML and I needed to do this in code.