A composable function is a function that provides some Kotlin units that describe UI on the screen. For example you can write composable function that returns a textbox or an image.
@Composable
fun ArtistCard() {
Text("Alfred Sisley")
Text("3 minutes ago")
}
The problem with above code however is does not tell Android how to actually display both items. Should they be displayed one after another, one below another or super imposed on each other ? For that we have layout. For the web developers among you, you will be familiar with grid based layout in HTML.
@Composable
fun ArtistCardColumn() {
Column {
Text("Alfred Sisley")
Text("3 minutes ago")
}
}
Above code tells that two text boxes are to be displayed in a column. Column is a special construct that tells Android how it is to be rendered.
Another way to render these would be to display them in row. For that we have Row construct.
@Composable
fun ArtistCardArrangement(artist: Artist) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.End
) {
Image(bitmap = artist.image, contentDescription = "Artist image")
Column { /*...*/ }
}
}
Another common layout is Box where items are super imposed on each other.
You can create more complex layouts by mixing different layouts.
@Composable
fun SearchResult() {
Row {
Image(
// ...
)
Column {
Text(
// ...
)
Text(
// ...
)
}
}
}
Conclusion
It is really simple to understand concept of layouts in Compose. Basically you use Rows and Columns and mix them together to get what you want. There are other types of layouts too such as responsive layouts and slot based layouts too but they are more of an advanced case. Can you look at an App and guess how the layout is structured ?
