Jetpack Compose: Getting Started
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
You have been able to use the Column and Row Composables to arrange Composables vertically and horizontally respectively.
Spacer
Let us add some space between our Image and Text Composables in the FoodCategoryItem component.
Column(
modifier = Modifier.size(75.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(
modifier = Modifier.size(75.dp),
painter = painterResource(id = icon),
contentDescription = null
)
// Add a 5.dp spacer between the image and the text
Spacer(modifier = Modifier.size(5.dp))
// remove the top padding from the text
Text(
modifier = Modifier,
text = category,
textAlign = TextAlign.Center,
fontWeight = FontWeight.Bold,
style = MaterialTheme.typography.bodyMedium
)
}
Weight
The weight Modifier function is used to specify how much space an item should take up within a Column or Row Composable.
Weight
Row(modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalAlignment = Alignment.Top) {
Text(text = "Hello World", modifier = Modifier.weight(2f))
Spacer(modifier = Modifier.weight(1f))
Text(text = "Hello Columns", modifier = Modifier
.weight(1f))
Text(text = "Hello Columns", modifier = Modifier
.weight(1f))
}
Conclusion
In this session, you learned how to use the Spacer Composable to add space between Composables. You also learned how to use the weight Modifier function to specify how much space an item should take up within a Column or Row Composable.