Learn Jetpack Compose

Jetpack Compose Custom Layout Made Easy

Make your own custom component other than what Google’s provided

Photo by Marcus Urbenz on Unsplash

Jetpack Compose provided us with simple components like Columns and Rows. What if we want something different from it?

E.g. we want to have a Custom layout that automatically layout the provided components in a sorted manner. Sample calling code as below

CustomLayout(Modifier.size(150.dp).border(1.dp, Color.Green)) {
    Text("Hello There")
    Text("Good")
    Text("Longer please")
    Text("More Text")
    Box(Modifier.height(10.dp).width(100.dp).background(Color.Cyan))
    Box(Modifier.height(10.dp).width(10.dp).background(Color.Red))
    Box(Modifier.height(10.dp).width(50.dp).background(Color.Magenta))
}

The results are as follows

How can we do it?

Use Layout

If we look at probably the simplest composable component, Box, we can see underneath, it is just using the Layout component.

@Composable
inline fun Box(
    modifier: Modifier = Modifier…