Column And Row In Jetpack Compose

Introduction

Hi friends!! In this article, we will learn about Column and Row in Jetpack Compose. Row and Column are the essential core component of a jetpack compose. We can customize our screen using Column and Row easily. If you are Flutter Developer so you already know about Row and Column. In Jetpack Compose, Row and Column are exactly work the same as in Flutter. Row and Column are really good composable functions to customize our screen UI easily. Let's understand these concepts in an easy way - 

 

Column

In Jetpack Compose, Column is a composable function used to arrange its child vertically, similar to how a vertical Linear Layout works in traditional Android. You can consider a Column as a vertical container that holds other composables. This makes it easy to create vertical layouts for your UI.

In the Column, One of the important property is the vertical arrangement. The Arrangement parameter is used to define the alignment and spacing between the child composables. Different vertical arrangements in Column - 

 

Source:- "Android"

Syntax

@Composable
fun VerticalLayout() {
    Column {
        // First child composable
        // ...

        // Second child composable
        // ...

        // Third child composable
        // ...
    }
}

Example

Let's suppose we want to show a list of contact and each content have a name and mobile number and our requirement is the name and mobile number should be arranged in vertical order. To achieve this requirement we are going to use Column in below solution.

    @Composable
    fun ContactList(){
        LazyColumn(
            content = {

                item{
                    EachContact("Abhishek From India","[phone]")
                }
                item{
                    EachContact("Gaurav From USA","[phone]")
                }
                item{
                    EachContact("Harshit From Dubai","[phone]")
                }
                item{
                    EachContact("Avin From Abu Dhabi","[phone]")
                }
        }
        )
    }

    @Composable
    fun EachContact(name: String,contactNo:String) {
        Column(
            Modifier.padding(20.dp)
        ) {
            Text(text = name)
            Spacer(modifier = Modifier.height(5.dp))
            Text(text = contactNo)
        }
    }

Output

 

In the above example, EachContact composable function represents an individual contact item. It uses a Column composable to arrange its child vertically. In this case, it contains two Text for displaying the name and contact number of each contact. The ContactList composable function is the main composable that represents the entire contact list. It uses a LazyColumn composable, which is more efficient for handling large lists of items.

Row

In Jetpack Compose, a Row is a composable function used to arrange its child composables horizontally, similar to how a horizontal LinearLayout works in traditional Android. You can consider a Row as a horizontal container that holds other composables. This makes it easy to create horizontal layouts for your UI.

In the Row, like a column, also has horizontal arrangement property. Different horizontal arrangements in Row - 

Source:- "Android"

Syntax

@Composable
fun HorizontalLayout() {
    Row {
        // First child composable
        // ...

        // Second child composable
        // ...

        // Third child composable
        // ...
    }
}

Example

Here we take the same example as we take above in Column but our requirements little bit change. Here we need a person image and their mobile number. It should be arranged in horizontal order. To achieve this requirement we are going to use Row in the below solution.

    @Composable
    fun ContactRowList(){
        LazyColumn(
            content = {
                item{
                    EachRowContact("[phone]")
                }
                item{
                    EachRowContact("[phone]")
                }
                item{
                    EachRowContact("[phone]")
                }
                item{
                    EachRowContact("[phone]")
                }
            }
        )
    }
    
    @Composable
    fun EachRowContact(contactNo:String) {
        Row(
            Modifier.padding(20.dp)
        ) {
            Image(
                painter = painterResource(R.drawable.ic_person),
                contentDescription = "avatar",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(64.dp)
                    .clip(CircleShape)
                    .border(1.dp, Color.Gray, CircleShape)
                    .padding(5.dp)
            )
            Spacer(modifier = Modifier.width(10.dp))
            Text(
                text = contactNo,
                modifier = Modifier.align(CenterVertically)
            )
        }
    }

Output

 

In the above example, EachRowContact composable function represents an individual contact item. It uses a Row composable to arrange its child horizontally. In this case, it contains Text for displaying the contact number of each contact and the Image for displaying the picture of each contact. The ContactRowList composable function is the main composable that represents the entire contact list.

Conclusion

In this article, we have seen how to use Column and Row in Jetpack Compose. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!