Fix large screen insets handling

Bug: 228374243

Change-Id: I2a7af72e60450be3280872b46bd84eb1079b533d
pull/2/head
Alex Vanyo 3 years ago committed by Don Turner
parent 643b230187
commit f84320e9a9

@ -17,12 +17,17 @@
package com.google.samples.apps.nowinandroid.ui
import androidx.annotation.StringRes
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.captionBarPadding
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.consumedWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AutoStories
import androidx.compose.material.icons.filled.Bookmarks
@ -61,7 +66,7 @@ import com.google.samples.apps.nowinandroid.R
import com.google.samples.apps.nowinandroid.core.ui.ClearRippleTheme
import com.google.samples.apps.nowinandroid.core.ui.theme.NiaTheme
@OptIn(ExperimentalMaterial3Api::class)
@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
@Composable
fun NiaApp(windowSizeClass: WindowSizeClass) {
NiaTheme {
@ -84,19 +89,29 @@ fun NiaApp(windowSizeClass: WindowSizeClass) {
}
}
) { padding ->
Surface(Modifier.fillMaxSize().statusBarsPadding()) {
Row {
if (windowSizeClass.widthSizeClass != WindowWidthSizeClass.Compact) {
NiANavRail(
navigationActions = navigationActions,
currentDestination = currentDestination
Row(
Modifier
.fillMaxSize()
.windowInsetsPadding(
WindowInsets.safeDrawing.only(
WindowInsetsSides.Horizontal
)
}
NiaNavGraph(
navController = navController,
modifier = Modifier.padding(padding)
)
) {
if (windowSizeClass.widthSizeClass != WindowWidthSizeClass.Compact) {
NiANavRail(
navigationActions = navigationActions,
currentDestination = currentDestination,
modifier = Modifier.safeDrawingPadding()
)
}
NiaNavGraph(
navController = navController,
modifier = Modifier
.padding(padding)
.consumedWindowInsets(padding)
)
}
}
}
@ -105,9 +120,10 @@ fun NiaApp(windowSizeClass: WindowSizeClass) {
@Composable
private fun NiANavRail(
navigationActions: NiaNavigationActions,
currentDestination: NavDestination?
currentDestination: NavDestination?,
modifier: Modifier = Modifier,
) {
NavigationRail {
NavigationRail(modifier = modifier) {
TOP_LEVEL_DESTINATIONS.forEach { destination ->
val selected =
currentDestination?.hierarchy?.any { it.route == destination.route } == true
@ -136,9 +152,11 @@ private fun NiABottomBar(
Surface(color = MaterialTheme.colorScheme.surface) {
CompositionLocalProvider(LocalRippleTheme provides ClearRippleTheme) {
NavigationBar(
modifier = Modifier
.navigationBarsPadding()
.captionBarPadding(),
modifier = Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(
WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom
)
),
tonalElevation = 0.dp
) {

@ -49,15 +49,16 @@ fun NiaNavGraph(
NavHost(
navController = navController,
startDestination = startDestination,
modifier = modifier,
) {
composable(NiaDestinations.FOR_YOU_ROUTE) {
ForYouRoute(modifier)
ForYouRoute()
}
composable(NiaDestinations.EPISODES_ROUTE) {
Text("EPISODES", modifier)
Text("EPISODES")
}
composable(NiaDestinations.SAVED_ROUTE) {
Text("SAVED", modifier)
Text("SAVED")
}
navigation(
startDestination = InterestsDestinations.INTERESTS_ROUTE,
@ -67,7 +68,6 @@ fun NiaNavGraph(
InterestsRoute(
navigateToTopic = { navController.navigate("$TOPIC_SCREEN/$it") },
navigateToAuthor = { /* TO IMPLEMENT */ },
modifier = modifier
)
}
composable(

@ -17,7 +17,13 @@
package com.google.samples.apps.nowinandroid.feature.following
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.Search
@ -72,6 +78,14 @@ fun FollowingScreen(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(
// TODO: Replace with windowInsetsTopHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
)
)
NiaTopAppBar(
titleRes = R.string.interests,
navigationIcon = Icons.Filled.Search,

@ -16,7 +16,13 @@
package com.google.samples.apps.nowinandroid.feature.following
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
@ -48,6 +54,16 @@ fun TopicsTabContent(
)
}
}
item {
Spacer(
// TODO: Replace with windowInsetsBottomHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom)
)
)
}
}
}
@ -73,5 +89,15 @@ fun AuthorsTabContent(
)
}
}
item {
Spacer(
// TODO: Replace with windowInsetsBottomHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom)
)
)
}
}
}

@ -21,11 +21,17 @@ import android.net.Uri
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells.Fixed
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
@ -103,6 +109,16 @@ fun ForYouScreen(
LazyColumn(
modifier = modifier.fillMaxSize()
) {
item {
Spacer(
// TODO: Replace with windowInsetsTopHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
)
)
}
item {
NiaTopAppBar(
titleRes = R.string.top_app_bar_title,
@ -200,6 +216,16 @@ fun ForYouScreen(
}
}
}
item {
Spacer(
// TODO: Replace with windowInsetsBottomHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom)
)
)
}
}
}

@ -22,9 +22,15 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.WindowInsetsSides
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.only
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawing
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons.Filled
import androidx.compose.material.icons.filled.ArrowBack
@ -79,6 +85,14 @@ internal fun TopicScreen(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(
// TODO: Replace with windowInsetsTopHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Top)
)
)
when (topicState) {
Loading ->
LoadingWheel(
@ -126,6 +140,14 @@ private fun TopicBody(name: String, description: String, news: NewsUiState) {
)
}
TopicList(news, Modifier.padding(top = 24.dp))
Spacer(
// TODO: Replace with windowInsetsBottomHeight after
// https://issuetracker.google.com/issues/230383055
Modifier.windowInsetsPadding(
WindowInsets.safeDrawing.only(WindowInsetsSides.Bottom)
)
)
}
}

Loading…
Cancel
Save