Jetpack Compose: Row space between

Introduction

In the world of Android development, Jetpack Compose has brought a paradigm shift by providing a modern and intuitive way to build user interfaces. Unlike traditional XML-based layouts, Jetpack Compose allows developers to build responsive and dynamic UI elements using Kotlin, which can significantly simplify the coding process. This approach not only improves code readability but also enhances the overall performance of Android applications.

In this guide, we will explore an example that demonstrates how to effectively utilize the Row composable in Jetpack Compose to arrange elements with spacing between them. This example showcases a basic implementation of horizontal layouts using the Arrangement.spacedBy() parameter, which helps achieve a clean and organized UI design.

Setting Up the Main Activity

The entry point of this application is the MainActivity class, where we initialize the content of our application using the setContent function. This function takes a composable as its parameter, allowing us to define what will be displayed on the screen. In this example, the GetScaffold() function is called to set up a scaffold structure, which provides a convenient way to organize layouts, toolbars, and content areas.

The GetScaffold() composable includes a TopAppBar, which serves as the application's title bar. It features a title with white text and a background color that gives the app a distinctive look. The scaffold also includes a content section where the main layout is rendered. By structuring our code this way, we separate concerns and ensure that our user interface remains modular and easy to maintain.

Building the Main Content

The heart of the user interface in this example is the MainContent() composable. Here, we use the Row composable to arrange multiple elements horizontally. The Row is given a modifier to fill the entire width of the screen and a height of 200dp. Additionally, we add some padding around the row for better visual spacing.

To ensure that the boxes inside the row are evenly spaced, we utilize the horizontalArrangement parameter with the Arrangement.spacedBy() function. This allows us to specify the amount of space between each element within the row, creating a visually appealing layout without the need for complex calculations or nested layouts.

Utilizing Boxes with Background Colors

Inside the Row composable, we have defined three Box elements, each occupying an equal share of the available width. The weight(1f) modifier is used for each box, ensuring that they distribute the space evenly among themselves. Additionally, each box is assigned a unique background color to differentiate them visually.

These colorful boxes demonstrate how easy it is to use composables in Jetpack Compose to create flexible and responsive layouts. The simplicity of the code allows for quick customization and modification, making it ideal for prototyping and experimenting with different UI designs.

Previewing the Composable

To preview how the layout will look, we have included a ComposablePreview() function. By leveraging Android Studio's built-in preview capabilities, developers can see changes in real-time without needing to run the application on a physical device or emulator. This feature is particularly useful for iterating quickly during the design phase and ensuring that the UI behaves as expected.

Although the preview function is currently commented out, it can be easily activated by removing the comment, allowing developers to test the composables interactively. This is one of the many advantages of using Jetpack Compose, as it streamlines the development process and reduces iteration time.

Conclusion

Jetpack Compose provides a powerful and efficient way to build layouts with Kotlin, making the UI development process more intuitive. In this example, we explored how to create a horizontal layout using the Row composable and how to arrange elements with spacing between them using Arrangement.spacedBy(). The use of composables like Row and Box simplifies the creation of complex layouts while maintaining clean and concise code.

By leveraging these techniques, developers can create flexible and visually appealing user interfaces that adapt seamlessly to different screen sizes. As Jetpack Compose continues to evolve, its declarative approach will likely become the standard for building modern Android applications, allowing developers to focus on crafting beautiful and responsive 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.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 Space Between",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(12.dp),
            horizontalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            Box(
                Modifier
                    .fillMaxSize()
                    .weight(1f)
                    .background(Color(0xFF89CFF0))
            )

            Box(
                Modifier
                    .fillMaxSize()
                    .weight(1f)
                    .background(Color(0xFFFF91AF))
            )

            Box(
                Modifier
                    .fillMaxSize()
                    .weight(1f)
                    .background(Color(0xFFFE6F5E))
            )
        }
    }


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