From 8087c5bd226070cfde5693c9fadc3da45b7b4a5c Mon Sep 17 00:00:00 2001 From: dadachi Date: Mon, 4 May 2026 11:35:10 +0900 Subject: [PATCH] Group sparkle and welcome text on the onboarding screen The previous layout left the AutoAwesome icon stretched across the upper region (fillMaxSize, bottom-padded 192dp) and pinned the welcome text to BottomCenter, producing a large empty gap on tall phones -- substrate review flagged this as a "broken layout" with the title "jammed at the very bottom of the screen". Restructure to a Column with weighted spacers and a fixed 220dp sparkle so icon and title sit together in the upper-middle, mirroring the iOS welcome composition. Mirrors NativeAppTemplate-Android#63. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../ui/app_root/OnboardingView.kt | 50 ++++++++----------- 1 file changed, 22 insertions(+), 28 deletions(-) diff --git a/app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingView.kt b/app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingView.kt index 85b93a7..f6e446d 100644 --- a/app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingView.kt +++ b/app/src/main/kotlin/com/nativeapptemplate/nativeapptemplatefree/ui/app_root/OnboardingView.kt @@ -2,11 +2,14 @@ package com.nativeapptemplate.nativeapptemplatefree.ui.app_root import android.content.Intent import android.net.Uri -import androidx.compose.foundation.background -import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +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.material.icons.Icons import androidx.compose.material.icons.filled.AutoAwesome import androidx.compose.material3.CenterAlignedTopAppBar @@ -39,41 +42,32 @@ internal fun OnboardingView( topBar = { TopAppBar(onStartClick) }, modifier = Modifier.fillMaxSize(), ) { padding -> - Box( + Column( modifier = Modifier .fillMaxSize() .padding(padding) - .padding(12.dp) - .padding(top = 12.dp), + .padding(horizontal = 24.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, ) { + Spacer(Modifier.weight(1f)) Icon( imageVector = Icons.Filled.AutoAwesome, contentDescription = null, tint = Color.White, - modifier = Modifier - .align(Alignment.TopCenter) - .fillMaxSize() - .padding(bottom = 192.dp), + modifier = Modifier.size(220.dp), ) - Box( - modifier = Modifier - .align(Alignment.BottomCenter) - .fillMaxWidth() - .background(MaterialTheme.colorScheme.background), - ) { - Text( - text = stringResource(R.string.welcome_to_app, stringResource(R.string.app_name)), - color = MaterialTheme.colorScheme.onBackground, - fontSize = 34.sp.nonScaledSp, - lineHeight = 41.sp.nonScaledSp, - fontWeight = FontWeight.Bold, - textAlign = TextAlign.Center, - modifier = Modifier - .align(Alignment.TopCenter) - .fillMaxWidth() - .padding(16.dp), - ) - } + Spacer(Modifier.height(24.dp)) + Text( + text = stringResource(R.string.welcome_to_app, stringResource(R.string.app_name)), + color = MaterialTheme.colorScheme.onBackground, + fontSize = 34.sp.nonScaledSp, + lineHeight = 41.sp.nonScaledSp, + fontWeight = FontWeight.Bold, + textAlign = TextAlign.Center, + modifier = Modifier.fillMaxWidth(), + ) + Spacer(Modifier.weight(1f)) } } }