Window insets

NordicSemiconductor · Dec 9, 2024 · a03beaf · a03beaf
1 parent c4d37fc
commit a03beaf
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 80 deletions.
diff --git a/app/src/main/java/no/nordicsemi/android/wifi/provisioner/HomeScreen.kt b/app/src/main/java/no/nordicsemi/android/wifi/provisioner/HomeScreen.kt
@@ -38,17 +38,23 @@ import android.os.Build
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-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.displayCutout
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
+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.union
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -99,6 +105,10 @@ fun HomeScreen() {
                 title = { Text(text = stringResource(id = R.string.app_name)) }
             )
         },
+        contentWindowInsets = WindowInsets.navigationBars
+            .union(WindowInsets.displayCutout)
+            .union(WindowInsets(left = 16.dp, right = 16.dp))
+            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
         snackbarHost = {
             SnackbarHost(hostState = snackbarHostState)
         },
@@ -109,7 +119,9 @@ fun HomeScreen() {
                     context = context,
                     scope = scope,
                     snackbarHostState = snackbarHostState,
-                    innerPadding = innerPadding,
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding),
                     navigateTo = vm::navigateTo
                 )
             }
@@ -119,7 +131,10 @@ fun HomeScreen() {
                     context = context,
                     scope = scope,
                     snackbarHostState = snackbarHostState,
-                    innerPadding = innerPadding,
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .verticalScroll(state = rememberScrollState())
+                        .padding(innerPadding),
                     navigateTo = vm::navigateTo
                 )
             }
@@ -132,15 +147,11 @@ private fun PortraitContent(
     context: Context,
     scope: CoroutineScope,
     snackbarHostState: SnackbarHostState,
-    innerPadding: PaddingValues,
+    modifier: Modifier = Modifier,
     navigateTo: (DestinationId<Unit, *>) -> Unit
 ) {
     Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .verticalScroll(state = rememberScrollState())
-            .padding(innerPadding)
-            .padding(horizontal = 16.dp),
+        modifier = modifier,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Spacer(modifier = Modifier.weight(0.5f))
@@ -152,13 +163,19 @@ private fun PortraitContent(
                 .heightIn(min = 120.dp, max = 200.dp)
                 .padding(8.dp)
         )
+
         Spacer(modifier = Modifier.weight(0.5f))
+
+        val insets = WindowInsets.navigationBars.only(WindowInsetsSides.Bottom)
         ProvisioningMenu(
             context = context,
             scope = scope,
             snackbarHostState = snackbarHostState,
             navigateTo = navigateTo,
-            modifier = Modifier.widthIn(max = 600.dp)
+            modifier = Modifier
+                .widthIn(max = 600.dp)
+                .windowInsetsPadding(insets)
+                .padding(vertical = 16.dp)
         )
     }
 }
