Jetpack Compose Row, Column & Box (with Examples)

Jetpack Compose Row Column Box

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:

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.

Jetpack Compose Text

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:

Jetpack Compose Column

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:

Jetpack Compose Row

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:

Jetpack Compose Box

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.

Image Text

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).

Image Painter

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:

2 thoughts on “Jetpack Compose Row, Column & Box (with Examples)”

  1. Thank you.
    Feedback:
    I used a different image. It was smaller.
    I could not get the text to be on top of the image.
    Don’t worry, I will find a solution further down the study trail.
    Best Wishes
    John

    @Composable
    fun MyUI() {
    Box {
    Image(painter = painterResource(id = R.drawable.cat),
    contentDescription = “Cat at the window”,
    modifier = Modifier.fillMaxSize())
    Text(
    text = “A cat at the window”,
    fontSize = 20.sp,
    color = Color.Black
    )
    }
    }

    Reply

Leave a Comment