Jetpack Compose Row

In modern Android development, Jetpack Compose Row has become an essential layout component for creating beautiful, responsive user interfaces. If you're looking to enhance your UI design skills with Jetpack Compose, understanding how to effectively use the Jetpack Compose Row component is crucial. This comprehensive guide will walk you through everything you need to know about Jetpack Compose Row, from basic implementation to advanced customization techniques.

What is Jetpack Compose Row?

Jetpack Compose Row is a fundamental layout component in the Jetpack Compose UI toolkit that arranges its children horizontally in a sequence. As part of the Jetpack Compose framework, the Row composable allows developers to create flexible horizontal layouts with powerful alignment and arrangement capabilities.

Row {  
    // Child composables are placed horizontally  
    Text("Item 1")  
    Text("Item 2")  
    Text("Item 3")  
}  

Key Properties of Jetpack Compose Row

Let's explore the essential properties that make Jetpack Compose Row a powerful layout component:

1. Modifier

The Modifier parameter allows you to customize the appearance and behavior of the Jetpack Compose Row:

Row(  
    modifier = Modifier  
        .fillMaxWidth()  
        .height(56.dp)  
        .background(Color.LightGray)  
        .padding(8.dp)  
) {  
    Text("Modified Row")  
}  

In this example, the Jetpack Compose Row fills the maximum width, has a specific height, a light gray background, and padding all around.

2. HorizontalArrangement

Control how the Jetpack Compose Row arranges its children horizontally:

Row(  
    horizontalArrangement = Arrangement.SpaceBetween,  
    modifier = Modifier.fillMaxWidth()  
) {  
    Text("Start")  
    Text("Center")  
    Text("End")  
}  

The horizontalArrangement parameter accepts various values:

• Arrangement.Start: Places children at the start of the row
• Arrangement.End: Places children at the end of the row
• Arrangement.Center: Centers children in the row
• Arrangement.SpaceBetween: Places spaces between children, but not at the edges
• Arrangement.SpaceAround: Places spaces between children and smaller spaces at the edges
• Arrangement.SpaceEvenly: Places equal spaces between children and at the edges

3. VerticalAlignment

Control how the Jetpack Compose Row aligns its children vertically:

Row(  
    verticalAlignment = Alignment.CenterVertically,  
    modifier = Modifier.height(100.dp)  
) {  
    Text("Small", fontSize = 14.sp)  
    Text("Medium", fontSize = 18.sp)  
    Text("Large", fontSize = 24.sp)  
}  

The verticalAlignment parameter accepts:

• Alignment.Top: Aligns children to the top of the row
• Alignment.CenterVertically: Centers children vertically
• Alignment.Bottom: Aligns children to the bottom of the row

4. Content

The content lambda is where you place the child composables for your Jetpack Compose Row:

Row {  
    // Multiple children composables can be placed here  
    Icon(Icons.Default.Home, contentDescription = "Home")  
    Spacer(modifier = Modifier.width(8.dp))  
    Text("Home Screen")  
}  

Advanced Jetpack Compose Row Techniques

Weight Distribution

One of the most powerful features of Jetpack Compose Row is the ability to distribute space among children using weight:

Row(modifier = Modifier.fillMaxWidth()) {  
    Text(  
        "Left",  
        modifier = Modifier  
            .weight(1f)  
            .background(Color.LightGray)  
    )  
    Text(  
        "Center",  
        modifier = Modifier  
            .weight(2f)  
            .background(Color.Gray)  
    )  
    Text(  
        "Right",  
        modifier = Modifier  
            .weight(1f)  
            .background(Color.DarkGray)  
    )  
}  

In this example, the center text takes up twice as much space as the other texts.

Scrollable Row

Create a horizontally scrollable Jetpack Compose Row by combining it with LazyRow:

LazyRow {  
    items(20) { index ->  
        Card(  
            modifier = Modifier  
                .padding(8.dp)  
                .size(100.dp),  
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)  
        ) {  
            Box(contentAlignment = Alignment.Center) {  
                Text("Item $index")  
            }  
        }  
    }  
}  

Responsive Layout with Jetpack Compose Row

Make your Jetpack Compose Row responsive to different screen sizes:

Row(  
    modifier = Modifier.fillMaxWidth(),  
    horizontalArrangement = Arrangement.SpaceEvenly  
) {  
    val items = if (LocalConfiguration.current.screenWidthDp > 600) {  
        listOf("Home", "Search", "Profile", "Settings", "Help")  
    } else {  
        listOf("Home", "Search", "Profile")  
    }  
      
    items.forEach { item ->  
        Text(  
            text = item,  
            modifier = Modifier.padding(8.dp)  
        )  
    }  
}  

