Develop Reference

How to save state of Bottom Navigation Fragment - Android Navigation Component With a Single Nav Graph

How do I save the state of each bottom navigation fragment while using Android Navigation Component JetPack.
I know there is a way to do it using an Navigation Extension provided by the Android Team - Navigation Extension. - While it works, it requires you to create multiple nav_graph for each fragment and also does not have the back stack I want. Also, switching between fragment seems slow using their approach.
How do I do save the state using a single nav_graph and maintain each back stack.
I am following this tutorial and its working but not saving the state of each fragment. Each instance of the fragment is created on Click of the bottom nav item. - Bottom Nav Tutorial Like Instagram And Youtube
activity_home.xml
<fragment //I get a warning here, when I change to FragmentContainerView, app crashes//
android:id="#+id/nav_host_fragment_2"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph_2" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemTextColor="#color/white"
app:itemIconSize = "30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_navigation"/>
menu/bottom_navigation.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/feedRandomFragment"
android:icon="#drawable/home_bottom_nav_selector"
android:title="#string/home"
android:menuCategory="secondary"
/>
<item
android:id="#+id/exploreAndSearchFragment"
android:icon="#drawable/explore_bottom_nav_selector"
android:title="#string/global_explore"
android:menuCategory="secondary"
/>
<item
android:id="#+id/uploadChooseFragment"
android:icon="#drawable/ic_upload"
android:title="#string/upload"
android:menuCategory="secondary"
/>
<item
android:id="#+id/allChallengesFragment"
android:icon="#drawable/challenges_bottom_nav_selector"
android:title="#string/challenges"
android:menuCategory="secondary"
/>
<item
android:id="#+id/profileCurrentUserFragment"
android:icon="#drawable/profile_bottom_nav_selector"
android:title="#string/profile"
android:menuCategory="secondary"
/>
HomeActivity.kt
if(savedInstanceState==null){
setUpBottomNavigationBarBase()
}
private fun setUpBottomNavigationBarBase(){
binding.bottomNavigation.setupWithNavController(Navigation.findNavController(this,
R.id.nav_host_fragment_2))
binding.bottomNavigation.setOnNavigationItemSelectedListener {item ->
onNavDestinationSelected(item, Navigation.findNavController(this, R.id.nav_host_fragment_2))
}
binding.bottomNavigation.itemIconTintList = null
binding.bottomNavigation.setOnNavigationItemReselectedListener {
//do something
}
}
According to the Tutorial, to Maintain backstack, we have to extend all bottom nav fragments from a util class BaseBottomTabFragment which I did and works well.
BaseBottomFragment
open class BaseBottomTabFragment : Fragment() {
var isNavigated = false
fun navigateWithAction(action: NavDirections) {
isNavigated = true
findNavController().navigate(action)
}
fun navigate(resId: Int) {
isNavigated = true
findNavController().navigate(resId)
}
override fun onDestroyView() {
super.onDestroyView()
if (!isNavigated)
requireActivity().onBackPressedDispatcher.addCallback(this) {
val navController = findNavController()
if (navController.currentBackStackEntry?.destination?.id != null) {
findNavController().popBackStackAllInstances(
navController.currentBackStackEntry?.destination?.id!!,
true
)
} else
navController.popBackStack()
}
}
private fun NavController.popBackStackAllInstances(destination: Int, inclusive: Boolean): Boolean {
var popped: Boolean
while (true) {
popped = popBackStack(destination, inclusive)
if (!popped) {
break
}
}
return popped
}
}
So, All my bottom tab fragments extends from that util class - BaseBottomTabFragment like this :
class ExploreAndSearchFragment : BaseBottomTabFragment()
Also, accoriding to the tutorial, to maintain the state of fragment and avoid recreation, each fragment has to have a unique ID which I also did - Sadly, this does not stop the fragment from recreating onClick.
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.main.bottomnav.home.view.FeedRandomFragment"
android:fillViewport="true"
android:background="#color/white"
android:id="#+id/homeId">
I set a unique id to All fragment, but it didnt work. Please Help me!

As I had a similar problem, I copied the Navigation Advanced Sample from their GitHub page and started troubleshooting.
My goal was to use multiple back stacks while having an Instagram-like bottom navigation bar. So I wanted to combine MAD Skills' tutorial Navigation: Multiple back stacks with
Furkan Aşkın's Instagram-like back stack guide.
As I implemented both components, the project compiled perfectly but multiple back stacks didn't seem to work as the states of the bottom tabs weren't saved. I double-checked the version to be 2.4.0-alpha01 or newer.
What ended up being the problem was secondary menuCategory defined in menu items:
android:menuCategory="secondary"
This was probably overwriting the multiple back stacks expected behaviour and upon deleting the lines, multiple back stacks work perfectly. Also, redundant back stacks are removed while navigating in different bottom navigation top level fragments.

