Jetpack Compose Row, Column & Box (with Examples)

In this article, we’ll learn about Row, Column, and Box layouts in Android Jetpack Compose. We will explore what they are and where they can be used. Let’s get started.

Prerequisites:

• Function Literals in Kotlin

For this article, create an empty Jetpack Compose project and open MainActivity. Create a MyUI() composable and call it from the onCreate().

// we will use the following imports
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = true) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MyUI()
                }
            }
        }
    }
}

@Composable
fun MyUI() {
    
}

We have set up the project. Let’s start coding. Let’s display 2 messages using the Text() composable.

@Composable
fun MyUI() {
    Text("Hi, Android")
    Text("Hello, Jetpack Compose")
}

Run the project. You will find the following output.

The two strings are overlapping with each other. It is the default behavior. If we don’t mention the layout, we get unpredictable results.

Jetpack Compose Column:

Column places the items (children) vertically on the screen. Let’s put our two text items inside the Column.

@Composable
fun MyUI() {
    Column {
        Text("Hi, Android")
        Text("Hello, Jetpack Compose")
    }
}

Output:

Our text items are looking good. They are placed one after another from top to bottom respectively.

Jetpack Compose Row:

Row places the items horizontally on the screen. Let’s put our text items inside the Row.

@Composable
fun MyUI() {
    Row {
        Text("Hi, Android")
        Text("Hello, Jetpack Compose")
    }
}

Output:

The items are placed one after another from left to right respectively.

So, the Column arranges the views vertically and the Row arranges the views horizontally.

If you are unable to remember this, follow this trick. The Column places the children vertically. The first letters of the Column and vertically are C and V. If we combine them, it becomes CV which means Curriculum Vitae. So, Column > Starts with C > CV > Places items vertically.

Row places the children horizontally. The first letters of the Row and horizontally are R and H. Let’s combine them. It becomes RH. You can consider RH as Rhino. So, Row > Starts with R > Rhino > RH > Places items horizontally.

Jetpack Compose Box:

Box places the children on top of each other. Let’s put our text items inside the Box.

@Composable
fun MyUI() {
    Box {
        Text("Hi, Android")
        Text("Hello, Jetpack Compose")
    }
}

Output:

You are probably thinking that this is the same output we have seen before without the layout. That’s true. But, we generally use the Box layout to place text or icons on the images. We don’t use it for placing text on the top of other text. To understand it, let’s design the following UI.

It contains an image and text in the top left corner. First, download the image from this link. Rename it to lion_kid.jpg and put it in the res > drawable folder.

In Jetpack Compose, we have different types of Image composables to display an image. Start typing Image inside our MyUI() and select the one with the painter parameter (the first one in the pic below).

It takes multiple parameters, but the painter and the contentDescription are mandatory. contentDescription is just the description of the image. Assign any text to it. To set our image, pass the image id to painterResource() method.

@Composable
fun MyUI() {
    Image(
        painter = painterResource(id = R.drawable.lion_kid),
        contentDescription = "Lion and Kid"
    )
}

Coming to the text, its value is “Lion and Kid” and the color is black. It is looking bigger, so let’s set the font size to 20 sp.

@Composable
fun MyUI() {
    Image(
        painter = painterResource(id = R.drawable.lion_kid),
        contentDescription = "Lion and Kid"
    )
    

    Text(
       text = "Lion and Kid",
       fontSize = 20.sp,
       color = Color.Black
    )
}

Next, put the Image and Text composables inside the Box.

@Composable
fun MyUI() {
    Box {
        Image(
            painter = painterResource(id = R.drawable.lion_kid),
            contentDescription = "Lion and Kid"
        )

        Text(
            text = "Lion and Kid",
            fontSize = 20.sp,
            color = Color.Black
        )
    }
}

Now, run the project. You will see the text on the top left corner of the image.

This is about Row, Column, and Box layouts in Jetpack Compose. I hope you have learned something new. If you have any doubts, comment below.

Related Articles:

• 25+ Awesome UI Designs Made with Jetpack Compose
• Alignment vs Arrangement in Jetpack Compose
• AppLovin MAX Mediation Guide in Android