Fix alignment issue and content cropping

This commit is contained in:
Benoit Marty 2023-06-01 10:41:39 +02:00 committed by Benoit Marty
parent 72050b2a59
commit c00da8ee1e

View file

@ -18,9 +18,10 @@ package io.element.android.features.onboarding.impl
import androidx.compose.foundation.Image import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
@ -29,6 +30,7 @@ import androidx.compose.material.icons.filled.QrCode
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment.Companion.CenterHorizontally import androidx.compose.ui.Alignment.Companion.CenterHorizontally
import androidx.compose.ui.BiasAlignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
@ -69,39 +71,42 @@ fun OnBoardingScreen(
) )
} }
) { ) {
Column(modifier.fillMaxWidth()) { OnBoardingHeader()
Spacer(modifier = Modifier.weight(2f))
OnBoardingHeader()
Spacer(modifier = Modifier.weight(3f))
}
} }
} }
@Composable @Composable
private fun ColumnScope.OnBoardingHeader() { private fun OnBoardingHeader(modifier: Modifier = Modifier) {
Column( Box(
modifier = Modifier modifier = modifier.fillMaxSize(),
.weight(3f) contentAlignment = BiasAlignment(
.fillMaxWidth(), horizontalBias = 0f,
horizontalAlignment = CenterHorizontally, verticalBias = -0.2f
)
) { ) {
Image( Column(
painter = painterResource(id = R.drawable.element_logo), modifier = Modifier
contentDescription = null, .fillMaxWidth(),
) horizontalAlignment = CenterHorizontally,
Image( ) {
modifier = Modifier.padding(top = 14.dp), Image(
painter = painterResource(id = R.drawable.element), painter = painterResource(id = R.drawable.element_logo),
colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary), contentDescription = null,
contentDescription = null, )
) Image(
Text( modifier = Modifier.padding(top = 14.dp),
modifier = Modifier.padding(top = 24.dp), painter = painterResource(id = R.drawable.element),
text = stringResource(id = R.string.screen_onboarding_subtitle), colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
color = MaterialTheme.colorScheme.secondary, contentDescription = null,
fontSize = 20.sp, )
textAlign = TextAlign.Center Text(
) modifier = Modifier.padding(top = 24.dp),
text = stringResource(id = R.string.screen_onboarding_subtitle),
color = MaterialTheme.colorScheme.secondary,
fontSize = 20.sp,
textAlign = TextAlign.Center
)
}
} }
} }