by navGraphViewModels creates java.lang.IllegalArgumentException: No destination with ID <destination id> is on the NavController's back stack

When a configuration change happens and my Activity and Fragment are recreated because of it, my nav Graph scoped ViewModel is unavailable while the Fragments have already been created again.
It seems like the Fragment gets recreated, before the navGraph does.
I am using this code to initialize my navGraph scoped ViewModel from my Fragment:
private val myViewModel: MyViewModel by navGraphViewModels(R.id.nav_graph_id)
If I try to use myViewModel in the Fragments onViewCreated function, I get a IllegalArgumentException after a Configuration change. The Exception:
java.lang.IllegalArgumentException: No destination with ID <destination id> is on the NavController's back stack
How do I handle this?
I have already checked that my ID isn't used anywhere else.
Edit1:
Here is my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/main_nav_host"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:navGraph="#navigation/main_nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
And here is my main_nav_graph.xml:
<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/main_nav_graph"
app:startDestination="#id/main_nav_graph_1">
<navigation
android:id="#+id/main_nav_graph_1"
android:label="#string/nav_graph_1_label"
app:startDestination="#id/nav_graph_1_start_fragment">
<!-- nav graph stuff -->
</navigation>
<navigation
android:id="#+id/main_nav_graph_2"
android:label="#string/nav_graph_2_label"
app:startDestination="#id/nav_graph_2_start_fragment">
<fragment
android:id="#+id/nav_graph_2_start_fragment"
android:label="#string/nav_graph_2_start_fragment_label"
android:name="my.package.ui.NavGraph2StartFragment"
tools:layout="#layout/fragment_nav_graph_2_start">
</fragment>
<!-- In here is where I get the problem -->
</navigation>
</navigation>

My Problem was the following:
After a Configuration change the NavGraph returned to its start destination, but the Fragment that was last active gets loaded anyway. This meant that the Fragment that was actually started and the current destination of the navGraph were out of sync.
When my Fragment then tried to load the navGraph scoped ViewModel, it failed because the navGraph thought it was on a different Fragment then it actually was.
To fix my problem I had to save and restore the state of the navController using the activities savedInstanceState Bundle. (source: https://stackoverflow.com/a/59987336)
override fun onSaveInstanceState(savedInstanceState: Bundle) {
super.onSaveInstanceState(savedInstanceState)
savedInstanceState.putBundle("nav_state", fragment.findNavController().saveState())
}
// restore in RestoreInstanceState
override fun onRestoreInstanceState(savedInstanceState: Bundle) {
super.onRestoreInstanceState(savedInstanceState)
fragment.findNavController().restoreState(savedInstanceState.getBundle("nav_state"))
}
// or restore in onCreate
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
if (savedInstanceState?.containsKey("nav_state") == true) {
fragment.findNavController().restoreState(savedInstanceState.getBundle("nav_state"))
}
}

For anyone else coming here, I experienced this issue when a dialog was currently displayed and I issued a navController.navigate() call to a Fragment which uses by navGraphViewModels() before the dialog was dismissed.
It's as if the Navigation library couldn't understand that there is a destination with that ID available when a dialog is being displayed.
And for more clarity, this dialog is displayed using the <dialog> attribute in my nav graph XML.
My fix (for now) is to ensure the dialog is dismissed before making a further call to navigate elsewhere by way of view.postDelayed({ navController.navigate(elsewhere)}, 300)
This isn't the first time I've experienced issues with the NavController trying to navigate when a dialog is displayed.

Solved Easy by change this :
private val myViewModel: MyViewModel by hiltNavGraphViewModels(R.id.nav_graph_id)
To:
private val viewModel: AuthViewModel by activityViewModels{ defaultViewModelProviderFactory }

Android Studio change default bottom nav behaviour

I've used the default bottom navigation template in Android Studio. This has been working fine so far. However, I'd like to change one of the buttons to a button which triggers a camera intent. I'm not sure how to do this since I assume the default implementation uses built-in functions which I can't change.
I believe setupWithNavController is responsible for navigating to the matching fragment. Is there any way to change this, so that I add a button that launches the camera?
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val navView: BottomNavigationView = findViewById(R.id.nav_view)
val navController = findNavController(R.id.nav_host_fragment)
navView.setupWithNavController(navController)
}
}

