home-assistant · dshokouhi · Oct 4, 2024 · Oct 4, 2024 · Oct 4, 2024
diff --git a/app/src/full/java/io/homeassistant/companion/android/matter/views/MatterCommissioningView.kt b/app/src/full/java/io/homeassistant/companion/android/matter/views/MatterCommissioningView.kt
@@ -40,6 +40,7 @@ import io.homeassistant.companion.android.database.server.ServerSessionInfo
 import io.homeassistant.companion.android.database.server.ServerUserInfo
 import io.homeassistant.companion.android.matter.MatterCommissioningViewModel.CommissioningFlowStep
 import io.homeassistant.companion.android.util.compose.HomeAssistantAppTheme
+import io.homeassistant.companion.android.util.compose.STEP_SCREEN_MAX_WIDTH
 import kotlin.math.min
 
 @Composable
@@ -69,7 +70,7 @@ fun MatterCommissioningView(
         Column(
             modifier = Modifier
                 .padding(horizontal = 16.dp)
-                .width(min(screenWidth, 600).dp)
+                .width(min(screenWidth, STEP_SCREEN_MAX_WIDTH).dp)
                 .align(Alignment.Center)
         ) {
             MatterCommissioningViewHeader()

diff --git a/...ndroid/onboarding/OnboardingHeaderView.kt → ...ion/android/onboarding/OnboardingViews.kt b/...ndroid/onboarding/OnboardingHeaderView.kt → ...ion/android/onboarding/OnboardingViews.kt
@@ -1,23 +1,52 @@
 package io.homeassistant.companion.android.onboarding
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.mikepenz.iconics.compose.Image
 import com.mikepenz.iconics.typeface.IIcon
 import io.homeassistant.companion.android.common.R as commonR
+import io.homeassistant.companion.android.util.compose.STEP_SCREEN_MAX_WIDTH
+import kotlin.math.min
+
+/**
+ * Base layout for onboarding views which centers content and limits the container width if needed.
+ */
+@Composable
+fun OnboardingScreen(
+    modifier: Modifier = Modifier,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    Box(Modifier.fillMaxSize()) {
+        val screenWidth = LocalConfiguration.current.screenWidthDp
+        Column(
+            modifier = modifier
+                .padding(all = 16.dp)
+                .width(min(screenWidth, STEP_SCREEN_MAX_WIDTH).dp)
+                .align(Alignment.Center),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            content()
+        }
+    }
+}
 
 @Composable
 fun OnboardingHeaderView(

diff --git a/app/src/main/java/io/homeassistant/companion/android/onboarding/discovery/DiscoveryView.kt b/app/src/main/java/io/homeassistant/companion/android/onboarding/discovery/DiscoveryView.kt
@@ -40,6 +40,7 @@ import com.mikepenz.iconics.typeface.library.community.material.CommunityMateria
 import io.homeassistant.companion.android.R
 import io.homeassistant.companion.android.common.R as commonR
 import io.homeassistant.companion.android.onboarding.OnboardingHeaderView
+import io.homeassistant.companion.android.onboarding.OnboardingScreen
 import io.homeassistant.companion.android.util.homeAssistantInstance1
 import io.homeassistant.companion.android.util.homeAssistantInstance2
 import kotlinx.coroutines.delay
@@ -57,11 +58,7 @@ fun DiscoveryView(
         discoveryTimeout = true
     }
 
-    Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-    ) {
+    OnboardingScreen {
         OnboardingHeaderView(
             icon = CommunityMaterial.Icon2.cmd_home_search,
             title = stringResource(id = commonR.string.select_instance)

diff --git a/...ava/io/homeassistant/companion/android/onboarding/integration/MobileAppIntegrationView.kt b/...ava/io/homeassistant/companion/android/onboarding/integration/MobileAppIntegrationView.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -39,6 +38,7 @@ import androidx.compose.ui.unit.dp
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.common.R as commonR
 import io.homeassistant.companion.android.onboarding.OnboardingHeaderView
+import io.homeassistant.companion.android.onboarding.OnboardingScreen
 import io.homeassistant.companion.android.onboarding.OnboardingViewModel
 
 @OptIn(ExperimentalComposeUiApi::class)
@@ -53,12 +53,7 @@ fun MobileAppIntegrationView(
 ) {
     val scrollState = rememberScrollState()
     val keyboardController = LocalSoftwareKeyboardController.current
-    Column(
-        modifier = Modifier
-            .fillMaxHeight()
-            .fillMaxWidth()
-            .padding(16.dp)
-    ) {
+    OnboardingScreen {
         Column(
             modifier = Modifier
                 .verticalScroll(scrollState)

diff --git a/app/src/main/java/io/homeassistant/companion/android/onboarding/manual/ManualSetupView.kt b/app/src/main/java/io/homeassistant/companion/android/onboarding/manual/ManualSetupView.kt
@@ -1,8 +1,7 @@
 package io.homeassistant.companion.android.onboarding.manual
 
 import android.content.res.Configuration
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardActions
@@ -27,6 +26,7 @@ import androidx.compose.ui.unit.dp
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.common.R as commonR
 import io.homeassistant.companion.android.onboarding.OnboardingHeaderView
+import io.homeassistant.companion.android.onboarding.OnboardingScreen
 
 @Composable
 fun ManualSetupView(
@@ -35,15 +35,9 @@ fun ManualSetupView(
     manualContinueEnabled: Boolean,
     connectedClicked: () -> Unit
 ) {
-    val scrollState = rememberScrollState()
     val keyboardController = LocalSoftwareKeyboardController.current
 
-    Column(
-        modifier = Modifier
-            .verticalScroll(scrollState)
-            .fillMaxWidth()
-            .padding(16.dp)
-    ) {
+    OnboardingScreen(Modifier.fillMaxHeight().verticalScroll(rememberScrollState())) {
         OnboardingHeaderView(
             icon = CommunityMaterial.Icon3.cmd_web,
             title = stringResource(id = commonR.string.manual_title)
@@ -63,7 +57,7 @@ fun ManualSetupView(
             modifier = Modifier.align(Alignment.CenterHorizontally),
             label = { Text(stringResource(id = commonR.string.input_url)) },
             singleLine = true,
-            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done, autoCorrect = false, keyboardType = KeyboardType.Uri),
+            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done, autoCorrectEnabled = false, keyboardType = KeyboardType.Uri),
             keyboardActions = KeyboardActions(
                 onDone = {
                     keyboardController?.hide()

diff --git a/...io/homeassistant/companion/android/onboarding/notifications/NotificationPermissionView.kt b/...io/homeassistant/companion/android/onboarding/notifications/NotificationPermissionView.kt
@@ -3,7 +3,6 @@ package io.homeassistant.companion.android.onboarding.notifications
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
@@ -25,19 +24,15 @@ import com.mikepenz.iconics.typeface.IIcon
 import com.mikepenz.iconics.typeface.library.community.material.CommunityMaterial
 import io.homeassistant.companion.android.common.R as commonR
 import io.homeassistant.companion.android.onboarding.OnboardingHeaderView
+import io.homeassistant.companion.android.onboarding.OnboardingScreen
 import io.homeassistant.companion.android.util.compose.HomeAssistantAppTheme
 
 @Composable
 fun NotificationPermissionView(
     onSetNotificationsEnabled: (Boolean) -> Unit
 ) {
     val scrollState = rememberScrollState()
-    Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .fillMaxHeight()
-            .padding(16.dp)
-    ) {
+    OnboardingScreen {
         Column(
             modifier = Modifier
                 .verticalScroll(scrollState)

diff --git a/app/src/main/java/io/homeassistant/companion/android/onboarding/welcome/WelcomeView.kt b/app/src/main/java/io/homeassistant/companion/android/onboarding/welcome/WelcomeView.kt
@@ -2,8 +2,7 @@ package io.homeassistant.companion.android.onboarding.welcome
 
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
@@ -13,7 +12,6 @@ import androidx.compose.material.Button
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
@@ -29,40 +27,34 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import io.homeassistant.companion.android.R
 import io.homeassistant.companion.android.common.R as commonR
+import io.homeassistant.companion.android.onboarding.OnboardingScreen
 import io.homeassistant.companion.android.util.compose.HomeAssistantAppTheme
 
 @Composable
 fun WelcomeView(
     onContinue: () -> Unit
 ) {
-    val scrollState = rememberScrollState()
-    Column(
-        verticalArrangement = Arrangement.Center,
-        modifier = Modifier.verticalScroll(scrollState)
-    ) {
+    OnboardingScreen(Modifier.verticalScroll(rememberScrollState())) {
         Image(
             painter = painterResource(id = R.drawable.app_icon_round),
             contentDescription = stringResource(
                 id = commonR.string.app_name
             ),
             modifier = Modifier
                 .size(width = 274.dp, height = 202.dp)
-                .align(Alignment.CenterHorizontally)
-                .padding(bottom = 15.dp)
+                .padding(bottom = 16.dp)
         )
         Text(
             fontSize = 19.sp,
             fontWeight = FontWeight.Bold,
             textAlign = TextAlign.Center,
-            text = stringResource(commonR.string.welcome_hass),
-            modifier = Modifier
-                .align(Alignment.CenterHorizontally)
+            text = stringResource(commonR.string.welcome_hass)
         )
         Text(
             fontSize = 17.sp,
+            textAlign = TextAlign.Center,
             text = stringResource(commonR.string.welcome_hass_desc),
-            modifier = Modifier
-                .padding(bottom = 15.dp, start = 30.dp, end = 20.dp, top = 10.dp)
+            modifier = Modifier.fillMaxWidth().padding(vertical = 16.dp)
         )
         val annotatedString = buildAnnotatedString {
             pushStringAnnotation("learn", "https://www.home-assistant.io")
@@ -84,15 +76,11 @@ fun WelcomeView(
                     uriHandler.openUri(link.item)
                 }
             },
-            modifier = Modifier
-                .padding(bottom = 15.dp)
-                .align(Alignment.CenterHorizontally)
+            modifier = Modifier.padding(bottom = 16.dp)
         )
 
         Button(
-            onClick = onContinue,
-            modifier = Modifier
-                .align(Alignment.CenterHorizontally)
+            onClick = onContinue
         ) {
             Text(text = stringResource(id = commonR.string.continue_connect))
         }

diff --git a/app/src/main/java/io/homeassistant/companion/android/util/compose/Theme.kt b/app/src/main/java/io/homeassistant/companion/android/util/compose/Theme.kt
@@ -13,6 +13,8 @@ val colorPrimary = Color(0xFF03A9F4)
 val colorPrimaryDark = Color(0xFF0288D1)
 val darkColorBackground = Color(0xFF1C1C1C)
 
+const val STEP_SCREEN_MAX_WIDTH = 600
+
 private val haLightColors = lightColors(
     primary = colorPrimary,
     primaryVariant = colorPrimaryDark,