Jetpack Compose: How to use Row layout

Introduction

Jetpack Compose has revolutionized the way Android developers build user interfaces. Instead of relying on XML layouts, developers can now define UIs directly in Kotlin, making the development process faster, more intuitive, and adaptable to change. One of the fundamental building blocks in Jetpack Compose is the use of layout elements, which allow you to structure your content effectively on the screen. Among these elements, the Row layout is particularly useful when you want to arrange components horizontally.

In this article, we will explore how to use the Row layout in Jetpack Compose, providing a practical example to demonstrate its functionality. We will break down the code to explain how the Row can be customized to align and arrange elements. Whether you're new to Compose or looking to refine your skills, this guide will help you better understand how to use Row for horizontal layouts in your Android applications.

Understanding the MainActivity Class

The code begins by defining a MainActivity class that extends AppCompatActivity, which is the standard entry point for most Android applications. When the activity is created, the onCreate() function is invoked, and instead of using the traditional setContentView() method, the setContent function from Jetpack Compose is used. This function allows you to define your UI using Composables—reusable building blocks in Compose that encapsulate a part of your UI.

In this example, the setContent function calls a composable function named MainContent, which serves as the primary content of the activity. By using composables, you can take advantage of Jetpack Compose’s reactive programming model to build dynamic and efficient UIs.

Composable Function: MainContent

The heart of this example lies in the MainContent composable function. This function defines a Row layout, which arranges its child components horizontally. The Row is initialized with several modifiers to adjust its appearance. The Modifier.background property sets a background color, giving the layout a light beige tone. The padding(16.dp) modifier adds some space around the content, while fillMaxWidth() ensures that the row takes up the entire width of the screen.

To align the contents within the Row, two key properties are used: verticalAlignment and horizontalArrangement. Here, verticalAlignment = Alignment.CenterVertically centers the elements along the vertical axis, making sure the buttons are aligned at the center of the row. The horizontalArrangement = Arrangement.SpaceEvenly distributes the buttons evenly across the available space, ensuring that they are equally spaced apart.

Adding Buttons to the Row

Inside the Row, three Button composables are defined. Each button serves as an interactive element, with different text labels and styling. The first button uses the default appearance, while the second and third buttons utilize the ButtonDefaults.textButtonColors property to customize their colors.

The second button is styled with a dark blue background (Color(0xFF333399)) and light cyan text color (Color(0xFFF0FFFF)).
The third button uses a vibrant red shade (Color(0xFFC32148)) with a soft yellow text color (Color(0xFFFFFF99)).

These color customizations demonstrate how easy it is to apply distinct styles to your UI elements in Jetpack Compose. Each button includes an onClick handler, which currently contains placeholder comments. These handlers can be extended to perform various actions when the buttons are pressed.

Previewing the Composable

To facilitate a quick preview of the MainContent composable, a @Preview annotated function named ComposablePreview is included at the end of the code. While it is currently commented out, uncommenting the line that calls MainContent() would enable developers to visualize the layout directly in Android Studio's design editor. Previews are an essential feature of Jetpack Compose, allowing developers to see changes in real time without having to run the entire application on a device or emulator.

Summary

This example highlights the simplicity and flexibility of using the Row layout in Jetpack Compose. By leveraging modifiers and alignment properties, developers can efficiently control the arrangement of elements on the screen. The use of composables like Button within a Row demonstrates how straightforward it is to build interactive and visually appealing UIs in Compose.

Jetpack Compose continues to simplify Android development by reducing boilerplate code and enhancing the overall UI development experience. Understanding foundational components like Row will set you on the path to mastering Compose and creating highly responsive layouts.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Text
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Row(
            Modifier
                .background(Color(0xFFEDEAE0))
                .padding(16.dp)
                .fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            Button(onClick = {
                // do something
                }
            ) {
                Text(text = "First" )
            }

            Button(onClick = { },
            colors = ButtonDefaults.textButtonColors(
                backgroundColor = Color(0xFF333399),
                contentColor = Color(0xFFF0FFFF)
            )
            ) {
                Text(text = "Second" )
            }

            Button(onClick = { },
                colors = ButtonDefaults.textButtonColors(
                    backgroundColor = Color(0xFFC32148),
                    contentColor = Color(0xFFFFFF99)
                )
            ) {
                Text(text = "Third" )
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}