Common Use Cases for Jetpack Compose Row

1. Toolbar or App Bar

Jetpack Compose Row is perfect for creating custom toolbars:

Row(  
    modifier = Modifier  
        .fillMaxWidth()  
        .height(56.dp)  
        .background(MaterialTheme.colorScheme.primary)  
        .padding(horizontal = 16.dp),  
    horizontalArrangement = Arrangement.SpaceBetween,  
    verticalAlignment = Alignment.CenterVertically  
) {  
    Icon(  
        Icons.Default.Menu,  
        contentDescription = "Menu",  
        tint = Color.White  
    )  
    Text(  
        "Jetpack Compose Row App",  
        color = Color.White,  
        style = MaterialTheme.typography.titleLarge  
    )  
    Icon(  
        Icons.Default.MoreVert,  
        contentDescription = "More Options",  
        tint = Color.White  
    )  
}  

2. Bottom Navigation

Create a custom bottom navigation bar with Jetpack Compose Row:

Row(  
    modifier = Modifier  
        .fillMaxWidth()  
        .height(56.dp)  
        .background(MaterialTheme.colorScheme.surface),  
    horizontalArrangement = Arrangement.SpaceEvenly  
) {  
    val items = listOf(  
        "Home" to Icons.Default.Home,  
        "Search" to Icons.Default.Search,  
        "Profile" to Icons.Default.Person  
    )  
      
    items.forEach { (label, icon) ->  
        Column(  
            horizontalAlignment = Alignment.CenterHorizontally,  
            modifier = Modifier.padding(4.dp)  
        ) {  
            Icon(icon, contentDescription = label)  
            Text(text = label, style = MaterialTheme.typography.bodySmall)  
        }  
    }  
}  

3. List Items

Jetpack Compose Row works great for creating list items:

Row(  
    modifier = Modifier  
        .fillMaxWidth()  
        .padding(16.dp),  
    verticalAlignment = Alignment.CenterVertically  
) {  
    Image(  
        painter = painterResource(id = R.drawable.profile),  
        contentDescription = "Profile Image",  
        modifier = Modifier  
            .size(50.dp)  
            .clip(CircleShape)  
    )  
    Spacer(modifier = Modifier.width(16.dp))  
    Column {  
        Text("John Doe", style = MaterialTheme.typography.titleMedium)  
        Text("Android Developer", style = MaterialTheme.typography.bodyMedium)  
    }  
    Spacer(modifier = Modifier.weight(1f))  
    Icon(Icons.Default.KeyboardArrowRight, contentDescription = "View Details")  
}  

Complete Jetpack Compose Row Example

Here's a complete example that demonstrates various features of Jetpack Compose Row:

import androidx.compose.foundation.background  
import androidx.compose.foundation.layout.*  
import androidx.compose.material.icons.Icons  
import androidx.compose.material.icons.filled.Favorite  
import androidx.compose.material.icons.filled.Share  
import androidx.compose.material.icons.filled.ShoppingCart  
import androidx.compose.material3.*  
import androidx.compose.runtime.Composable  
import androidx.compose.ui.Alignment  
import androidx.compose.ui.Modifier  
import androidx.compose.ui.graphics.Color  
import androidx.compose.ui.text.font.FontWeight  
import androidx.compose.ui.tooling.preview.Preview  
import androidx.compose.ui.unit.dp  
import androidx.compose.ui.unit.sp  
  
