Develop Reference

Problem using LaunchedEffect scope in jetpack compose

I have two LaunchedEffect scopes like this :
LaunchedEffect(key1 = mainViewModel.myvlue.value){
mainViewModel.updatemyvalue(1f)
}
LaunchedEffect(key1 = mainViewModel.myvlue.value){
mainViewModel.updatemyvalue(0f)
}
Both are implemented inside this method :
#Composable
fun TabContent( pagerState: PagerState,count:Int,mainViewModel: MainViewModel) {
HorizontalPager(state = pagerState, count = count) { index ->
when (index) {
0 -> {
LaunchedEffect(key1 = mainViewModel.myvlue.value){
mainViewModel.updatemyvalue(1f)
}
SecondScreen(mainViewModel)
}
1 -> {
LaunchedEffect(key1 = mainViewModel.myvalue.value) {
mainViewModel.updatemyvalue(0f)
}
firstScreen(mainViewModel)
}
}
}
}
The problem is that when one of these scopes launches, second one will be automatically called .
I know this is normal that when the key1 value changes scopes will be relaunched . but I
just want them to be called separately when I navigate to their respective page inside HorizontalPager.
As you can see above, they will be called simultaneously when one of the executes.
what should I do ?

You should use the current index below in the way I posted in the attachment
Please test
// Page change callback
LaunchedEffect(pagerState) {
snapshotFlow { pagerState.currentPage }.collect { page ->
when (page) {
0 -> viewModel.updatemyvalue() // First page
1 -> // Second page
else -> // Other pages
}
}
}

Clear state for fragment when using bottom navigation

We have implemented bottom navigation as described here:
https://developer.android.com/guide/navigation/navigation-ui#bottom_navigation
https://medium.com/androiddevelopers/navigation-multiple-back-stacks-6c67ba41952f
We are using navigation version 2.4.1, which supports multiple backstacks out of the box. This saves fragment state so that in navigating from main fragment A -> B -> C -> B using the bottomnav, state of fragment B is saved and restored upon return. This is as intended and much requested behaviour.
However, for one of the fragments in our bottomnav menu, I would like the possibility to NOT save the state. This is due to some confusing behaviour when navigating using talkback. Is there a way in the navigation framework to set a flag to not save state for a single fragment? Or any other way to programmatically clear savedstate without actually doing so "manually" by resetting the UI elements in fragment onDestroy/onResume or similar?

What I did was just use the same androidx.navigation.ui.NavigationUI.setupWithNavController logic but change the saveState and other logic specific to my use case. You could apply this when navigating to one specific fragment.
this.findViewById<BottomNavigationView>(R.id.bottom_navigation).apply {
setOnItemSelectedListener { item ->
val builder = NavOptions.Builder().setLaunchSingleTop(true)
val destinationId = item.itemId
item.isChecked = true
if (
navController.currentDestination!!.parent!!.findNode(item.itemId)
is ActivityNavigator.Destination
) {
builder.setEnterAnim(R.anim.nav_default_enter_anim)
.setExitAnim(R.anim.nav_default_exit_anim)
.setPopEnterAnim(R.anim.nav_default_pop_enter_anim)
.setPopExitAnim(R.anim.nav_default_pop_exit_anim)
} else {
builder.setEnterAnim(R.animator.nav_default_enter_anim)
.setExitAnim(R.animator.nav_default_exit_anim)
.setPopEnterAnim(R.animator.nav_default_pop_enter_anim)
.setPopExitAnim(R.animator.nav_default_pop_exit_anim)
}
if (item.order and Menu.CATEGORY_SECONDARY == 0) {
builder.setPopUpTo(
navController.graph.findStartDestination().id,
inclusive = false,
saveState = false
)
}
val options = builder.build()
return#setOnItemSelectedListener try {
navController.navigate(destinationId, null, options)
// Return true only if the destination we've navigated to matches the MenuItem
(navController.currentDestination?.id ?: false) == destinationId
} catch (e: IllegalArgumentException) {
false
}
}
// Do nothing on reselect
setOnItemReselectedListener {}
val weakReference = WeakReference(this)
navController.addOnDestinationChangedListener(
object : NavController.OnDestinationChangedListener {
override fun onDestinationChanged(
controller: NavController,
destination: NavDestination,
arguments: Bundle?
) {
// Hide BottomNavigationView from top level fragments
if (topLevelDestinations.any { it == destination.id }) {
this#apply.visibility = View.VISIBLE
} else this#apply.visibility = View.GONE
// Highlight item in BottomNavigationView
val view = weakReference.get()
if (view == null) {
navController.removeOnDestinationChangedListener(this)
return
}
view.menu.forEach { item ->
if (destination.id == item.itemId) {
item.isChecked = true
}
}
}
})
}

