I have a Jetpack Compose composable in a column beginning with a icon, title, textbody and a pager row:
Box(modifier = Modifier
.fillMaxSize()
.background(color = TVTheme.colors.blue)
) {
val bigPadding = 334.dp
val smallPadding = 24.dp
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
modifier = Modifier
.requiredSize(164.dp, 28.dp),
icon = R.drawable.calendar_a_icon
)
// title
val title = "Lorem Ipsum Dolor Sit"
if (title.isNotEmpty()) {
Text(
text = title,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = dimensionResource(id = R.dimen.vertical), start = bigPadding, end = bigPadding)
.fillMaxWidth(),
overflow = TextOverflow.Visible
)
}
// body
val body = "Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit."
if (body.isNotEmpty()) {
Text(
text = body,
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = dimensionResource(id = R.dimen.vertical), start = bigPadding, end = bigPadding)
.fillMaxWidth(),
overflow = TextOverflow.Visible
)
}
Row(
modifier = Modifier
.padding(top = 44.dp, bottom = smallPadding, start = smallPadding, end = smallPadding)
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
val text = AnnotatedString.Builder(item.skipButtonText).toAnnotatedString()
ClickableText(
maxLines = 1,
text = "Skip",
onClick = {
skip()
}
)
Pager(
modifier = Modifier
.align(Alignment.CenterVertically),
index = currentPageIndex,
pageNumbers = totalPages)
}
}
}
The left and right paddings for the title and body is set to 334.dp. The example screenshot has a width of 1800 dp and according to proportions the paddings are much more than given 334.dp. That would mean, the width of title and body is 1132.dp ?!:
I tried to make the proportions visible. How can I apply correct paddings for title and body text composables?