Rows in Jetpack

Overview

Rows are used to set views horizontally.

• Simple Row declaration

 setContent {
    Row() {
        Text(text = "Hello Raaj!")
        Text(text = "Welcome to the world of Jetpack Compose")
    }
 }

• Row declaration with Modifier

 setContent {
    Row(
        modifier = Modifier
            .background(Color.Gray)
            .fillMaxSize() ,
        horizontalArrangement = Arrangement.SpaceAround ,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "Hello Raaj!")
        Text(text = "Welcome to the world of Jetpack Compose")
    }
 }

• Row declaration with more Modifiers

    setContent {
        Row(
            modifier = Modifier
                .background(Color.Gray)
                .fillMaxSize(0.5f)
                .padding(5.dp) ,
            horizontalArrangement = Arrangement.SpaceAround ,
            verticalAlignment = Alignment.CenterVertically ,
        ) {
            Text(text = "Hello Raaj!")
            Text(text = "Welcome to the world of Jetpack Compose")
        }
    }
 }

• Row declaration with width() and height() Modifiers

 setContent {
    Row(
        modifier = Modifier
            .background(Color.Gray)
            .width(200.dp)
            .heightIn(100.dp)
            .padding(5.dp) ,
        horizontalArrangement = Arrangement.SpaceAround ,
        verticalAlignment = Alignment.CenterVertically ,
    ) {
        Text(text = "Hello Raaj!")
        Text(text = "Welcome to the world of Jetpack Compose")
    }
 }

• 
  

Reference

1. https://compose.academy/layout/row