From 31133a4c4e7214d40ec5cab0ebf78d268141b297 Mon Sep 17 00:00:00 2001 From: Alex Vanyo Date: Thu, 15 Dec 2022 15:08:13 -0800 Subject: [PATCH 1/2] Center title bar when nav rail is visible Change-Id: I341833b71504462fdbfbe5073a2465be2af95fda --- .../samples/apps/nowinandroid/ui/NiaApp.kt | 90 +++++++++---------- 1 file changed, 41 insertions(+), 49 deletions(-) diff --git a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt index 26262e53f..0948ee798 100644 --- a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt +++ b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt @@ -16,6 +16,7 @@ package com.google.samples.apps.nowinandroid.ui +import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.WindowInsets @@ -49,7 +50,6 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.testTagsAsResourceId -import androidx.compose.ui.zIndex import androidx.lifecycle.compose.ExperimentalLifecycleComposeApi import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.navigation.NavDestination @@ -96,9 +96,25 @@ fun NiaApp( } background { - val snackbarHostState = remember { SnackbarHostState() } + val isOffline by appState.isOffline.collectAsStateWithLifecycle() + + // If user is not connected to the internet show a snack bar to inform them. + val notConnected = stringResource(R.string.not_connected) + LaunchedEffect(isOffline) { + if (isOffline) snackbarHostState.showSnackbar( + message = notConnected, + duration = Indefinite + ) + } + + if (appState.shouldShowSettingsDialog) { + SettingsDialog( + onDismiss = { appState.setShowSettingsDialog(false) } + ) + } + Scaffold( modifier = Modifier.semantics { testTagsAsResourceId = true @@ -107,28 +123,6 @@ fun NiaApp( contentColor = MaterialTheme.colorScheme.onBackground, contentWindowInsets = WindowInsets(0, 0, 0, 0), snackbarHost = { SnackbarHost(snackbarHostState) }, - topBar = { - // Show the top app bar on top level destinations. - val destination = appState.currentTopLevelDestination - if (destination != null) { - NiaTopAppBar( - // When the nav rail is displayed, the top app bar will, by default - // overlap it. This means that the top most item in the nav rail - // won't be tappable. A workaround is to position the top app bar - // behind the nav rail using zIndex. - modifier = Modifier.zIndex(-1F), - titleRes = destination.titleTextId, - actionIcon = NiaIcons.Settings, - actionIconContentDescription = stringResource( - id = settingsR.string.top_app_bar_action_icon_description - ), - colors = TopAppBarDefaults.centerAlignedTopAppBarColors( - containerColor = Color.Transparent - ), - onActionClick = { appState.setShowSettingsDialog(true) } - ) - } - }, bottomBar = { if (appState.shouldShowBottomBar) { NiaBottomBar( @@ -140,27 +134,11 @@ fun NiaApp( } } ) { padding -> - - val isOffline by appState.isOffline.collectAsStateWithLifecycle() - - // If user is not connected to the internet show a snack bar to inform them. - val notConnected = stringResource(R.string.not_connected) - LaunchedEffect(isOffline) { - if (isOffline) snackbarHostState.showSnackbar( - message = notConnected, - duration = Indefinite - ) - } - - if (appState.shouldShowSettingsDialog) { - SettingsDialog( - onDismiss = { appState.setShowSettingsDialog(false) } - ) - } - Row( Modifier .fillMaxSize() + .padding(padding) + .consumedWindowInsets(padding) .windowInsetsPadding( WindowInsets.safeDrawing.only( WindowInsetsSides.Horizontal @@ -178,14 +156,28 @@ fun NiaApp( ) } - NiaNavHost( - navController = appState.navController, - onBackClick = appState::onBackClick, + Column(Modifier.fillMaxSize()) { + // Show the top app bar on top level destinations. + val destination = appState.currentTopLevelDestination + if (destination != null) { + NiaTopAppBar( + titleRes = destination.titleTextId, + actionIcon = NiaIcons.Settings, + actionIconContentDescription = stringResource( + id = settingsR.string.top_app_bar_action_icon_description + ), + colors = TopAppBarDefaults.centerAlignedTopAppBarColors( + containerColor = Color.Transparent + ), + onActionClick = { appState.setShowSettingsDialog(true) } + ) + } - modifier = Modifier - .padding(padding) - .consumedWindowInsets(padding) - ) + NiaNavHost( + navController = appState.navController, + onBackClick = appState::onBackClick + ) + } // TODO: We may want to add padding or spacer when the snackbar is shown so that // content doesn't display behind it. From 18d1259a79a55a2ff68a87800469fcc5a86af909 Mon Sep 17 00:00:00 2001 From: Don Turner Date: Wed, 21 Dec 2022 16:21:04 +0000 Subject: [PATCH 2/2] Change variable name for 'not connected' message --- .../java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt index 0948ee798..2c76222af 100644 --- a/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt +++ b/app/src/main/java/com/google/samples/apps/nowinandroid/ui/NiaApp.kt @@ -101,10 +101,10 @@ fun NiaApp( val isOffline by appState.isOffline.collectAsStateWithLifecycle() // If user is not connected to the internet show a snack bar to inform them. - val notConnected = stringResource(R.string.not_connected) + val notConnectedMessage = stringResource(R.string.not_connected) LaunchedEffect(isOffline) { if (isOffline) snackbarHostState.showSnackbar( - message = notConnected, + message = notConnectedMessage, duration = Indefinite ) }