How to Vertically Center Components in Kotlin's Compose?

[Lomanu4]

Introduction


When designing UI components in Kotlin's Jetpack Compose, achieving precise layout alignment is crucial for a clean user interface. In this article, we’ll address how to vertically center your content effectively, particularly focusing on aligning an Icon component with the first line of a Text component. If you've implemented your UI but face positioning issues, this guide will help you refine your layout.

Understanding the Layout Issues


The issue typically arises from the behavior of the Row and Column composables when used together. While the Row component helps arrange items horizontally, it doesn't automatically adjust the vertical alignment of nested components within it. When you have an Icon and some text (like title and subtitle), you need to ensure that their positions relate correctly to each other, especially if you want the icon to align centrally with the first line of text.

Adjusting the Existing Code


Let’s look at the existing implementation of your MyBaseComponent function:

@Composable
private fun MyBaseComponent(
@DrawableRes iconResId: Int? = null,
title: String? = null,
subtitle: String,
backgroundColor: Color,
itemColor: Color
) {
Box(
modifier = Modifier
.heightIn(min = 48.dp)
.fillMaxWidth()
.background(color = backgroundColor, shape = RoundedCornerShape(2.dp))
) {
Row(
modifier = Modifier.padding(MyTheme.spacing.double),
verticalAlignment = Alignment.CenterVertically
) {
iconResId?.let {
MyIcon(iconResId = iconResId, tint = itemColor)
Spacer(modifier = Modifier.padding(end = MyTheme.spacing.double))
}

Column(verticalArrangement = Arrangement.spacedBy(MyTheme.spacing.small)) {
title?.let { MyTitle(text = title, color = itemColor) }
MySubtitle(text = subtitle, color = itemColor)
}
}
}
}

Code Adjustments for Better Alignment


To solve the icon positioning issue, you may need to align the icon to the baseline of the first line of the text. Utilize the verticalAlignment of the Row and adjust the layout parameters accordingly. Here’s how to do it:

@Composable
private fun MyBaseComponent(
@DrawableRes iconResId: Int? = null,
title: String? = null,
subtitle: String,
backgroundColor: Color,
itemColor: Color
) {
Box(
modifier = Modifier
.heightIn(min = 48.dp)
.fillMaxWidth()
.background(color = backgroundColor, shape = RoundedCornerShape(2.dp))
) {
Row(
modifier = Modifier.padding(MyTheme.spacing.double),
verticalAlignment = Alignment.Top
) {
iconResId?.let {
MyIcon(iconResId = iconResId, tint = itemColor)
Spacer(modifier = Modifier.padding(end = MyTheme.spacing.double))
}

Column(verticalArrangement = Arrangement.Top) {
title?.let { MyTitle(text = title, color = itemColor) }
MySubtitle(text = subtitle, color = itemColor)
}
}
}
}

Key Changes Explained

1. Vertical Alignment in Row: Changing verticalAlignment to Alignment.Top will make sure the icon starts at the same height as the Text components, which can help you achieve the desired visual outcome.
2. Column Arrangement: Setting Arrangement.Top for the Column means that its content (title and subtitle) will begin from the top as well, allowing the Icon and Text to align better visually.

Conclusion


Following the adjustments provided, you should notice that the Icon component is now centrally aligned with the first line of the Text component in your UI. Experiment with padding values and layout parameters to further refine your designs as needed.

Frequently Asked Questions


Q: How can I further customize the layout?
A: You can modify padding and spacing using your theme values to achieve the right balance in your UI.

Q: What if my content changes dynamically?
A: Observe how Row and Column interact, and continue testing with different configurations to get the optimal alignment.

Q: Are there performance implications?
A: Generally, the performance should not degrade with these layouts unless they become exceedingly complex.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.