Remove setupWithNavController and create your own menu.xml file. Then you can use your menu with adding like this:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/main" />
After that, you can implement setOnNavigationItemSelectedListener on your NavigationBar inside Kotlin class.

Accessing graph-scoped ViewModel of child NavHostFragment using by navGraphViewModels

I am using the Navigation Component of Android Jetpack (2.2.0-alpha01).
I wish to use a child NavHostFragment nested inside my main NavHostFragment, equipped with its own child nav graph. Please view the following image for context:
The child nav host is defined like this inside the fragment that is at the front of the MainNavHost's stack:
<fragment
android:id="#+id/childNavHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="false"
app:navGraph="#navigation/child_graph" />
Inside the fragment that is at the front of the CHILD Nav Host Fragment, I am trying to get a ViewModel scoped to the R.navigation.child_graph by using the following code:
private val childGraphScopedViewModel: ChildGraphScopedViewModel by navGraphViewModels(R.navigation.child_graph) {
viewModelFactory
}
When accessing the childGraphScopedViewModel, I am getting a crash with the error message:
java.lang.IllegalArgumentException: No NavGraph with ID 2131689472 is on the NavController's back stack.
I believe the lazy init call by navGraphViewModel() is looking for the navgraph inside the mainGraph.
How can I access a child navHostFragment scoped ViewModel? Thank you for your time.

This works for me without defining aby custom ViewModelProvider (2.2.0):
private val viewModel: ChildGraphScopedViewModel by navGraphViewModels(R.id. child_graph)
An Easy mistake to make is to use R.navigation.child_graph (bad) instead of R.id.child_graph (good)

You can do that by providing the viewModelStore of child NavController
override fun onViewCreated(
view: View,
savedInstanceState: Bundle?
) {
super.onViewCreated(view, savedInstanceState)
val childHostFragment = childFragmentManager
.findFragmentById(R.id.childNavHostFragment) as NavHostFragment
val childNavController = childHostFragment.navController
val childViewModel: ChildGraphScopedViewModel = ViewModelProvider(
childNavController.getViewModelStoreOwner(R.navigation.child_graph)
).get(ChildGraphScopedViewModel::class.java)
}
I wrote a Kotlin Extension for making it easier
inline fun <reified T: ViewModel> NavController.viewModel(#NavigationRes navGraphId: Int): T {
val storeOwner = getViewModelStoreOwner(navGraphId)
return ViewModelProvider(storeOwner)[T::class.java]
}
Usage
val viewModel = findNavController().viewModel(R.navigation.nav)

For some reason creating the nav graph and using include to nest it inside the main nav graph was not working for me. Probably it is a bug.
You can select all the fragments that need to be grouped together inside the nav graph and right-click->move to nested graph->new graph
now this will move the selected fragments to a nested graph inside the main nav graph like this:
<navigation app:startDestination="#id/homeFragment" ...>
<fragment android:id="#+id/homeFragment" .../>
<fragment android:id="#+id/productListFragment" .../>
<fragment android:id="#+id/productFragment" .../>
<fragment android:id="#+id/bargainFragment" .../>
<navigation
android:id="#+id/checkout_graph"
app:startDestination="#id/cartFragment">
<fragment android:id="#+id/orderSummaryFragment".../>
<fragment android:id="#+id/addressFragment" .../>
<fragment android:id="#+id/paymentFragment" .../>
<fragment android:id="#+id/cartFragment" .../>
</navigation>
</navigation>
Now, inside the fragments when you initialize the ViewModel do this
val viewModel: CheckoutViewModel by navGraphViewModels(R.id.checkout_graph)
If you need to pass the viewmodel factory(may be for injecting the viewmodel) you can do it like this:
val viewModel: CheckoutViewModel by navGraphViewModels(R.id.checkout_graph) { viewModelFactory }

Navigation Host becomes null while navigating (Android Navigation Component)

