UI Improvements

NordicSemiconductor · May 28, 2024 · dcb00b4 · dcb00b4
1 parent fdd08cf
commit dcb00b4
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 50 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
@@ -34,6 +34,7 @@ package no.nordicsemi.android.wifi.provisioner
 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.Row
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
@@ -55,6 +56,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
@@ -90,7 +92,7 @@ fun HomeScreen() {
             SnackbarHost(hostState = snackbarHostState)
         },
     ) { innerPadding ->
-        LazyColumn(
+        Column(
             modifier = Modifier
                 .fillMaxSize()
                 .padding(innerPadding)
@@ -100,30 +102,35 @@ fun HomeScreen() {
                         WindowInsetsSides.Horizontal,
                     ),
                 ),
-            verticalArrangement = Arrangement.SpaceEvenly
+            horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            item {
-                Row(
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(0.4f, true),
+                horizontalArrangement = Arrangement.Center,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Image(
+                    painter = painterResource(id = R.drawable.ic_nrf70),
+                    contentDescription = stringResource(id = R.string.ic_nrf70),
                     modifier = Modifier
-                        .fillMaxWidth()
-                    /*.weight(weight = 1f)*/,
-                    horizontalArrangement = Arrangement.Center
-                ) {
-                    Image(
-                        painter = painterResource(id = R.drawable.ic_nrf70),
-                        contentDescription = stringResource(id = R.string.ic_nrf70),
-                        modifier = Modifier
-                            .widthIn(max = 200.dp)
-                            .padding(8.dp)
-                    )
-                }
+                        .widthIn(max = 200.dp)
+                        .padding(8.dp)
+                )
             }
-            item {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .weight(0.4f, true),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
                 ProvisionOverBleSection {
                     vm.navigateTo(BleDestination)
                 }
                 ProvisionOverWifiSection {
-                    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                         vm.navigateTo(SoftApDestination)
                     } else {
                         scope.launch {
@@ -135,14 +142,17 @@ fun HomeScreen() {
                     }
                 }
             }
-            item {
+            Row(
+                modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+                horizontalArrangement = Arrangement.Center,
+            ) {
                 Text(
                     text = stringResource(
                         id = R.string.app_version,
                         BuildConfig.VERSION_NAME,
                         BuildConfig.VERSION_CODE
                     ),
-                    modifier = Modifier.fillMaxWidth().padding(end = 16.dp),
+                    modifier = Modifier.padding(bottom = 48.dp),
                     textAlign = TextAlign.End,
                     style = MaterialTheme.typography.labelMedium
                 )

diff --git a/.../main/java/no/nordicsemi/android/wifi/provisioner/ble/sections/ProvisionOverBleSection.kt b/.../main/java/no/nordicsemi/android/wifi/provisioner/ble/sections/ProvisionOverBleSection.kt
@@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.Text
@@ -21,7 +22,7 @@ import no.nordicsemi.android.wifi.provisioner.ui.view.section.SectionTitle
 fun ProvisionOverBleSection(onClick: () -> Unit) {
     OutlinedCard(
         modifier = Modifier
-            .fillMaxWidth()
+            .widthIn(max = 600.dp)
             .padding(all = 8.dp)
             .clickable(onClick = onClick)
     ) {

diff --git a/.../main/java/no/nordicsemi/android/wifi/provisioner/softap/view/ProvisionOverWifiSection.kt b/.../main/java/no/nordicsemi/android/wifi/provisioner/softap/view/ProvisionOverWifiSection.kt
@@ -6,6 +6,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.Text
@@ -21,7 +23,7 @@ import no.nordicsemi.android.wifi.provisioner.ui.view.section.SectionTitle
 fun ProvisionOverWifiSection(onClick: () -> Unit) {
     OutlinedCard(
         modifier = Modifier
-            .fillMaxWidth()
+            .widthIn(max = 600.dp)
             .padding(all = 8.dp)
             .clickable(onClick = onClick)
     ) {

diff --git a/...e/softap/src/main/java/no/nordicsemi/android/wifi/provisioner/softap/view/SoftApScreen.kt b/...e/softap/src/main/java/no/nordicsemi/android/wifi/provisioner/softap/view/SoftApScreen.kt
@@ -5,6 +5,7 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 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.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -117,12 +118,7 @@ fun SoftApScreen(
                     .verticalScroll(rememberScrollState())
                     .padding(vertical = 16.dp, horizontal = 16.dp),
             ) {
-                Column(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(16.dp),
-                ) {
-                }
+                Spacer(modifier = Modifier.padding(16.dp))
                 ConfigureSoftAp(
                     configureState = state.configureState,
                     connectionState = state.connectionState,
@@ -179,10 +175,10 @@ private fun showSnackBar(
     scope.launch {
         val message = when (throwable) {
             is WifiNotEnabledException -> context.getString(R.string.please_enable_wi_fi)
-            is FailedToBindToNetwork -> "Failed to bind to network!"
-            is UnableToConnectToNetwork -> "Unable to connect to network!"
-            is OnConnectionLost -> "Connection lost!"
-            is TimeoutCancellationException -> "Verification timed out, please retry!"
+            is FailedToBindToNetwork -> context.getString(R.string.failed_to_bind_to_network)
+            is UnableToConnectToNetwork -> context.getString(R.string.unable_to_connect_to_network)
+            is OnConnectionLost -> context.getString(R.string.connection_lost)
+            is TimeoutCancellationException -> context.getString(R.string.verification_timed_out_please_retry)
             else -> "${throwable::class.simpleName}: ${throwable.message}"
         }
         val result = snackbarHostState.showSnackbar(message = message)
@@ -204,8 +200,7 @@ private fun ConfigureSoftAp(
         icon = Icons.Default.Settings,
         title = stringResource(R.string.configure),
         state = configureState,
-        decor = if ((connectionState == WizardStepState.CURRENT ||
-                    connectionState == WizardStepState.COMPLETED)
+        decor = if (connectionState == WizardStepState.COMPLETED
             && configureState == WizardStepState.COMPLETED
         ) {
             null
@@ -217,7 +212,7 @@ private fun ConfigureSoftAp(
         ) else null,
         showVerticalDivider = true
     ) {
-        Text(text = "SSID: $ssidName")
+        Text(style = MaterialTheme.typography.bodyMedium, text = "SSID: $ssidName")
     }
     if (showDialog) {
         EditSsidDialog(
@@ -258,11 +253,12 @@ private fun ConnectToSoftAp(
     ) {
         ProgressItem(
             text = when {
-                isConnectionRequested && connectionState == WizardStepState.CURRENT -> stringResource(
-                    id = R.string.connecting
-                )
+                isConnectionRequested && connectionState == WizardStepState.CURRENT ->
+                    stringResource(id = R.string.connecting)
+
+                connectionState == WizardStepState.COMPLETED ->
+                    stringResource(id = R.string.connected)
 
-                connectionState == WizardStepState.COMPLETED -> stringResource(id = R.string.connected)
                 else -> stringResource(id = R.string.connect)
             },
             status = when {
@@ -315,17 +311,20 @@ private fun SelectWifi(
         showVerticalDivider = true
     ) {
         if (wifiData != null && selectWifiState != WizardStepState.INACTIVE) {
-            Text(text = "SSID: ${wifiData.ssid}")
-            Text(
+            Text(style = MaterialTheme.typography.bodyMedium, text = "SSID: ${wifiData.ssid}")
+            Text(style = MaterialTheme.typography.bodyMedium,
                 text = "Band: ${
                     wifiData.let {
                         it.selectedChannel?.wifiInfo?.band?.toDisplayString()
                             ?: it.channelFallback.wifiInfo?.band?.toDisplayString()
                     }
-                }")
-            Text(text = "Security: ${wifiData.authMode.toDisplayString()}")
+                }"
+            )
         } else {
-            Text(text = stringResource(R.string.select_wifi_rationale))
+            Text(
+                style = MaterialTheme.typography.bodyMedium,
+                text = stringResource(R.string.select_wifi_rationale)
+            )
         }
     }
 }
@@ -361,13 +360,33 @@ private fun SetPassphrase(
         ),
         showVerticalDivider = true
     ) {
-        if (password == null) {
-            Text(text = stringResource(R.string.set_passphrase_rationale))
-        } else {
-            if (wifiData?.authMode == AuthModeDomain.OPEN) {
-                Text(text = stringResource(R.string.emptu_passwphrase_rationale))
+
+        if (wifiData != null) {
+            Text(
+                style = MaterialTheme.typography.bodyMedium,
+                text = "Security: ${wifiData.authMode.toDisplayString()}"
+            )
+
+            if (wifiData.authMode == AuthModeDomain.OPEN) {
+                Text(
+                    style = MaterialTheme.typography.bodyMedium,
+                    text = stringResource(R.string.emptu_passwphrase_rationale)
+                )
             } else
-                Text(text = stringResource(R.string.set_passphrase_value, password.toPassphrase()))
+                if (password != null) {
+                    Text(
+                        style = MaterialTheme.typography.bodyMedium,
+                        text = stringResource(
+                            R.string.set_passphrase_value,
+                            password.toPassphrase()
+                        )
+                    )
+                }
+        } else {
+            Text(
+                style = MaterialTheme.typography.bodyMedium,
+                text = stringResource(R.string.set_passphrase_rationale)
+            )
         }
         if (showDialog) {
             PasswordDialog(

diff --git a/feature/softap/src/main/res/values/strings.xml b/feature/softap/src/main/res/values/strings.xml
@@ -54,5 +54,9 @@
     <string name="verification_completed">Verification completed</string>
     <string name="please_enable_wi_fi">Please enable Wi-Fi!</string>
     <string name="emptu_passwphrase_rationale">Passphrase not required</string>
+    <string name="failed_to_bind_to_network">Failed to bind to network!</string>
+    <string name="unable_to_connect_to_network">Unable to connect to network!</string>
+    <string name="connection_lost">Connection lost!</string>
+    <string name="verification_timed_out_please_retry">Verification timed out, please retry!</string>
 
 </resources>