fix: windows inset to draw the background of the onboarding behind sy…

…stem bars
Infomaniak · Nov 29, 2024 · 9757a13 · 9757a13
1 parent c08a4b5
commit 9757a13
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/Core2/Onboarding/src/main/java/com/infomaniak/library/onboarding/OnboardingScaffold.kt b/Core2/Onboarding/src/main/java/com/infomaniak/library/onboarding/OnboardingScaffold.kt
@@ -43,29 +43,35 @@ import androidx.compose.ui.unit.dp
 fun OnboardingScaffold(
     pagerState: PagerState,
     onboardingPages: List<OnboardingPage>,
-    bottomContent: @Composable () -> Unit,
+    bottomContent: @Composable (PaddingValues) -> Unit,
 ) {
     Scaffold { paddingValues ->
-        Column(
-            modifier = Modifier.padding(
-                bottom = paddingValues.calculateBottomPadding(),
-                start = paddingValues.calculateStartPadding(LocalLayoutDirection.current),
-                end = paddingValues.calculateEndPadding(LocalLayoutDirection.current),
-            )
-        ) {
+        Column {
+            val left = paddingValues.calculateLeftPadding(LocalLayoutDirection.current)
+            val right = paddingValues.calculateRightPadding(LocalLayoutDirection.current)
+
             HorizontalPager(pagerState, modifier = Modifier.weight(1f)) {
-                OnboardingPageContent(page = onboardingPages[it], paddingValues.calculateTopPadding())
+                OnboardingPageContent(
+                    modifier = Modifier.windowInsetsPadding(
+                        WindowInsets(left = left, top = paddingValues.calculateTopPadding(), right = right)
+                    ),
+                    page = onboardingPages[it],
+                    0.dp,
+                )
             }
 
-            HorizontalPagerIndicator(pagerState = pagerState)
+            HorizontalPagerIndicator(
+                modifier = Modifier.windowInsetsPadding(WindowInsets(left = left, right = right)),
+                pagerState = pagerState
+            )
 
-            bottomContent()
+            bottomContent(PaddingValues(bottom = paddingValues.calculateBottomPadding()))
         }
     }
 }
 
 @Composable
-private fun OnboardingPageContent(page: OnboardingPage, calculateTopPadding: Dp) {
+private fun OnboardingPageContent(modifier: Modifier, page: OnboardingPage, calculateTopPadding: Dp) {
     Box(
         modifier = Modifier.fillMaxSize(),
         contentAlignment = Alignment.Center,

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/OnboardingActivity.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/OnboardingActivity.kt
@@ -18,8 +18,11 @@
 package com.infomaniak.swisstransfer.ui
 
 import android.content.Intent
+import android.graphics.Color
+import android.os.Build
 import android.os.Bundle
 import androidx.activity.ComponentActivity
+import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.material3.Surface
@@ -39,7 +42,9 @@ class OnboardingActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        enableEdgeToEdge()
+        enableEdgeToEdge(navigationBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT))
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) window.isNavigationBarContrastEnforced = false
 
         setContent {
             val scope = rememberCoroutineScope()

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/onboarding/OnboardingScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/onboarding/OnboardingScreen.kt
@@ -30,6 +30,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.infomaniak.library.onboarding.OnboardingPage
 import com.infomaniak.library.onboarding.OnboardingScaffold
@@ -78,6 +79,9 @@ fun OnboardingScreen(goToMainActivity: () -> Unit) {
         onboardingPages = onboardingPages,
         bottomContent = {
             BottomContent(
+                modifier = Modifier
+                    .padding(it)
+                    .consumeWindowInsets(it),
                 isLastPage = { isLastPage },
                 startMainActivity = goToMainActivity,
                 goToNextPage = { coroutineScope.launch { pagerState.animateScrollToPage(pagerState.currentPage + 1) } },
@@ -126,10 +130,15 @@ private fun TitleAndDescription(page: Page, isHighlighted: () -> Boolean) {
 }
 
 @Composable
-private fun BottomContent(isLastPage: () -> Boolean, startMainActivity: () -> Unit, goToNextPage: () -> Unit) {
+private fun BottomContent(
+    modifier: Modifier = Modifier,
+    isLastPage: () -> Boolean,
+    startMainActivity: () -> Unit,
+    goToNextPage: () -> Unit
+) {
     Box(
         contentAlignment = Alignment.Center,
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .height(140.dp),
     ) {