Merge pull request #2024 from PaulWoitaschek/layout_fix

Ensure the onboarding layouts are all uniform. Make use of weights.
PaulWoitaschek · Jul 2, 2023 · 3c07108 · 3c07108
2 parents 597c767 + de85fdf
commit 3c07108
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 83 deletions.
diff --git a/folderPicker/src/main/kotlin/voice/folderPicker/addcontent/SelectFolder.kt b/folderPicker/src/main/kotlin/voice/folderPicker/addcontent/SelectFolder.kt
@@ -37,37 +37,40 @@ internal fun SelectFolder(
     },
     content = { contentPadding ->
       Column(Modifier.padding(contentPadding)) {
-        if (LocalConfiguration.current.screenHeightDp > 500) {
-          Spacer(modifier = Modifier.size(16.dp))
+        if (LocalConfiguration.current.screenHeightDp > 600) {
           Image(
             modifier = Modifier
-              .heightIn(max = 300.dp)
-              .padding(horizontal = 32.dp)
+              .weight(1F)
+              .heightIn(max = 400.dp)
+              .padding(top = 32.dp, bottom = 24.dp, start = 24.dp, end = 24.dp)
               .align(Alignment.CenterHorizontally),
             painter = painterResource(id = R.drawable.folder_type_artwork),
             contentDescription = null,
           )
         }
-        Spacer(modifier = Modifier.size(16.dp))
 
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(
-            when (mode) {
-              Destination.AddContent.Mode.Default -> StringsR.string.select_folder_title_default
-              Destination.AddContent.Mode.Onboarding -> StringsR.string.select_folder_title_onboarding
-            },
-          ),
-          style = MaterialTheme.typography.displayMedium,
-        )
-        Spacer(modifier = Modifier.size(4.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.select_folder_subtitle),
-          style = MaterialTheme.typography.bodyLarge,
-        )
-        Spacer(modifier = Modifier.size(24.dp))
-        SelectFolderButtonRow(onAdd)
+        Column(Modifier.weight(2F)) {
+          Spacer(modifier = Modifier.size(16.dp))
+
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(
+              when (mode) {
+                Destination.AddContent.Mode.Default -> StringsR.string.select_folder_title_default
+                Destination.AddContent.Mode.Onboarding -> StringsR.string.select_folder_title_onboarding
+              },
+            ),
+            style = MaterialTheme.typography.displayMedium,
+          )
+          Spacer(modifier = Modifier.size(4.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.select_folder_subtitle),
+            style = MaterialTheme.typography.bodyLarge,
+          )
+          Spacer(modifier = Modifier.size(24.dp))
+          SelectFolderButtonRow(onAdd)
+        }
       }
     },
   )

diff --git a/onboarding/src/main/kotlin/voice/onboarding/OnboardingExplanation.kt b/onboarding/src/main/kotlin/voice/onboarding/OnboardingExplanation.kt
@@ -3,9 +3,9 @@ package voice.onboarding
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material3.ExtendedFloatingActionButton
@@ -55,28 +55,31 @@ fun OnboardingExplanation(
     content = { contentPadding ->
       Column(Modifier.padding(contentPadding)) {
         if (LocalConfiguration.current.screenHeightDp > 500) {
-          Spacer(modifier = Modifier.size(32.dp))
           Image(
             modifier = Modifier
-              .widthIn(max = 400.dp)
+              .padding(top = 32.dp, bottom = 24.dp, start = 24.dp, end = 24.dp)
+              .weight(1F)
+              .heightIn(max = 400.dp)
               .padding(horizontal = 32.dp)
               .align(CenterHorizontally),
             painter = painterResource(id = R.drawable.bookshelf_artwork),
             contentDescription = null,
           )
         }
-        Spacer(modifier = Modifier.size(16.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.onboarding_explanation_title),
-          style = MaterialTheme.typography.displayMedium,
-        )
-        Spacer(modifier = Modifier.size(4.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.onboarding_explanation_subtitle),
-          style = MaterialTheme.typography.bodyLarge,
-        )
+        Column(Modifier.weight(2F)) {
+          Spacer(modifier = Modifier.size(16.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.onboarding_explanation_title),
+            style = MaterialTheme.typography.displayMedium,
+          )
+          Spacer(modifier = Modifier.size(4.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.onboarding_explanation_subtitle),
+            style = MaterialTheme.typography.bodyLarge,
+          )
+        }
       }
     },
   )

