Not sure what is wrong, I have my navController that im passing to CreateScheduledItemScreen to use it from there. But I cant navigate to anyscreen BUT Home screen from CreateScheduledItemScreen, if I do the app crashes.
The screens works and can be navigated to from the bottomBar.
#Composable
fun MotivationApp(
modifier: Modifier = Modifier,
viewModel: MotivationViewModel = MotivationViewModel(),
navController: NavHostController = rememberNavController()
) {
viewModel.fillPhotoArray()
// Get current back stack entry
val backStackEntry by navController.currentBackStackEntryAsState()
// Get the name of the current screen
val currentScreen = MotivateScreenNavHost.valueOf(
backStackEntry?.destination?.route ?: MotivateScreenNavHost.Home.name
)
Scaffold(bottomBar = {
BottomBar(navHostController = navController,
currentScreen = currentScreen,
canNavigateBack = navController.previousBackStackEntry != null,
navigateUp = { navController.navigateUp() })
}, topBar = {
MotivationTopAppBar(navHostController = navController,
currentScreen = currentScreen,
canNavigateBack = navController.previousBackStackEntry != null,
navigateUp = { navController.navigateUp() })
}) { innerPadding ->
NavHost(
navController = navController,
startDestination = MotivateScreenNavHost.Home.name,
modifier = modifier.padding(innerPadding)
) {
composable(route = MotivateScreenNavHost.Home.name) {
viewModel.setDates(homeScreen())
}
composable(route = MotivateScreenNavHost.Setting.name) {
val context = LocalContext.current
SettingsScreen()
}
composable(route = MotivateScreenNavHost.Profile.name) {
val context = LocalContext.current
ProfileScreen()
}
composable(route = MotivateScreenNavHost.AddScheduledItem.name) {
val context = LocalContext.current
CreateScheduledItemScreen(
viewModel.getPhotos(),
viewModel.getDates(),
navController,
viewModel
)
}
composable(route = MotivateScreenNavHost.CreateItemInputScreen.name) {
CreateItemInputScreen()
}
}
}
}
if I would change navController.navigate(MotivateScreenNavHost.CreateItemInputScreen.name) -> navController.navigate(MotivateScreenNavHost.Home.name) the app does not crash.
Any ideas?
#Composable
fun CreateScheduledItemScreen(
photo: ArrayList<Int>,
date: ArrayList<Int>,
navController: NavHostController,
viewModel: MotivationViewModel
) {
val mContext = LocalContext.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 185.dp), contentPadding = PaddingValues(
start = 12.dp, top = 16.dp, end = 12.dp, bottom = 16.dp
), content = {
items(photo.size) { index ->
Card(
backgroundColor = Color.Transparent,
modifier = Modifier
.padding(6.dp)
.fillMaxWidth(),
elevation = 0.dp,
) {
Column(verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.clickable {
val mCategory = when (photo[index]) {
R.drawable.training -> 1
R.drawable.travel -> 2
R.drawable.study -> 3
R.drawable.meetingjpg -> 4
R.drawable.party -> 5
R.drawable.doctor -> 6
R.drawable.dentist -> 7
R.drawable.groceries -> 8
else -> {
9
}
}
viewModel.setCategory(mCategory)
navController.navigate(MotivateScreenNavHost.CreateItemInputScreen.name)
}) {
Image(
painter = painterResource(photo[index]),
contentDescription = "Test",
modifier = Modifier
.size(150.dp)
.clip(CircleShape)
.border(
1.5.dp,
androidx.compose.material3.MaterialTheme.colorScheme.primary,
CircleShape
)
)
Text(
text = when (photo[index]) {
R.drawable.training -> "Training"
R.drawable.travel -> "Travel"
R.drawable.study -> "Study"
R.drawable.meetingjpg -> "Meeting"
R.drawable.party -> "Party"
R.drawable.doctor -> "Doctor"
R.drawable.dentist -> "Dentist"
R.drawable.groceries -> "Groceries"
else -> {
"Other"
}
}
)
Text(text = "${date[0]} ${date[1]} ${date[2]}")
}
}
}
})
}
I have tried a lot. Kinda new to composable and this navigate through composable.
I am expecting that when I click the button the new screen shows.
Error:
2022-11-07 15:44:09.622 24752-24752/com.pocketqueens.chefforhire E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.pocketqueens.chefforhire, PID: 24752
java.lang.IndexOutOfBoundsException: Index: 0, Size: 0
at java.util.ArrayList.get(ArrayList.java:437)
at com.pocketqueens.chefforhire.activity.CreateScheduledItemScreenKt$CreateScheduledItemScreen$1$1$1.invoke(CreateScheduledItemScreen.kt:92)
at com.pocketqueens.chefforhire.activity.CreateScheduledItemScreenKt$CreateScheduledItemScreen$1$1$1.invoke(CreateScheduledItemScreen.kt:45)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.RecomposeScopeImpl.compose(RecomposeScopeImpl.kt:145)
at androidx.compose.runtime.ComposerImpl.recomposeToGroupEnd(Composer.kt:2375)
at androidx.compose.runtime.ComposerImpl.skipToGroupEnd(Composer.kt:2666)
at androidx.compose.material.SurfaceKt.Surface-F-jzlyU(Surface.kt:137)
at androidx.compose.material.CardKt.Card-F-jzlyU(Card.kt:68)
at com.pocketqueens.chefforhire.activity.CreateScheduledItemScreenKt$CreateScheduledItemScreen$1$1.invoke(CreateScheduledItemScreen.kt:39)
at com.pocketqueens.chefforhire.activity.CreateScheduledItemScreenKt$CreateScheduledItemScreen$1$1.invoke(CreateScheduledItemScreen.kt:38)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:135)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.foundation.lazy.grid.LazyGridItemsSnapshot.Item(LazyGridItemProviderImpl.kt:97)
at androidx.compose.foundation.lazy.grid.LazyGridItemProviderImpl.Item(LazyGridItemProviderImpl.kt:119)
at androidx.compose.foundation.lazy.layout.LazyLayoutItemContentFactory$CachedItemContent$createContentLambda$1$1.invoke(LazyLayoutItemContentFactory.kt:119)
at androidx.compose.foundation.lazy.layout.LazyLayoutItemContentFactory$CachedItemContent$createContentLambda$1$1.invoke(LazyLayoutItemContentFactory.kt:118)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:228)
at androidx.compose.runtime.saveable.SaveableStateHolderImpl.SaveableStateProvider(SaveableStateHolder.kt:84)
at androidx.compose.foundation.lazy.layout.LazyLayoutItemContentFactory$CachedItemContent$createContentLambda$1.invoke(LazyLayoutItemContentFactory.kt:118)
at androidx.compose.foundation.lazy.layout.LazyLayoutItemContentFactory$CachedItemContent$createContentLambda$1.invoke(LazyLayoutItemContentFactory.kt:110)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$subcompose$2$1$1.invoke(SubcomposeLayout.kt:771)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$subcompose$2$1$1.invoke(SubcomposeLayout.kt:448)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34)
at androidx.compose.runtime.ActualJvm_jvmKt.invokeComposable(ActualJvm.jvm.kt:78)
at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3248)
at androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:3238)
at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source:1)
at androidx.compose.runtime.ComposerImpl.doCompose(Composer.kt:3238)
at androidx.compose.runtime.ComposerImpl.composeContent$runtime_release(Composer.kt:3173)
2022-11-07 15:44:09.623 24752-24752/com.pocketqueens.chefforhire E/AndroidRuntime: at androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:587)
at androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:950)
at androidx.compose.runtime.ComposerImpl$CompositionContextImpl.composeInitial$runtime_release(Composer.kt:3848)
at androidx.compose.runtime.ComposerImpl$CompositionContextImpl.composeInitial$runtime_release(Composer.kt:3848)
at androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:519)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcomposeInto(SubcomposeLayout.kt:468)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:441)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:432)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState.subcompose(SubcomposeLayout.kt:421)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$Scope.subcompose(SubcomposeLayout.kt:733)
at androidx.compose.foundation.lazy.layout.LazyLayoutMeasureScopeImpl.measure-0kLqBqw(LazyLayoutMeasureScope.kt:118)
at androidx.compose.foundation.lazy.grid.LazyMeasuredItemProvider.getAndMeasure-ednRnyU(LazyMeasuredItemProvider.kt:44)
at androidx.compose.foundation.lazy.grid.LazyMeasuredLineProvider.getAndMeasure-bKFJvoY(LazyMeasuredLineProvider.kt:70)
at androidx.compose.foundation.lazy.grid.LazyGridMeasureKt.measureLazyGrid-zIfe3eg(LazyGridMeasure.kt:141)
at androidx.compose.foundation.lazy.grid.LazyGridKt$rememberLazyGridMeasurePolicy$1$1.invoke-0kLqBqw(LazyGrid.kt:340)
at androidx.compose.foundation.lazy.grid.LazyGridKt$rememberLazyGridMeasurePolicy$1$1.invoke(LazyGrid.kt:190)
at androidx.compose.foundation.lazy.layout.LazyLayoutKt$LazyLayout$2$1.invoke-0kLqBqw(LazyLayout.kt:74)
at androidx.compose.foundation.lazy.layout.LazyLayoutKt$LazyLayout$2$1.invoke(LazyLayout.kt:70)
at androidx.compose.ui.layout.LayoutNodeSubcompositionsState$createMeasurePolicy$1.measure-3p2s80s(SubcomposeLayout.kt:591)
at androidx.compose.ui.node.InnerNodeCoordinator.measure-BRTryo0(InnerNodeCoordinator.kt:103)
at androidx.compose.ui.graphics.SimpleGraphicsLayerModifier.measure-3p2s80s(GraphicsLayerModifier.kt:405)
at androidx.compose.ui.node.BackwardsCompatNode.measure-3p2s80s(BackwardsCompatNode.kt:343)
at androidx.compose.ui.node.LayoutModifierNodeCoordinator.measure-BRTryo0(LayoutModifierNodeCoordinator.kt:155)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasure$2.invoke(LayoutNodeLayoutDelegate.kt:1077)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$performMeasure$2.invoke(LayoutNodeLayoutDelegate.kt:1073)
at androidx.compose.runtime.snapshots.Snapshot$Companion.observe(Snapshot.kt:2139)
at androidx.compose.runtime.snapshots.SnapshotStateObserver$observeReads$1$1.invoke(SnapshotStateObserver.kt:130)
at androidx.compose.runtime.snapshots.SnapshotStateObserver$observeReads$1$1.invoke(SnapshotStateObserver.kt:126)
at androidx.compose.runtime.SnapshotStateKt__DerivedStateKt.observeDerivedStateRecalculations(DerivedState.kt:341)
at androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(Unknown Source:1)
at androidx.compose.runtime.snapshots.SnapshotStateObserver.observeReads(SnapshotStateObserver.kt:126)
at androidx.compose.ui.node.OwnerSnapshotObserver.observeReads$ui_release(OwnerSnapshotObserver.kt:120)
at androidx.compose.ui.node.OwnerSnapshotObserver.observeMeasureSnapshotReads$ui_release(OwnerSnapshotObserver.kt:107)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate.performMeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:1073)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate.access$performMeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:36)
at androidx.compose.ui.node.LayoutNodeLayoutDelegate$MeasurePassDelegate.remeasure-BRTryo0(LayoutNodeLayoutDelegate.kt:341)
at androidx.compose.ui.node.LayoutNode.remeasure-_Sx5XlM$ui_release(LayoutNode.kt:1135)
2022-11-07 15:44:09.623 24752-24752/com.pocketqueens.chefforhire E/AndroidRuntime: at androidx.compose.ui.node.LayoutNode.remeasure-_Sx5XlM$ui_release$default(LayoutNode.kt:1126)
at androidx.compose.ui.node.MeasureAndLayoutDelegate.doRemeasure-sdFAvZA(MeasureAndLayoutDelegate.kt:309)
at androidx.compose.ui.node.MeasureAndLayoutDelegate.remeasureAndRelayoutIfNeeded(MeasureAndLayoutDelegate.kt:434)
at androidx.compose.ui.node.MeasureAndLayoutDelegate.access$remeasureAndRelayoutIfNeeded(MeasureAndLayoutDelegate.kt:39)
at androidx.compose.ui.node.MeasureAndLayoutDelegate.measureAndLayout(MeasureAndLayoutDelegate.kt:330)
at androidx.compose.ui.platform.AndroidComposeView.measureAndLayout(AndroidComposeView.android.kt:774)
at androidx.compose.ui.node.Owner.measureAndLayout$default(Owner.kt:216)
at androidx.compose.ui.platform.AndroidComposeView.dispatchDraw(AndroidComposeView.android.kt:999)
at android.view.View.draw(View.java:20210)
at android.view.View.updateDisplayListIfDirty(View.java:19082)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4317)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4290)
at android.view.View.updateDisplayListIfDirty(View.java:19042)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4317)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4290)
at android.view.View.updateDisplayListIfDirty(View.java:19042)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4317)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4290)
at android.view.View.updateDisplayListIfDirty(View.java:19042)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4317)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4290)
at android.view.View.updateDisplayListIfDirty(View.java:19042)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:686)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:692)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:801)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3311)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3115)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2484)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1460)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7183)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:949)
at android.view.Choreographer.doCallbacks(Choreographer.java:761)
at android.view.Choreographer.doFrame(Choreographer.java:696)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
2022-11-07 15:44:09.630 24752-24752/com.pocketqueens.chefforhire I/Process: Sending signal. PID: 24752 SIG: 9
Related
I've been troubleshooting this issue for couple of days now about navigating with args in jetpack compose. I feel like I'm missing something simple, really simple that I can't figure out somehow.
I tried making sure I'm coding it correctly but to no avail I still get the error.
So the error:
Navigation destination that matches request NavDeepLinkRequest{ uri=android-app://androidx.navigation/second_screen/Item Six } cannot be found in the navigation graph NavGraph(0x0) startDestination={Destination(0x442b361f) route=home_screen}
I feel like I'm done everything correct but still cant get through this error. Or there is something simple that I'm missing.
My NavHost:
interface NavigationDestination{
val route: String
}
#Composable
fun MainNavHost(
){
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = HomeScreenNavigation.route,
){
composable(HomeScreenNavigation.route){
HomeScreen(onItemClick = {nameString->
navController.navigate("${SecondNavigationDestination.route}/${nameString}")
{
launchSingleTop = true
}
})
}
composable(
route = SecondNavigationDestination.routeWithArg,
arguments = listOf(navArgument(SecondNavigationDestination.nameArg)
{type = NavType.StringType})
){
SecondScreen()
}
}
}
My Screens
First Screen:
object HomeScreenNavigation: NavigationDestination{
override val route = "home_screen"
}
#Composable
fun HomeScreen(
modifier: Modifier = Modifier,
onItemClick: (String) -> Unit
){
ItemList(
itemList = LocalData.itemList,
onItemClick = onItemClick
)
}
#Composable
fun ItemList(
itemList: List<ItemModel>,
onItemClick: (String) -> Unit,
modifier: Modifier = Modifier
){
LazyColumn(
verticalArrangement = Arrangement.spacedBy(9.dp)
){
items(
items = itemList,
key = {it.id}
){
Item(
item = it,
onItemClick = onItemClick
)
}
}
}
#Composable
fun Item(
item: ItemModel,
modifier: Modifier = Modifier,
onItemClick: (String) -> Unit
){
Row(
modifier = modifier
.fillMaxWidth()
.padding(9.dp)
.clickable { onItemClick(item.name) },
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.Top
){
Text(
text = item.name
)
}
}
///////////////////////////////////////////////////////
Second Screen:
object SecondNavigationDestination: NavigationDestination{
override val route = "second_screen"
const val nameArg = "nameArg"
val routeWithArg = "${route}/$nameArg"
}
#Composable
fun SecondScreen(
){
val viewModel: MainViewModel = viewModel()
Box(
contentAlignment = Alignment.Center
){
Text(
viewModel.id
)
}
}
/////////////////////////////////////////////////
ViewModel:
class MainViewModel(
savedStateHandle: SavedStateHandle
): ViewModel(){
val id: String = savedStateHandle[SecondNavigationDestination.nameArg] ?: "empty"
}
Change this
val routeWithArg = "${route}/$nameArg"
to this
val routeWithArg = "${route}/{$nameArg}"
For more info: docs
I am trying to apply Jetpack Compose navigation into my application.
My Screens: Login/Register screens and Bottom navbar screens(call, chat, settings).
I already found out that the best way to do this is using nested graphs.
But I keep getting ViewModelStore should be set before setGraph call exception. However, I don't think this is the right exception.
My navigation is already in the latest version. Probably my nested graph logic is not right.
Requirement:
I want to be able to navigate from the Login or Register screen to any BottomBar Screen & reverse
#Composable
fun SetupNavGraph(
navController: NavHostController,
userViewModel: UserViewModel
) {
NavHost(
navController = navController,
startDestination = BOTTOM_BAR_GRAPH_ROUTE,
route = ROOT_GRAPH_ROUTE
) {
loginNavGraph(navController = navController, userViewModel)
bottomBarNavGraph(navController = navController, userViewModel)
}
}
NavGraph.kt
fun NavGraphBuilder.loginNavGraph(
navController: NavHostController,
userViewModel: UserViewModel
) {
navigation(
startDestination = Screen.LoginScreen.route,
route = LOGIN_GRAPH_ROUTE
) {
composable(
route = Screen.LoginScreen.route,
content = {
LoginScreen(
navController = navController,
loginViewModel = userViewModel
)
})
composable(
route = Screen.RegisterScreen.route,
content = {
RegisterScreen(
navController = navController,
loginViewModel = userViewModel
)
})
}
}
LoginNavGraph.kt
fun NavGraphBuilder.bottomBarNavGraph(
navController: NavHostController,
userViewModel: UserViewModel
) {
navigation(
startDestination = Screen.AppScaffold.route,
route = BOTTOM_BAR_GRAPH_ROUTE
) {
composable(
route = Screen.AppScaffold.route,
content = {
AppScaffold(
navController = navController,
userViewModel = userViewModel
)
})
}
}
BottomBarNavGraph.kt
#Composable
fun AppScaffold(
navController: NavHostController,
userViewModel: UserViewModel
) {
val scaffoldState = rememberScaffoldState()
Scaffold(
bottomBar = {
BottomBar(mainNavController = navController)
},
scaffoldState = scaffoldState,
) {
NavHost(
navController = navController,
startDestination = NavigationScreen.EmergencyCallScreen.route
) {
composable(NavigationScreen.EmergencyCallScreen.route) {
EmergencyCallScreen(
navController = navController,
loginViewModel = userViewModel
)
}
composable(NavigationScreen.ChatScreen.route) { ChatScreen() }
composable(NavigationScreen.SettingsScreen.route) {
SettingsScreen(
navController = navController,
loginViewModel = userViewModel
)
}
}
}
}
AppScaffold.kt
#Composable
fun BottomBar(mainNavController: NavHostController) {
val items = listOf(
NavigationScreen.EmergencyCallScreen,
NavigationScreen.ChatScreen,
NavigationScreen.SettingsScreen,
)
BottomNavigation(
elevation = 5.dp,
) {
val navBackStackEntry by mainNavController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.map {
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(id = it.icon),
contentDescription = it.title
)
},
label = {
Text(
text = it.title
)
},
selected = currentRoute == it.route,
selectedContentColor = Color.White,
unselectedContentColor = Color.White.copy(alpha = 0.4f),
onClick = {
mainNavController.navigate(it.route) {
mainNavController.graph.startDestinationRoute?.let { route ->
popUpTo(route) {
saveState = true
}
}
restoreState = true
launchSingleTop = true
}
},
)
}
}
}
BottomBar.kt
const val ROOT_GRAPH_ROUTE = "root"
const val LOGIN_GRAPH_ROUTE = "login_register"
const val BOTTOM_BAR_GRAPH_ROUTE = "bottom_bar"
sealed class Screen(val route: String) {
object LoginScreen : Screen("login_screen")
object RegisterScreen : Screen("register_screen")
object AppScaffold : Screen("app_scaffold")
}
Screen.kt
sealed class NavigationScreen(val route: String, val title: String, #DrawableRes val icon: Int) {
object EmergencyCallScreen : NavigationScreen(
route = "emergency_call_screen",
title = "Emergency Call",
icon = R.drawable.ic_phone
)
object ChatScreen :
NavigationScreen(
route = "chat_screen",
title = "Chat",
icon = R.drawable.ic_chat)
object SettingsScreen : NavigationScreen(
route = "settings_screen",
title = "Settings",
icon = R.drawable.ic_settings
)
}
NavigationScreen.kt
After struggling some time with this issue, I made my way out by using two separated NavHost. It might not be the right way to do it but it works at the moment. You can find the example source code here:
https://github.com/talhaoz/JetPackCompose-LoginAndBottomBar
Hope they make the navigation easier on upcoming releases.
Nesting of NavHost is not allowed. It results in ViewModelStore should be set before setGraph call Exception. Generally, the bottom nav is outside of the NavHost, which is what the docs show. The recommended approach is a single NavHost, where you hide and show your bottom nav based on what destination you are on.
One NavHost, one NavHostController. Create a new NavHostController in front of the nested NavHost on AppScaffold.
Have similar issue when implement this common UI pattern:
HomePage(with BottomNavigationBar), this page is hosted by Inner nav controller
click some links of one page
navigate to a new page (with new Scaffold instance). This page is hosted by Outer nav controller.
Kinda hacked this issue by using 2 NavHost with 2 navController instance.
Basic idea is using some msg channel to tell the outer nav controller, a Channel in my case.
private val _pages: Channel<String> = Channel()
var pages = _pages.receiveAsFlow()
#Composable
fun Route() {
val navController1 = rememberNavController()
LaunchedEffect(true) {
pages.collect { page ->
navController1.navigate("detail")
}
}
NavHost(navController = navController1, startDestination = "home") {
composable("home") { MainPage() }
composable("detail") { DetailPage() }
}
}
#Composable
fun MainPage() {
val navController2 = rememberNavController()
val onTabSelected = { tab: String ->
navController2.navigate(tab) {
popUpTo(navController2.graph.findStartDestination().id) { saveState = true }
launchSingleTop = true
restoreState = true
}
}
Scaffold(topBar = { TopAppBar(title = { Text("Home Title") }) },
bottomBar = {
BottomNavigation {
val navBackStackEntry by navController2.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
BottomNavigationItem(
selected = currentDestination?.hierarchy?.any { it.route == "tab1" } == true,
onClick = { onTabSelected("tab1") },
icon = { Icon(imageVector = Icons.Default.Favorite, "") },
label = { Text("tab1") }
)
BottomNavigationItem(
selected = currentDestination?.hierarchy?.any { it.route == "tab2" } == true,
onClick = { onTabSelected("tab2") },
icon = { Icon(imageVector = Icons.Default.Favorite, "") },
label = { Text("tab2") }
)
BottomNavigationItem(
selected = currentDestination?.hierarchy?.any { it.route == "tab3" } == true,
onClick = { onTabSelected("tab3") },
icon = { Icon(imageVector = Icons.Default.Favorite, "") },
label = { Text("tab3") }
)
}
}
) { value ->
NavHost(navController = navController2, startDestination = "tab1") {
composable("tab1") { Home() }
composable("tab2") { Text("tab2") }
composable("tab3") { Text("tab3") }
}
}
}
class HomeViewModel: ViewModel()
#Composable
fun Home(viewModel: HomeViewModel = HomeViewModel()) {
Button(
onClick = {
viewModel.viewModelScope.launch {
_pages.send("detail")
}
},
modifier = Modifier.padding(all = 16.dp)
) {
Text("Home", modifier = Modifier.padding(all = 16.dp))
}
}
#Composable
fun DetailPage() {
Scaffold(topBar = { TopAppBar(title = { Text("Detail Title") }) }) {
Text("Detail")
}
}
Cons:
App needs to maintain UI stack information.
It's even harder to cope with responsive layout.
use rememberNavController() for your function
fun YourFunction(
navController: NavHostController = rememberNavController()
)
In my case, I had to create nav controller (for bottom bar) with in home screen.
#AndroidEntryPoint
class MainActivity: ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
setContent {
Theme {
Surface(modifier = Modifier.fillMaxSize()) {
AppContainer()
}
}
}
}
}
#Composable
fun AppContainer() {
val mainNavController = rememberNavController()
// This was causing the issue. I moved this to HomeScreen.
// val bottomNavController = rememberNavController()
Box(
modifier = Modifier.background(BackgroundColor)
) {
NavGraph(mainNavController)
}
}
#Composable
fun HomeScreen(mainNavController: NavController) {
val bottomBarNavController = rememberNavController()
}
I was trying to use FlexBox layout with JetpackCompose. I assumed that I can use normal RecyclerView and use ComposeView to render my view.
So I started with the documentation and attempted all the steps given in Compose document to use it with RecyclerView.
But once I did that, I got following error:
java.lang.IllegalStateException: Cannot locate windowRecomposer; View androidx.compose.ui.platform.ComposeView{83fefc1 V.E...... ......I. 0,0-0,0} is not attached to a window
[1] Adapter Code
class SelectAisleAdapter : BaseRecyclerViewAdapter<Any, SelectAisleAdapter.SelectAisleViewHolder>() {
override fun getViewHolder(
inflater: LayoutInflater,
parent: ViewGroup,
viewType: Int
): SelectAisleViewHolder {
return SelectAisleViewHolder(ComposeView(parent.context))
}
override fun onViewRecycled(holder: BaseViewHolder<Any>) {
super.onViewRecycled(holder)
if (holder is SelectAisleViewHolder) {
holder.composeView.disposeComposition()
}
}
inner class SelectAisleViewHolder(val composeView: ComposeView) : BaseViewHolder<Any>(composeView) {
init {
composeView.setViewCompositionStrategy(
ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
)
}
override fun bind(item: Any) {
composeView.setContent {
AisleChip(text = "Milk", /*modifier = Modifier.padding(8.dp),*/ selected = false)
}
}
}
}
[2] Compose Code
#Composable
fun AisleChip(
modifier: Modifier = Modifier,
text: String,
selected: Boolean = false,
) {
val backgroundColor = if (selected) colorResource(id = R.color.colorPrimary) else colorResource(id = R.color.colorBackground)
val borderColor = if (selected) colorResource(id = R.color.colorPrimary) else colorResource(id = R.color.colorBorder)
val textColor = if (selected) colorResource(id = R.color.white) else colorResource(id = R.color.colorBorder)
Text(
text = text,
fontSize = 18.sp,
fontWeight = FontWeight.Regular,
fontFamily = appFontFamily,
color = textColor,
modifier = modifier
.clip(RoundedCornerShape(8.dp))
.border(
width = 1.dp,
color = borderColor,
shape = RoundedCornerShape(8.dp)
)
.background(backgroundColor)
.padding(16.dp)
)
}
[3] Activity Code
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val rv = findViewById<RecyclerView>(R.id.rvMain)
val adapter = SelectAisleAdapter()
rv.layoutManager = FlexboxLayoutManager(this)
rv.adapter = adapter
adapter.replaceItems(listOf("1", "2", "3", "4", "5"))
}
}
Complete StackTrace
java.lang.IllegalStateException: Cannot locate windowRecomposer; View androidx.compose.ui.platform.ComposeView{83fefc1 V.E...... ......I. 0,0-0,0} is not attached to a window
at androidx.compose.ui.platform.WindowRecomposer_androidKt.getWindowRecomposer(WindowRecomposer.android.kt:225)
at androidx.compose.ui.platform.AbstractComposeView.resolveParentCompositionContext(ComposeView.android.kt:220)
at androidx.compose.ui.platform.AbstractComposeView.ensureCompositionCreated(ComposeView.android.kt:227)
at androidx.compose.ui.platform.AbstractComposeView.onMeasure(ComposeView.android.kt:264)
at android.view.View.measure(View.java:24530)
at com.google.android.flexbox.FlexboxHelper.calculateFlexLines(FlexboxHelper.java:477)
at com.google.android.flexbox.FlexboxHelper.calculateHorizontalFlexLines(FlexboxHelper.java:249)
at com.google.android.flexbox.FlexboxLayoutManager.updateFlexLines(FlexboxLayoutManager.java:960)
at com.google.android.flexbox.FlexboxLayoutManager.onLayoutChildren(FlexboxLayoutManager.java:737)
at androidx.recyclerview.widget.RecyclerView.dispatchLayoutStep2(RecyclerView.java:4134)
at androidx.recyclerview.widget.RecyclerView.dispatchLayout(RecyclerView.java:3851)
at androidx.recyclerview.widget.RecyclerView.onLayout(RecyclerView.java:4404)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at androidx.constraintlayout.widget.ConstraintLayout.onLayout(ConstraintLayout.java:1873)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332)
at android.widget.FrameLayout.onLayout(FrameLayout.java:270)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1582)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332)
at android.widget.FrameLayout.onLayout(FrameLayout.java:270)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1829)
at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1673)
at android.widget.LinearLayout.onLayout(LinearLayout.java:1582)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.widget.FrameLayout.layoutChildren(FrameLayout.java:332)
at android.widget.FrameLayout.onLayout(FrameLayout.java:270)
at com.android.internal.policy.DecorView.onLayout(DecorView.java:779)
at android.view.View.layout(View.java:21912)
at android.view.ViewGroup.layout(ViewGroup.java:6260)
at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:3080)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2590)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1721)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7598)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:966)
at android.view.Choreographer.doCallbacks(Choreographer.java:790)
at android.view.Choreographer.doFrame(Choreographer.java:725)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:951)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.app.ActivityThread.main(ActivityThread.java:7356)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:930)
2021-09-28 16:14:51.363 21103-21103/com.alphastack.shoppy I/Process: Sending signal. PID: 21103 SIG: 9
I am trying to update the title of the TopAppBar based on a live data in the ViewModel, which I update on different screens. It looks like the live data is getting updated properly, but the update is not getting reflected on the title of the TopAppBar. Here is the code:
class MainActivity : ComponentActivity() {
#ExperimentalFoundationApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LazyVerticalGridActivityScreen()
}
}
}
#ExperimentalFoundationApi
#Composable
fun LazyVerticalGridActivityScreen(destinationViewModel: DestinationViewModel = viewModel()) {
val navController = rememberNavController()
var canPop by remember { mutableStateOf(false) }
// getting the latest title value from the view model
val title: String by destinationViewModel.title.observeAsState("")
Log.d("MainActivity_title", title) // not getting called
navController.addOnDestinationChangedListener { controller, _, _ ->
canPop = controller.previousBackStackEntry != null
}
val navigationIcon: (#Composable () -> Unit)? =
if (canPop) {
{
IconButton(onClick = { navController.popBackStack() }) {
Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
}
}
} else {
null
}
Scaffold(
topBar = {
TopAppBar(title = { Text(title) }, navigationIcon = navigationIcon) // updating the title
},
content = {
NavHost(navController = navController, startDestination = "home") {
composable("home") { HomeScreen(navController) }
composable("details/{listId}") { backStackEntry ->
backStackEntry.arguments?.getString("listId")?.let { DetailsScreen(it, navController) }
}
}
}
)
}
#ExperimentalFoundationApi
#Composable
fun HomeScreen(navController: NavHostController, destinationViewModel: DestinationViewModel = viewModel()) {
val destinations = DestinationDataSource().loadData()
// updating the title in the view model
destinationViewModel.setTitle("Lazy Grid Layout")
LazyVerticalGrid(
cells = GridCells.Adaptive(minSize = 140.dp),
contentPadding = PaddingValues(8.dp)
) {
itemsIndexed(destinations) { index, destination ->
Row(Modifier.padding(8.dp)) {
ItemLayout(destination, index, navController)
}
}
}
}
#Composable
fun ItemLayout(
destination: Destination,
index: Int,
navController: NavHostController
) {
Column(
verticalArrangement = Arrangement.Center,
modifier = Modifier
.background(MaterialTheme.colors.primaryVariant)
.fillMaxWidth()
.clickable {
navController.navigate("details/$index")
}
) {
Image(
painter = painterResource(destination.photoId),
contentDescription = stringResource(destination.nameId),
modifier = Modifier.fillMaxWidth(),
contentScale = ContentScale.Crop
)
Text(
text = stringResource(destination.nameId),
color = Color.White,
fontSize = 14.sp,
modifier = Modifier.padding(horizontal = 16.dp, vertical = 10.dp)
)
}
}
#Composable
fun DetailsScreen(
index: String,
navController: NavController,
destinationViewModel: DestinationViewModel = viewModel()
) {
val dataSource = DestinationDataSource().loadData()
val destination = dataSource[index.toInt()]
val destinationName = stringResource(destination.nameId)
val destinationDesc = stringResource(destination.descriptionId)
val destinationImage = painterResource(destination.photoId)
// updating the title in the view model
destinationViewModel.setTitle("Destination Details")
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.verticalScroll(rememberScrollState())
) {
Image(
painter = destinationImage,
contentDescription = destinationName,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth()
)
Column(modifier = Modifier.padding(horizontal = 16.dp)) {
Text(
text = destinationName,
fontSize = 24.sp,
fontWeight = FontWeight.Bold,
modifier = Modifier.padding(vertical = 16.dp)
)
Text(text = destinationDesc, lineHeight = 24.sp)
Row(horizontalArrangement = Arrangement.End, modifier = Modifier.fillMaxWidth()) {
OutlinedButton(
onClick = {
navController.navigate("home") {
popUpTo("home") { inclusive = true }
}
},
modifier = Modifier.padding(top = 24.dp)
) {
Image(
imageVector = Icons.Filled.ArrowBack,
contentDescription = null,
colorFilter = ColorFilter.tint(MaterialTheme.colors.primaryVariant),
modifier = Modifier.size(20.dp)
)
Text("Back to Destinations", modifier = Modifier.padding(start = 16.dp))
}
}
}
}
}
EDIT: The ViewModel
class DestinationViewModel : ViewModel() {
private var _title = MutableLiveData("")
val title: LiveData<String>
get() = _title
fun setTitle(newTitle: String) {
_title.value = newTitle
Log.d("ViewModel_title", _title.value.toString())
Log.d("ViewModelTitle", title.value.toString())
}
}
Can anyone please help to find the bug? Thanks!
Edit:
Here is the GitHub link of the project: https://github.com/rawhasan/compose-exercise-lazy-vertical-grid
The reason it's not working is because those are different objects created in different scopes.
When you're using a navController, each destination will have it's own scope for viewModel() creation. By the design you may have a view model for each destination, like HomeViewModel, DestinationViewModel, etc
You can't access an other destination view model from current destination scope, as well as you can't access view model from the outer scope(which you're trying to do)
What you can do, is instead of trying to retrieve it with viewModel(), you can pass outer scope view model to your composable:
composable("details/{listId}") { backStackEntry ->
backStackEntry.arguments?.getString("listId")?.let { DetailsScreen(it, navController, destinationViewModel) }
}
Check out more details about viewModel() in the documentation
Another problem with your code is that you're calling destinationViewModel.setTitle("Lazy Grid Layout") inside composable function. So this code will be called many times, which may lead to recomposition.
To call any actions inside composable, you need to use side-effects. LaunchedEffect in this case:
LaunchedEffect(Unit) {
destinationViewModel.setTitle("Destination Details")
}
This will be called only once after view appear. If you need to call it more frequently, you need to specify key instead of Unit, so it'll be recalled each time when the key changes
You might wanna have a look here https://stackoverflow.com/a/68671477/15880865
Also, you do not need to paste all the code in the question. Just the necessary bit. We shall ask for it if something is missing in the question. Just change your LiveData to mutableStateOf and then let me know if that fixed your problem. Also, you do not need to call observeAsState after modifying the type. Just refer to the link it contains all the info.
Thanks
I'm trying to convert the android/java dropin UI code from here https://developer.paypal.com/braintree/docs/guides/drop-in/setup-and-integration#starting-drop-in into a jetpack compose app. So far I have
#Composable
fun Account(user: FinUser) {
val context = LocalContext.current
val customerToken = user.userData["customerToken"] as String
val dropInRequest = DropInRequest()
.clientToken(customerToken)
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartIntentSenderForResult()
) {
print("pause here")
}
val dropInIntent = dropInRequest.getIntent(context)
val dropInPendingIntent = PendingIntent.getBroadcast(
context, 200, dropInIntent,
PendingIntent.FLAG_UPDATE_CURRENT
)
Column(){
Column(
Modifier
.padding(top = 0.dp)
.clickable { launchDropInUi(
dropInHintLauncher=dropInHintLauncher,
dropInPendingIntent=dropInPendingIntent) }) {
Divider(color = Color.LightGray, thickness = 1.dp)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp, 10.dp)
) {
Column() {
Text("Payment", color = Color.Gray)
Text("*********9999", color = Color.Black)
}
Spacer(modifier = Modifier.fillMaxWidth())
}
Divider(color = Color.LightGray, thickness = 1.dp)
}
}
}
fun launchDropInUi(dropInHintLauncher: ManagedActivityResultLauncher<IntentSenderRequest, ActivityResult>, dropInPendingIntent: PendingIntent){
dropInHintLauncher.launch(
IntentSenderRequest.Builder(dropInPendingIntent).build()
)
}
When I click on my row there's no dropin UI popup but it does register the click and runs over the launchDropInUi function.
I found the issue. I needed to use
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartActivityForResult()
)
Giving
#Composable
fun Account(user: FinUser) {
val context = LocalContext.current
val customerToken = user.userData["customerToken"] as String
val dropInRequest = DropInRequest()
.clientToken(customerToken)
val dropInHintLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.StartActivityForResult()
){ result: ActivityResult ->
if (result.resultCode == Activity.RESULT_OK) {
// you will get result here in result.data
val data: DropInResult? = result.data?.getParcelableExtra(DropInResult.EXTRA_DROP_IN_RESULT)
}else{
print("throw error popup")
}
}
val dropInIntent = dropInRequest.getIntent(context)
Column(){
Column(
Modifier
.padding(top = 0.dp)
.clickable { launchDropInUi(
dropInHintLauncher =dropInHintLauncher,
dropInIntent =dropInIntent) }) {
Divider(color = Color.LightGray, thickness = 1.dp)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(20.dp, 10.dp)
) {
Column() {
Text("Payment", color = Color.Gray)
Text("*********9999", color = Color.Black)
}
Spacer(modifier = Modifier.fillMaxWidth())
}
Divider(color = Color.LightGray, thickness = 1.dp)
}
}
}
fun launchDropInUi(dropInHintLauncher: ManagedActivityResultLauncher<Intent, ActivityResult>, dropInIntent: Intent){
dropInHintLauncher.launch(dropInIntent)
}