Can't pop starting destination using navigation and jetpack compose

I am using the latest versions of navigation and compose on Android, and i am getting a bug where i can't pop the starting destination of the navigation.
The problem is, if i have 3 destinations (A,B,C) and go from A-> B -> C, i can't pop A from the backstack , but B is popped when i call popUpTo(B) inclusive = true, causing the back button to go back to A.
My code:
NavHost
setContent {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "route_to_a"
) {
composable("route_to_a") {
LoginScreen(navController)
}
composable("route_to_b") {
RegisterScreen(navController)
}
composable("route_to_c") {
HomeScreen(navController = navController)
}
}
}
Navigations
- A to B
Button(onClick = { navController.navigate("route_to_b")}) {}
- B to C
Button(onClick = {
navController.navigate("route_to_c") {
popUpTo("route_to_b") {
inclusive = true
}
}
}) {}
I want to create a flow where neither A and B are on the backstack after getting on C. But for some reason i can't remove A from the backstack...how can i do it?

Replace,
popUpTo("route_to_b") {
inclusive = true
}
with this,
popUpTo("route_to_a") {
inclusive = true
}
From Docs,
// Pop everything up to and including the "home" destination off
// the back stack before navigating to the "friends" destination
navController.navigate("friends") {
popUpTo("home") { inclusive = true }
}

Jetpack Compose & Navigation: Problems share ViewModel in nested graph

According to this example I implemented shared viewModels in a nested navigation graph.
Setup
Nested Graph:
private fun NavGraphBuilder.accountGraph(navController: NavHostController) {
navigation(
startDestination = "main",
route = "account") {
composable("main") {
val vm = hiltViewModel<AccountViewModel(navController.getBackStackEntry("account"))
//... ui ...
}
composable("login") {
val vm = hiltViewModel<AccountViewModel(navController.getBackStackEntry("account"))
//... ui ...
}
}
}
NavHost:
#Composable
private fun NavHost(navController: NavHostController, modifier: Modifier = Modifier){
NavHost(
navController = navController,
startDestination = MainScreen.Home.route,
modifier = modifier
) {
composable("home") { HomeScreen(hiltViewModel()) }
composable("otherRoute") { OtherScreen(hiltViewModel()) }
accountGraph(navController)
}
}
BottomNavBar:
#Composable
private fun ButtonNav(navController: NavHostController) {
BottomNavigation {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
items.forEach { screen ->
BottomNavigationItem(
icon = { ... },
label = { ... },
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
navController.graph.startDestinationRoute?.let { route ->
popUpTo(route) { saveState = true }
}
// Avoid multiple copies of the same destination when
// re-selecting the same item
launchSingleTop = true
// Restore state when re-selecting a previously selected item
restoreState = true
}
}
)
}
}
}
Problem
With this setup if I naviagte to "account" (the nested graph) and back to any other route I get the error:
java.lang.IllegalArgumentException: No destination with route account is on the NavController's back stack. The current destination is Destination(0x78dd8526) route=otherRoute
Assumptions / Research Results
BottomNavItem
The exception did not occure when I remove the popUpTo(route) onClick. But then I ended up with a large stack.
lifecycle of backStackEntry
Have a look at the following:
//...
composable("main") { backStackEntry ->
val vm = hiltViewModel<AccountViewModel(navController.getBackStackEntry("account"))
//... ui ...
}
//...
I found out when navigating back the composable which will be left will be recomposed but in this case the backStackEntry seams to have another lifecycle.currentState because if I wrap the whole composable like this:
//...
composable("main") { backStackEntry ->
if(backStackEntry.lifecycle.currentState == Lifecycle.State.RESUMED){
val vm = hiltViewModel<AccountViewModel(navController.getBackStackEntry("account"))
//... ui ...
}
}
//...
... the exception did not occure.
The idea with the lifecycle issue came into my mind when I saw that the offical example has similar workarounds in place.
Summary
I actually do not know if I did something wrong or if I miss a conecept here. I can put the lifecycle-check-workaround into place but is this really as intended? Additional to that I did not find any hint in the doc regarding that.
Does anybody know how to fix that in a proper way?
Regards,
Chris