diff --git a/onboarding/src/main/kotlin/voice/onboarding/OnboardingWelcome.kt b/onboarding/src/main/kotlin/voice/onboarding/OnboardingWelcome.kt
@@ -3,13 +3,17 @@ package voice.onboarding
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExtendedFloatingActionButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -34,46 +38,44 @@ fun OnboardingWelcome(
         Text(text = stringResource(StringsR.string.onboarding_button_next))
       }
     },
+    topBar = {
+      TopAppBar(title = { })
+    },
     content = { contentPadding ->
       Column(Modifier.padding(contentPadding)) {
         if (LocalConfiguration.current.screenHeightDp > 440) {
-          Spacer(modifier = Modifier.size(64.dp))
-          VoiceIcon(
+          Image(
             modifier = Modifier
-              .padding(horizontal = 32.dp)
-              .align(Alignment.CenterHorizontally),
+              .weight(1F)
+              .padding(top = 32.dp, bottom = 24.dp, start = 24.dp, end = 24.dp)
+              .heightIn(max = 400.dp)
+              .aspectRatio(1F)
+              .fillMaxSize()
+              .align(Alignment.CenterHorizontally)
+              .clip(CircleShape),
+            painter = painterResource(id = R.drawable.welcome),
+            contentDescription = null,
+          )
+        }
+        Column(Modifier.weight(2F)) {
+          Spacer(modifier = Modifier.size(16.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.onboarding_welcome_title),
+            style = MaterialTheme.typography.displayMedium,
+          )
+          Spacer(modifier = Modifier.size(4.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(id = StringsR.string.onboarding_welcome_subtitle),
+            style = MaterialTheme.typography.bodyLarge,
           )
         }
-        Spacer(modifier = Modifier.size(32.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.onboarding_welcome_title),
-          style = MaterialTheme.typography.displayMedium,
-        )
-        Spacer(modifier = Modifier.size(4.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(id = StringsR.string.onboarding_welcome_subtitle),
-          style = MaterialTheme.typography.bodyLarge,
-        )
       }
     },
   )
 }
 
-@Composable
-private fun VoiceIcon(
-  modifier: Modifier = Modifier,
-) {
-  Image(
-    modifier = modifier
-      .size(256.dp)
-      .clip(CircleShape),
-    painter = painterResource(id = R.drawable.welcome),
-    contentDescription = null,
-  )
-}
-
 @Composable
 @Preview
 private fun OnboardingWelcomePreview() {

diff --git a/onboarding/src/main/kotlin/voice/onboarding/completion/OnboardingCompletion.kt b/onboarding/src/main/kotlin/voice/onboarding/completion/OnboardingCompletion.kt
@@ -3,9 +3,9 @@ package voice.onboarding.completion
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.ArrowBack
 import androidx.compose.material3.ExtendedFloatingActionButton
@@ -77,29 +77,31 @@ private fun OnboardingCompletion(
     content = { contentPadding ->
       Column(Modifier.padding(contentPadding)) {
         if (LocalConfiguration.current.screenHeightDp > 500) {
-          Spacer(modifier = Modifier.size(24.dp))
           Image(
             modifier = Modifier
-              .widthIn(max = 400.dp)
-              .padding(horizontal = 32.dp)
+              .weight(1F)
+              .heightIn(max = 400.dp)
+              .padding(top = 32.dp, bottom = 24.dp, start = 24.dp, end = 24.dp)
               .align(Alignment.CenterHorizontally),
             painter = painterResource(id = R.drawable.completion_artwork),
             contentDescription = null,
           )
         }
 
-        Spacer(modifier = Modifier.size(16.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.onboarding_completion_title),
-          style = MaterialTheme.typography.displayMedium,
-        )
-        Spacer(modifier = Modifier.size(4.dp))
-        Text(
-          modifier = Modifier.padding(horizontal = 24.dp),
-          text = stringResource(StringsR.string.onboarding_completion_subtitle),
-          style = MaterialTheme.typography.bodyLarge,
-        )
+        Column(Modifier.weight(2F)) {
+          Spacer(modifier = Modifier.size(16.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.onboarding_completion_title),
+            style = MaterialTheme.typography.displayMedium,
+          )
+          Spacer(modifier = Modifier.size(4.dp))
+          Text(
+            modifier = Modifier.padding(horizontal = 24.dp),
+            text = stringResource(StringsR.string.onboarding_completion_subtitle),
+            style = MaterialTheme.typography.bodyLarge,
+          )
+        }
       }
     },
   )