Edge-to-edge content for better shared element transitions.

Author: ychescale9

android/feature/content-viewer/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/contentviewer/ContentViewerScreen.kt

@@ -19,15 +19,18 @@ import androidx.compose.foundation.layout.Box
 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.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
@@ -81,7 +84,7 @@ public fun SharedTransitionScope.ContentViewerScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .navigationBarsPadding()
+            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
             .background(KSTheme.colorScheme.background)
             .sharedBounds(
                 rememberSharedContentState(key = boundsKey),

android/feature/home/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/home/HomeScreen.kt

@@ -18,15 +18,18 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides.Companion.Horizontal
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
@@ -99,7 +102,7 @@ internal fun SharedTransitionScope.HomeScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .navigationBarsPadding()
+            .windowInsetsPadding(WindowInsets.navigationBars.only(Horizontal))
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(
@@ -174,13 +177,13 @@ private fun SharedTransitionScope.ContentUi(
     modifier: Modifier = Modifier,
 ) = trace("FeedList") {
     Box(
-        modifier = modifier.fillMaxSize().navigationBarsPadding(),
+        modifier = modifier.fillMaxSize(),
         contentAlignment = Alignment.TopCenter,
     ) {
         LazyColumn(
             modifier = Modifier.testTag("home:feedList"),
             state = listState,
-            contentPadding = ListContentPadding,
+            contentPadding = calculateListContentPadding(),
             verticalArrangement = Arrangement.spacedBy(20.dp),
         ) {
             items(
@@ -337,7 +340,7 @@ private fun ErrorUi(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .padding(ListContentPadding),
+            .padding(calculateListContentPadding()),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
@@ -361,12 +364,15 @@ private fun ErrorUi(
     }
 }
 
-private val ListContentPadding = PaddingValues(
-    top = 24.dp,
-    start = 24.dp,
-    end = 24.dp,
-    bottom = 120.dp,
-)
+@Composable
+private fun calculateListContentPadding(): PaddingValues {
+    return PaddingValues(
+        top = 24.dp,
+        start = 24.dp,
+        end = 24.dp,
+        bottom = 120.dp + WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
+    )
+}
 
 private val HomeUiState.contentKey: Int
     get() = when (this) {

android/feature/kotlin-weekly-issue/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/kotlinweeklyissue/KotlinWeeklyIssueScreen.kt

@@ -18,15 +18,18 @@ 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.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -123,7 +126,7 @@ internal fun SharedTransitionScope.KotlinWeeklyIssueScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .navigationBarsPadding()
+            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(
@@ -203,6 +206,7 @@ private fun ContentUi(
 ) {
     LazyColumn(
         modifier = modifier,
+        contentPadding = WindowInsets.navigationBars.asPaddingValues(),
     ) {
         groupedItems.forEach { (group, items) ->
             stickyHeader {

android/feature/saved-for-later/src/main/kotlin/io/github/reactivecircus/kstreamlined/android/feature/savedforlater/SavedForLaterScreen.kt

@@ -16,13 +16,16 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
@@ -84,7 +87,7 @@ internal fun SharedTransitionScope.SavedForLaterScreen(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .navigationBarsPadding()
+            .windowInsetsPadding(WindowInsets.navigationBars.only(WindowInsetsSides.Horizontal))
             .background(KSTheme.colorScheme.background),
     ) {
         TopNavBar(
@@ -140,7 +143,7 @@ private fun SharedTransitionScope.ContentUi(
     LazyColumn(
         modifier = modifier.fillMaxSize(),
         state = listState,
-        contentPadding = ListContentPadding,
+        contentPadding = calculateListContentPadding(),
         verticalArrangement = Arrangement.spacedBy(20.dp),
     ) {
         items(
@@ -223,7 +226,7 @@ private fun EmptyUi(
     Column(
         modifier = modifier
             .fillMaxSize()
-            .padding(ListContentPadding),
+            .padding(calculateListContentPadding()),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
     ) {
@@ -242,9 +245,12 @@ private fun EmptyUi(
     }
 }
 
-private val ListContentPadding = PaddingValues(
-    top = 24.dp,
-    start = 24.dp,
-    end = 24.dp,
-    bottom = 120.dp,
-)
+@Composable
+private fun calculateListContentPadding(): PaddingValues {
+    return PaddingValues(
+        top = 24.dp,
+        start = 24.dp,
+        end = 24.dp,
+        bottom = 120.dp + WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding(),
+    )
+}