This is how you do it now but make sure you have the latest compose navigation artefacts:
private fun NavGraphBuilder.accountGraph(navController: NavHostController) {
navigation(
startDestination = "main",
route = "account") {
composable("main") {
val parentEntry = remember {
navController.getBackstackEntry("account")
}
val vm = hiltViewModel<AccountViewModel(parentEntry)
//... ui ...
}
composable("login") {
val parentEntry = remember {
navController.getBackstackEntry("account")
}
val vm = hiltViewModel<AccountViewModel(parentEntry)
//... ui ...
}
}
}

There was an issue with the navigation component. It has been fixed for me with v2.4.0-alpha08

Jetpack Compose - Bottom navigation icon is not selected if it has nested navigation

I want to have a bottom navigation bar with two items/screens: Order and Account. Order is the start destination. Order has its own navigation and it has two screens: ItemList and ItemDetail. ItemDetail opens when an item is clicked in ItemList screen.
When I run the app, I can see the ItemList screen but Order item in the bottom navigation bar is not selected. If I click on Account item, I can see Account screen and Account item gets selected in the bottom navigation bar.
I think this is happening because of the recomposition: when Order is selected at the beginning since it is the start destination, its nested graph is called and a new destination (ItemList) is navigated, leading a recomposition, with currentRoute being "itemList" rather than "order".
How can I get Order icon selected in the bottom navigation bar? Is there a recommended what of handling nested graphs with bottom nav?
This is what I have at the moment:
object Destinations {
const val ORDER_ROUTE = "order"
const val ACCOUNT_ROUTE = "account"
const val ITEM_LIST_ROUTE = "itemList"
const val ITEM_DETAIL_ROUTE = "itemDetail"
const val ITEM_DETAIL_ID_KEY = "itemId"
}
class NavigationActions(navController: NavHostController) {
val selectItem: (Long) -> Unit = { itemId: Long ->
navController.navigate("${Destinations.ITEM_DETAIL_ROUTE}/$itemId")
}
val upPress: () -> Unit = {
navController.navigateUp()
}
}
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp()
}
}
}
#Compose
fun MyApp() {
MyAppTheme {
val navController = rememberNavController()
val tabs = listOf(Destinations.ORDER_ROUTE, Destinations.ACCOUNT_ROUTE)
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)
Scaffold(
bottomBar = {
BottomNavigation {
tabs.forEach { tab ->
BottomNavigationItem(
icon = { Icons.Filled.Favorite },
label = { Text(tab) },
selected = currentRoute == tab,
onClick = {
navController.navigate(tab) {
popUpTo = navController.graph.startDestination
launchSingleTop = true
}
},
alwaysShowLabel = true,
selectedContentColor = MaterialTheme.colors.secondary,
unselectedContentColor = LocalContentColor.current
)
}
}
}
) {
NavGraph(navController)
}
}
}
#Composable
fun NavGraph(
navController: NavHostController,
startDestination: String = Destinations.ORDER_ROUTE
) {
val actions = remember(navController) { NavigationActions(navController) }
NavHost(navController = navController, startDestination = startDestination) {
navigation(startDestination = Destinations.ITEM_LIST_ROUTE, route = Destinations.ORDER_ROUTE) {
composable(Destinations.ITEM_LIST_ROUTE) {
ItemList(actions.selectItem)
}
composable(
"${Destinations.ITEM_DETAIL_ROUTE}/{$Destinations.ITEM_DETAIL_ID_KEY}",
arguments = listOf(navArgument(Destinations.ITEM_DETAIL_ID_KEY) {
type = NavType.LongType
})
) {
ItemDetail()
}
}
composable(Destinations.ACCOUNT_ROUTE) {
Account()
}
}
}

I wrote this article with a similar example. It's in Portuguese but if you translate the page to English you'll get the idea... Also, you can find the sources here.
I think the problem is happening because you're using just one NavHost for the entire app. In fact, I guess you need to use one NavHost for each tab, then when the user select a tab, you must change the current NavHost.
oh! my article is based on this post here, which can also help you.