Jetpack Compose: How to use Column layout

Introduction

Jetpack Compose has revolutionized the way Android developers create UI components, offering a modern, declarative approach that simplifies the development process. Unlike traditional XML-based layouts, Compose enables developers to build UIs using Kotlin code, making it more flexible and easier to maintain. In this article, we'll dive into how to use a basic Column layout in Jetpack Compose, which is one of the most frequently used components for organizing elements vertically.

This example demonstrates how to create a simple Android application using Jetpack Compose that includes buttons, text views, and a structured column layout. It showcases the power of Compose in making your UI concise and efficient. We'll break down the code step-by-step to help you understand how to leverage the Column composable, manage alignment, padding, and spacing, and integrate components like buttons and text elements seamlessly.

Setting Up the Main Content

The core of this application begins with the MainActivity, which sets up the content view using Jetpack Compose. Instead of relying on XML layouts, the application uses the setContent function to define its UI. This function calls a custom composable function named MainContent. By organizing the UI within a composable function, the code remains modular and easily adjustable for future changes.

The MainContent function is where all the visual elements are defined. It uses a Column layout, which arranges its children in a vertical sequence. To ensure a clean appearance, the column is padded with 16dp of spacing on all sides, and it fills the width of the screen. The alignment is set to CenterHorizontally, which centers the content within the available space, making it visually appealing.

Adding Interactive Elements

One of the primary components in this layout is a clickable button placed at the top of the column. This button demonstrates how to respond to user interactions using Kotlin code. When clicked, it triggers a Toast message that briefly displays "Clicked" on the screen. This simple yet effective feedback mechanism highlights how Compose can handle user interactions with minimal effort.

Below the button, a Spacer element is used to introduce a fixed height of 25dp. This spacer helps separate the button from the text elements, ensuring a clear visual distinction between them. Using Spacer in Compose layouts is an efficient way to manage spacing without resorting to complex margin settings.

Displaying Stylized Text Elements

Following the button, the Column layout includes three Text composables, each showcasing different text styles and formatting options. The first text displays a simple message using a bold serif font and a font size of 25sp, creating a classic and readable look. The use of different FontFamily types and font weights demonstrates the versatility of Jetpack Compose in handling text customization.

The second text element is styled with a monospace font and colored red, adding emphasis to the content. The ability to easily change colors using the Color class and adjust font properties like size and weight allows developers to match their design specifications effortlessly.

The third text element is the most distinct, featuring a larger font size of 35sp and a cursive font family. Its color is set using a hexadecimal color value (0xFF0047AB), showcasing how Compose supports both predefined colors and custom color codes. This flexibility enables developers to align the application's appearance with branding guidelines or specific design themes.

Previewing the Composable Function

A useful feature of Jetpack Compose is its support for real-time previews using the @Preview annotation. Although this example includes a preview function, it is currently commented out. When enabled, it would allow developers to see how their composable function appears directly within the Android Studio editor without needing to run the entire application. This is incredibly helpful for rapid UI iteration and testing.

Summary

In this example, we've explored how to use a Column layout in Jetpack Compose to arrange buttons and text elements vertically. The layout is straightforward yet demonstrates the flexibility and power of the Compose framework. By using a combination of alignment, padding, and spacing, we can build polished and responsive UIs with minimal code.

Jetpack Compose offers a cleaner, more intuitive approach to Android development, enabling developers to create rich and dynamic user interfaces efficiently. This example serves as a foundational guide to understanding how to use Column and other composable functions to streamline the UI development process. As you become more familiar with Compose, you'll be able to unlock even greater potential for creating modern Android applications.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
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.text.font.FontFamily
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

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

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                Toast.makeText(
                    this@MainActivity,
                    "Clicked",
                    Toast.LENGTH_SHORT
                ).show()
            }) {
                Text(text = "Click Me" )
            }
            
            Spacer(modifier = Modifier.requiredHeight(25.dp))

            Text(
                text = "This is a Text",
                fontWeight = FontWeight.Bold,
                fontSize = 25.sp,
                fontFamily = FontFamily.Serif
            )

            Text(
                text = "This is second Text",
                fontWeight = FontWeight.Bold,
                fontSize = 25.sp,
                fontFamily = FontFamily.Monospace,
                color = Color.Red
            )

            Text(
                text = "This is third Text",
                fontWeight = FontWeight.Bold,
                fontSize = 35.sp,
                fontFamily = FontFamily.Cursive,
                color = Color(0xFF0047AB)

            )
        }
    }


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