I am creating a game where the user goes through a series of 5 screens. At the last screen, the user has the choice to end the game, at which point they are taken back to the starting screen. My problems come in when a user ends the game and then starts again. While navigating through the app, the navigation host fragment cannot be found.
The first time through the app, it navigates at usual, but the second time, the navigation host cannot be found.
I have tried using different views to find the navigation host, and while debugging, I saw that for the fragment where it can not be found, the parent is equal to null.
This is where I navigate, in the fragments onViewCreated()
viewModel.getGameUpdates().observe(activity!!, Observer { updatedGame ->
if(updatedGame.playerList.size == 0){
Log.d("END","END")
viewModel.endGame()
}
adapter?.players = updatedGame.playerList
if(updatedGame.started){
Navigation.findNavController(view).navigate(R.id.action_waitingFragment_to_gameFragment)
}
})
and this is the moment where the user clicks to navigate back to the first screen:
btn_end_game.setOnClickListener {
viewModel.endGame()
timer.cancel()
Navigation.findNavController(view).navigate(R.id.action_gameFragment_to_startFragment)
}
The layout for my MainActivity that holds the navigation host fragment is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph" />
</FrameLayout>
I do realize that I am just adding on top of the back stack when I would rather pop back to the first fragment. I am just lost as to how the fragment is null.
The following is the nav_graph.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_graph" app:startDestination="#id/startFragment">
<fragment android:id="#+id/startFragment" android:name="com.dangerfield.spyfall.start.StartFragment"
android:label="StartFragment">
<action android:id="#+id/action_startFragment_to_joinGameFragment" app:destination="#id/joinGameFragment"/>
<action android:id="#+id/action_startFragment_to_newGameFragment" app:destination="#id/newGameFragment"/>
</fragment>
<fragment android:id="#+id/newGameFragment" android:name="com.dangerfield.spyfall.newGame.NewGameFragment"
android:label="NewGameFragment">
<action android:id="#+id/action_newGameFragment_to_waitingFragment" app:destination="#id/waitingFragment"/>
</fragment>
<fragment android:id="#+id/joinGameFragment" android:name="com.dangerfield.spyfall.joinGame.JoinGameFragment"
android:label="JoinGameFragment">
<action android:id="#+id/action_joinGameFragment_to_waitingFragment" app:destination="#id/waitingFragment"/>
</fragment>
<fragment android:id="#+id/waitingFragment" android:name="com.dangerfield.spyfall.waiting.WaitingFragment"
android:label="WaitingFragment">
<action android:id="#+id/action_waitingFragment_to_gameFragment" app:destination="#id/gameFragment"/>
<action android:id="#+id/action_waitingFragment_to_startFragment" app:destination="#id/startFragment"/>
</fragment>
<fragment android:id="#+id/gameFragment" android:name="com.dangerfield.spyfall.game.GameFragment"
android:label="GameFragment">
<action android:id="#+id/action_gameFragment_to_startFragment" app:destination="#id/startFragment"/>
</fragment>
</navigation>
This is the message given after crash:
java.lang.IllegalStateException: View android.widget.ScrollView{637e4ce VFED.V... ......ID 0,0-1440,2308} does not have a NavController set

LiveData remembers the current data and will automatically redeliver it when the observer becomes started again, making it inappropriate for events that trigger navigation operations: your operation to navigate() is going to be triggered every time your Fragment is started, making it impossible to actually pop back to that Fragment.
Note that Fragments are not destroyed while on the back stack. If you're changing the underlying data that your Fragment relies on while that Fragment is on the back stack, you should use the viewLifecycleOwner instead of this (representing the Fragment) for your LifecycleOwner passed to observe() when observing in onViewCreated(). This ensures that you will no longer get observer callbacks once your view is destroyed (i.e., you go onto the back stack).
activity!! is absolutely always wrong to use as the LifecycleOwner from within a Fragment, since that means the observer will not be cleaned up even if the Fragment is completely destroyed (it'll only be cleaned up when the activity is destroyed).
As per the conditional navigation documentation, the recommended approach is to ensure that your LiveData is tracking state rather than events. That way, after you call navigate(), you can update the state to ensure that when the callback happens a second time, you don't call navigate() a second time. This approach is recommended over the SingleLiveEvent approach.

Even I Was facing the same issue when I used to navigate from current fragment to the next fragment, and on the back press of hardware navHost would be null, The mistake I was doing is that I had made the variable navController global where I used to instantiate like this in onCreate()
Before:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
navController = this.findNavController(R.id.myNavHostFragment)
NavigationUI.setupActionBarWithNavController(this,navController)
}
override fun onSupportNavigateUp(): Boolean {
return navController.navigateUp()
}
}
After:
now it's working after this change
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
navController = this.findNavController(R.id.myNavHostFragment)
NavigationUI.setupActionBarWithNavController(this,navController)
}
override fun onSupportNavigateUp(): Boolean {
val navController = this.findNavController(R.id.myNavHostFragment)
return navController.navigateUp()
}
}
Dont why navController would be null if made it global??