Skip to content

Commit

Permalink
Merge pull request #2024 from PaulWoitaschek/layout_fix
Browse files Browse the repository at this point in the history
Ensure the onboarding layouts are all uniform. Make use of weights.
  • Loading branch information
PaulWoitaschek authored Jul 2, 2023
2 parents 597c767 + de85fdf commit 3c07108
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 83 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}
},
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
)
}
}
},
)
Expand Down
60 changes: 31 additions & 29 deletions onboarding/src/main/kotlin/voice/onboarding/OnboardingWelcome.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
)
}
}
},
)
Expand Down

0 comments on commit 3c07108

Please sign in to comment.