@@ -168,25 +185,24 @@ private fun SmallScreenLandscapeContent(
     context: Context,
     scope: CoroutineScope,
     snackbarHostState: SnackbarHostState,
-    innerPadding: PaddingValues,
+    modifier: Modifier = Modifier,
     navigateTo: (DestinationId<Unit, *>) -> Unit
 ) {
     Row(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(innerPadding)
-            .padding(horizontal = 16.dp),
+        modifier = modifier,
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Image(
             modifier = Modifier.width(200.dp).padding(horizontal = 32.dp),
             painter = painterResource(id = R.drawable.ic_nrf70),
             contentDescription = stringResource(id = R.string.ic_nrf70),
         )
+        val insets = WindowInsets.navigationBars.only(WindowInsetsSides.Bottom)
         ProvisioningMenu(
             modifier = Modifier
                 .weight(1f)
                 .verticalScroll(state = rememberScrollState())
+                .windowInsetsPadding(insets)
                 .padding(top = 16.dp),
             context = context,
             scope = scope,

diff --git a/...le/src/main/java/no/nordicsemi/android/wifi/provisioner/ble/view/BleProvisioningScreen.kt b/...le/src/main/java/no/nordicsemi/android/wifi/provisioner/ble/view/BleProvisioningScreen.kt
@@ -32,9 +32,16 @@
 package no.nordicsemi.android.wifi.provisioner.ble.view
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.union
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -95,19 +102,25 @@ fun BleProvisioningScreen() {
                 onNavigationButtonClick = viewModel::navigateUp
             )
         },
+        contentWindowInsets = WindowInsets.navigationBars
+            .union(WindowInsets.displayCutout)
+            .union(WindowInsets(left = 16.dp, right = 16.dp))
+            .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top),
     ) { innerPadding ->
         Column(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(innerPadding)
-                .padding(horizontal = 16.dp),
+                .padding(innerPadding),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             RequireBluetooth {
+
+                val insets = WindowInsets.navigationBars.only(WindowInsetsSides.Bottom)
                 OutlinedCard(
                     modifier = Modifier
                         .widthIn(max = 600.dp)
                         .verticalScroll(rememberScrollState())
+                        .windowInsetsPadding(insets)
                         .padding(vertical = 16.dp),
                 ) {
                     Column(modifier = Modifier.padding(16.dp)) {

diff --git a/...rc/main/java/no/nordicsemi/android/wifi/provisioner/ble/wifi/view/BleWifiScannerScreen.kt b/...rc/main/java/no/nordicsemi/android/wifi/provisioner/ble/wifi/view/BleWifiScannerScreen.kt
@@ -39,15 +39,23 @@ import androidx.compose.foundation.layout.Column
 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.displayCutout
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+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.union
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDropDown
-import androidx.compose.material.icons.filled.Warning
+import androidx.compose.material.icons.rounded.Warning
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -65,7 +73,6 @@ import no.nordicsemi.android.common.ui.view.NordicAppBar
 import no.nordicsemi.android.common.ui.view.WarningView
 import no.nordicsemi.android.common.ui.view.getWiFiRes
 import no.nordicsemi.android.wifi.provisioner.feature.ble.R
-import no.nordicsemi.android.wifi.provisioner.ui.R as RUI
 import no.nordicsemi.android.wifi.provisioner.ui.SelectChannelDialog
 import no.nordicsemi.android.wifi.provisioner.ui.mapping.toDisplayString
 import no.nordicsemi.android.wifi.provisioner.ui.mapping.toImageVector
@@ -78,6 +85,7 @@ import no.nordicsemi.kotlin.wifi.provisioner.feature.common.event.NavigateUpEven
 import no.nordicsemi.kotlin.wifi.provisioner.feature.common.event.OnSortOptionSelected
 import no.nordicsemi.kotlin.wifi.provisioner.feature.common.event.WifiScannerViewEvent
 import no.nordicsemi.kotlin.wifi.provisioner.feature.common.event.WifiSelectedEvent
+import no.nordicsemi.android.wifi.provisioner.ui.R as RUI
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -91,13 +99,21 @@ internal fun BleWifiScannerScreen(
             onNavigationButtonClick = { onEvent(NavigateUpEvent) }
         )
 
-        Column {
-            WifiSortView(
-                sortOption = viewEntity.sortOption,
-                enabled = !viewEntity.isLoading && viewEntity.error == null
-            ) {
-                onEvent(OnSortOptionSelected(it))
-            }
+        val insets = WindowInsets.displayCutout
+            .union(WindowInsets.navigationBars)
+            .only(WindowInsetsSides.Horizontal)
+
+        WifiSortView(
+            sortOption = viewEntity.sortOption,
+            enabled = !viewEntity.isLoading && viewEntity.error == null,
+            insets = insets,
+            onChanged = { onEvent(OnSortOptionSelected(it)) },
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .windowInsetsPadding(insets)
+        ) {
             if (viewEntity.isLoading) {
                 LoadingItem()
             } else if (viewEntity.error != null) {
@@ -124,7 +140,8 @@ private fun LoadingItem() {
 @Composable
 private fun ErrorItem(error: Throwable) {
     WarningView(
-        imageVector = Icons.Default.Warning,
+        modifier = Modifier.fillMaxSize(),
+        imageVector = Icons.Rounded.Warning,
         title = stringResource(id = R.string.error_scanning_title),
         hint = error.message ?: stringResource(id = RUI.string.unknown_error),
     ) {}

diff --git a/...src/main/java/no/nordicsemi/android/wifi/provisioner/feature/nfc/view/NfcPublishScreen.kt b/...src/main/java/no/nordicsemi/android/wifi/provisioner/feature/nfc/view/NfcPublishScreen.kt
@@ -37,6 +37,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -53,6 +54,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.platform.LocalContext
@@ -107,6 +109,7 @@ internal fun NfcPublishScreen() {
             modifier = Modifier
                 .fillMaxSize()
                 .padding(innerPadding),
+            horizontalAlignment = Alignment.CenterHorizontally,
         ) {
             RequireNfc {
                 DisposableEffect(key1 = nfcManagerVm) {
@@ -115,6 +118,7 @@ internal fun NfcPublishScreen() {
                 }
                 OutlinedCard(
                     modifier = Modifier
+                        .widthIn(max = 600.dp)
                         .verticalScroll(rememberScrollState())
                         .padding(vertical = 16.dp, horizontal = 16.dp)
                     // Leave more space for the navigation bar.