@Composable  
fun RowDemonstration() {  
    Column(  
        modifier = Modifier  
            .fillMaxSize()  
            .padding(16.dp),  
        verticalArrangement = Arrangement.spacedBy(24.dp)  
    ) {  
        Text(  
            "Jetpack Compose Row Examples",  
            fontSize = 20.sp,  
            fontWeight = FontWeight.Bold  
        )  
          
        // Basic Row  
        Text("Basic Row:", fontWeight = FontWeight.Medium)  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .background(Color.LightGray.copy(alpha = 0.5f))  
                .padding(8.dp)  
        ) {  
            Text("Item 1")  
            Text("Item 2")  
            Text("Item 3")  
        }  
          
        // Row with arrangement  
        Text("Row with SpaceBetween:", fontWeight = FontWeight.Medium)  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .background(Color.LightGray.copy(alpha = 0.5f))  
                .padding(8.dp),  
            horizontalArrangement = Arrangement.SpaceBetween  
        ) {  
            Text("Left")  
            Text("Center")  
            Text("Right")  
        }  
          
        // Row with vertical alignment  
        Text("Row with vertical alignment:", fontWeight = FontWeight.Medium)  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .height(50.dp)  
                .background(Color.LightGray.copy(alpha = 0.5f))  
                .padding(8.dp),  
            verticalAlignment = Alignment.CenterVertically  
        ) {  
            Text("Centered Vertically")  
        }  
          
        // Row with weighted children  
        Text("Row with weighted children:", fontWeight = FontWeight.Medium)  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .height(50.dp)  
        ) {  
            Box(  
                modifier = Modifier  
                    .weight(1f)  
                    .fillMaxHeight()  
                    .background(Color.Red.copy(alpha = 0.3f)),  
                contentAlignment = Alignment.Center  
            ) {  
                Text("1x")  
            }  
            Box(  
                modifier = Modifier  
                    .weight(2f)  
                    .fillMaxHeight()  
                    .background(Color.Green.copy(alpha = 0.3f)),  
                contentAlignment = Alignment.Center  
            ) {  
                Text("2x")  
            }  
            Box(  
                modifier = Modifier  
                    .weight(3f)  
                    .fillMaxHeight()  
                    .background(Color.Blue.copy(alpha = 0.3f)),  
                contentAlignment = Alignment.Center  
            ) {  
                Text("3x")  
            }  
        }  
          
        // Product action row  
        Text("Product action buttons:", fontWeight = FontWeight.Medium)  
        Row(  
            modifier = Modifier  
                .fillMaxWidth()  
                .padding(8.dp),  
            horizontalArrangement = Arrangement.SpaceEvenly  
        ) {  
            Button(  
                onClick = { /* Add to cart */ },  
                colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary)  
            ) {  
                Row(verticalAlignment = Alignment.CenterVertically) {  
                    Icon(Icons.Default.ShoppingCart, contentDescription = "Cart")  
                    Spacer(modifier = Modifier.width(4.dp))  
                    Text("Add to Cart")  
                }  
            }  
              
            IconButton(onClick = { /* Add to favorites */ }) {  
                Icon(  
                    Icons.Default.Favorite,   
                    contentDescription = "Favorite",  
                    tint = Color.Red  
                )  
            }  
              
            IconButton(onClick = { /* Share product */ }) {  
                Icon(  
                    Icons.Default.Share,   
                    contentDescription = "Share"  
                )  
            }  
        }  
    }  
}  
  
@Preview(showBackground = true)  
@Composable  
fun PreviewRowDemonstration() {  
    MaterialTheme {  
        RowDemonstration()  
    }  
}  

This example covers multiple aspects of Jetpack Compose Row including basic usage, arrangement, alignment, and practical application in UI components.

Combining Jetpack Compose Row with Other Layouts

Jetpack Compose Row works seamlessly with other layout components:

@Composable  
fun NestedLayouts() {  
    Column(modifier = Modifier.padding(16.dp)) {  
        Row(  
            modifier = Modifier.fillMaxWidth(),  
            horizontalArrangement = Arrangement.SpaceBetween  
        ) {  
            Text("Header", style = MaterialTheme.typography.headlineMedium)  
            Icon(Icons.Default.Close, contentDescription = "Close")  
        }  
          
        Spacer(modifier = Modifier.height(16.dp))  
          
        Row(  
            modifier = Modifier.fillMaxWidth(),  
            verticalAlignment = Alignment.CenterVertically  
        ) {  
            Image(  
                painter = painterResource(id = R.drawable.product),  
                contentDescription = "Product Image",  
                modifier = Modifier.size(120.dp)  
            )  
              
            Spacer(modifier = Modifier.width(16.dp))  
              
            Column {  
                Text(  
                    "Product Title",  
                    style = MaterialTheme.typography.titleLarge  
                )  
                Text(  
                    "Product Description that spans multiple lines to demonstrate how text wraps within this nested layout structure.",  
                    style = MaterialTheme.typography.bodyMedium  
                )  
                  
                Spacer(modifier = Modifier.height(8.dp))  
                  
                Row {  
                    Text(  
                        "$99.99",  
                        style = MaterialTheme.typography.titleMedium,  
                        color = MaterialTheme.colorScheme.primary  
                    )  
                    Spacer(modifier = Modifier.width(8.dp))  
                    Text(  
                        "$149.99",  
                        style = MaterialTheme.typography.bodyMedium,  
                        color = Color.Gray,  
                        textDecoration = TextDecoration.LineThrough  
                    )  
                }  
            }  
        }  
    }  
}  

By mastering Jetpack Compose Row, you can create sophisticated, responsive layouts for your Android applications. The horizontal arrangement capabilities of Row combined with the various customization options make it an essential tool in any Android developer's toolkit.

For more information on Jetpack Compose components, visit the official Jetpack Compose documentation.