Jetpack Compose: Row alignment example

Introduction

Jetpack Compose has significantly simplified building user interfaces in Android development by providing a more intuitive and declarative approach. Instead of relying on XML layouts, developers can now build complex and dynamic UIs directly in Kotlin code using composable functions. In this article, we’ll explore how to use Row and Column layouts in Jetpack Compose, focusing on row alignment to position elements precisely. This breakdown will help you understand how to control the alignment of items within a row and make use of various modifiers to customize their appearance.

We'll examine a simple but effective example that demonstrates how to align items within rows using Jetpack Compose. This example leverages the power of composable functions and Kotlin's concise syntax to create a visually appealing and responsive UI. By the end, you’ll have a clearer understanding of how to align elements effectively in your Compose-based projects.

Setting Up the Main Activity

The entry point for this application is the MainActivity class, which sets up the user interface using Jetpack Compose. Instead of the traditional XML layouts, the content is managed directly through Kotlin code with the setContent function. This is where the custom composable function GetScaffold() is called to render the UI.

In GetScaffold(), a Scaffold layout is used to provide structure to the app, including a top app bar and a content area. The Scaffold function is a powerful layout that helps organize components efficiently, with options for a top bar, bottom bar, floating action button, and more. In this example, the top bar displays a title with a custom background color, while the content area is managed by another composable function, MainContent().

Designing the Layout with `Column` and `Row`

The MainContent() composable function is responsible for arranging the visual elements within the screen. Here, a Column is used to stack several Row components vertically. The Column uses a modifier to fill the available screen space, ensuring that its content is evenly distributed. This is achieved with the verticalArrangement = Arrangement.SpaceEvenly property, which creates uniform spacing between the rows.

Each Row is assigned a specific height, width, and background color to distinguish it visually. The rows demonstrate how alignment properties can be used to position their content. By using different alignment values, we can control where the content appears within each row, showcasing the flexibility of Jetpack Compose.

Aligning Content Within Rows

Aligning to the Top End
The first Row is aligned using wrapContentSize(Alignment.TopEnd). This alignment places the text component at the top-right corner of the row. The text block is given a background color and padding to make it stand out, helping to illustrate how elements can be aligned to specific parts of their parent container. This configuration is useful when you want to position elements in a specific corner of a layout.
Aligning to the Bottom Center
In the second Row, the alignment is set to wrapContentSize(Alignment.BottomCenter), which centers the text horizontally at the bottom of the row. This alignment is particularly useful for creating layouts where content needs to be anchored at the bottom but still remain centered. The background colors of the row and text components make it easier to see the effect of this alignment in action.
Aligning to the Center
The third Row demonstrates wrapContentSize(Alignment.Center), where the text is centered both horizontally and vertically within the row. This is the most straightforward alignment option when you want your content to be perfectly centered. This kind of alignment is commonly used when you want to draw attention to a specific element, such as a call-to-action button or a message.

Building a Responsive and Visually Appealing UI

One of the main benefits of using Jetpack Compose is the ability to adjust layouts dynamically with modifiers. In this example, modifiers such as height, fillMaxWidth, and background are used extensively to control the size and appearance of each row. The padding modifier is applied to add spacing around the text components, making them more readable and aesthetically pleasing.

Additionally, Jetpack Compose makes it easy to preview UI components directly in Android Studio using the @Preview annotation. This allows developers to quickly see how their composable functions will look without having to run the entire application on an emulator or physical device.

Summary

This example demonstrates the power and flexibility of Jetpack Compose for creating responsive Android user interfaces. By using rows and columns with alignment properties, developers can position UI elements precisely and efficiently. The declarative approach of Jetpack Compose not only simplifies the code but also provides better readability and maintainability.

Understanding how to use alignment in rows is a foundational skill in building modern Android apps using Jetpack Compose. As you continue to explore Compose, experimenting with different modifiers and layouts will enable you to create highly customizable and interactive user experiences.

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.*
import androidx.compose.runtime.*
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 {
            GetScaffold()
        }
    }


    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(
                    "Compose - Row Alignment",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(12.dp),
            verticalArrangement = Arrangement.SpaceEvenly
        ) {
            Row(
                modifier = Modifier
                    .height(150.dp)
                    .fillMaxWidth()
                    .background(Color(0xFFC0E8D5))
                    .wrapContentSize(Alignment.TopEnd)
                    .padding(12.dp)
            ) {
                Text(
                    text = "Alignment End",
                    Modifier.background(Color(0xFFF19CBB))
                        .padding(12.dp)
                )
            }

            Row(
                modifier = Modifier
                    .height(150.dp)
                    .fillMaxWidth()
                    .background(Color(0xFFCD9575))
                    .wrapContentSize(Alignment.BottomCenter)
                    .padding(12.dp)
            ) {
                Text(
                    text = "Alignment Bottom Center",
                    Modifier.background(Color(0xFF89CFF0))
                        .padding(12.dp)
                )
            }

            Row(
                modifier = Modifier
                    .height(150.dp)
                    .fillMaxWidth()
                    .background(Color(0xFF8DB600))
                    .wrapContentSize(Alignment.Center)
                    .padding(12.dp)
            ) {
                Text(
                    text = "Alignment Center",
                    Modifier.background(Color(0xFFF0FFFF))
                        .padding(12.dp)
                )
            }
        }
    }


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