Jetpack Compose: Row gravity example

Introduction

Jetpack Compose is Google's modern toolkit for building native UI on Android. It simplifies and accelerates UI development with less code while still offering a high degree of flexibility. In this example, we explore how to leverage Row and Alignment in Jetpack Compose to manage layout and positioning of UI components effectively. By understanding how gravity and alignment work in Compose, developers can craft responsive and visually appealing user interfaces.

This project focuses on creating a layout with three rows, each demonstrating different alignment properties. The components are styled with vibrant colors and padding to make the example both visually appealing and easy to understand. This tutorial is perfect for developers looking to enhance their skills with Jetpack Compose's layout system.

Understanding the Structure of the Application

The entry point of this Android application is the MainActivity, which sets up the entire UI using Jetpack Compose. Upon launching, the onCreate method calls setContent, which loads a Scaffold. This Scaffold is used to organize the layout, providing a TopAppBar for the title and calling MainContent as the main body of the screen.

The TopAppBar at the top displays the app’s title, "Compose - Row Gravity", with a purple background color and white text. Below this bar, the main content area is defined where the layout demonstrates the usage of Row and various alignment properties.

Designing the Main Content Layout

The MainContent composable function contains a Column that arranges its child components vertically. Each child is a Row with different alignment settings to demonstrate how Jetpack Compose handles gravity-like effects. The entire column uses a vertical arrangement of SpaceEvenly, ensuring equal space between rows. Additionally, each row is padded and assigned a unique background color for better visual separation.

Within each Row, there is a Box that contains a text element, which is used to illustrate different alignment behaviors. The Box itself is styled with rounded corners and padding to enhance its visual appearance.

Exploring the Rows and Alignments

Center-Aligned Row:
The first row demonstrates how to center-align content within a row. The wrapContentSize(align = Alignment.Center) modifier is used to ensure that the Box inside the row is perfectly centered. This alignment is useful for elements that need to appear in the middle of a section, such as central buttons or notifications.
Bottom-End Aligned Row:
The second row shows how to align content to the bottom-right corner using wrapContentSize(align = Alignment.BottomEnd). This type of alignment is often used for elements like floating action buttons or badges that need to be anchored to the bottom corner of a container.
Top-Center Aligned Row:
The final row demonstrates top-center alignment with wrapContentSize(align = Alignment.TopCenter). This is particularly useful for headers or elements that need to appear at the top of a section but still be horizontally centered.

Styling and Design Choices

Each Row is padded and given a distinct background color to differentiate its alignment behavior clearly. The inner Box components are styled with a red background, rounded corners, and some padding to emphasize their boundaries and make the alignment more noticeable. These design choices not only make the layout visually engaging but also help developers better understand how alignment modifiers work.

The color scheme, padding, and rounded corners add a layer of polish to the UI, making it feel more professional. The use of Jetpack Compose’s MaterialTheme.typography ensures that the text elements are styled consistently with Material Design principles.

Previewing the Layout

To facilitate rapid development, a ComposablePreview function is included. Although it's currently commented out, enabling it allows developers to preview the layout directly within Android Studio without running the full application on a device. This is an excellent feature of Jetpack Compose, enabling quick iterations and visual checks.

Conclusion

This example illustrates the power and flexibility of Jetpack Compose when it comes to managing layout and alignment. By using Row and alignment modifiers like wrapContentSize, developers can precisely control where elements appear on the screen, allowing for highly customizable UI layouts. This project serves as a solid introduction to positioning elements within a row and demonstrates the potential of Jetpack Compose for building modern Android applications.

By mastering alignment techniques like those showcased here, developers can create clean, responsive, and visually appealing interfaces with minimal code. As Jetpack Compose continues to evolve, these skills will be increasingly valuable for building intuitive 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.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
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 Gravity",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp),
            verticalArrangement = Arrangement.SpaceEvenly
        ) {
            Row(
                modifier = Modifier
                    .padding(12.dp)
                    .background(Color(0xFFE4D00A))
                    .fillMaxSize()
                    .weight(1f)
                    .wrapContentSize(align = Alignment.Center)
            ) {
                Box(
                    Modifier
                        .clip(RoundedCornerShape(4.dp))
                        .background(Color(0xFFDC143C))
                        .padding(16.dp)
                ){
                    Text(
                        text = "Gravity Center",
                        style = MaterialTheme.typography.h5
                    )
                }
            }

            Row(
                modifier = Modifier
                    .padding(12.dp)
                    .background(Color(0xFF98817B))
                    .fillMaxSize()
                    .weight(1f)
                    .wrapContentSize(align = Alignment.BottomEnd)
            ) {
                Box(
                    Modifier
                        .clip(RoundedCornerShape(4.dp))
                        .background(Color(0xFFDC143C))
                        .padding(16.dp)
                ){
                    Text(
                        text = "Bottom End",
                        style = MaterialTheme.typography.h5
                    )
                }
            }

            Row(
                modifier = Modifier
                    .padding(12.dp)
                    .background(Color(0xFFA7D8DE))
                    .fillMaxSize()
                    .weight(1f)
                    .wrapContentSize(align = Alignment.TopCenter)
            ) {
                Box(
                    Modifier
                        .clip(RoundedCornerShape(4.dp))
                        .background(Color(0xFFDC143C))
                        .padding(16.dp)
                ){
                    Text(
                        text = "Top Center",
                        style = MaterialTheme.typography.h5
                    )
                }
            }
        }
    }


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