Jetpack Compose Row Column and Box with Examples

Jetpack Compose Row Column Box

In this article, we will look at 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.

First, open the Android Studio and create an empty Jetpack Compose project. Next, open the MainActivity.kt file. You will find the following code inside the onCreate() method.

setContent {
    YourProjectNameTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Greeting("Android")
        }
    }
}

Note: If you don’t understand the curly brackets after the composables’ names, they are called lambdas. You can find more information about them on function literals in Kotlin article.

For the purpose of this tutorial, let’s create a composable and name it MyUI(). Paste the following code outside the MainActivity class.

@Composable
fun MyUI() {
    
}

Let’s call it inside the onCreate() method. Replace Greeting(“Android”) (which is inside the Surface()) with MyUI(). You will find two other composables Greeting() and DefaultPreview() outside the MainActivity class. We don’t need them. So, remove them. Our final MainActivity class looks like this.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme {
                // A surface container using the 'background' color from the theme
                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 two 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 drawable folder.

In Jetpack Compose, to display an image, we have different types of Image composable. 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.

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.

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.

2 thoughts on “Jetpack Compose Row Column and 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