Compose walk-through part 1: Basic components

Android Dec 16, 2023

With the recent Alpha releases of Kotlin for Webassembly and Compose Multiplatform for iOS, the Compose UI framework is close to becoming a real cross-platform solution across all main OSes. For Android developers, this is a huge opportunity: learn to build UIs for your Android app and re-use your existing skills to reach new platforms & OSes.

Even though it's been some time since Jetpack Compose has been declared stable and it's mostly adopted in the Android dev world, I believe that there's a need for a complete and quick intro into the UI framework that distills only the most important practical information on how to get started. This blog post series is exactly that. A complete practical intro to the Jetpack Compose UI framework to get you started as fast as possible.

As we embark on the journey of discovering Jetpack Compose, it's essential to familiarize ourselves with its foundational building blocks. In this first blog post, we'll introduce you to some of the fundamental components, providing a basic overview and practical examples.

Column and Row: Structuring Layouts

Column

In Jetpack Compose, the Column composable allows you to arrange UI elements vertically. It's a fundamental layout component, ideal for stacking elements from top to bottom.

@Composable
fun VerticalStack() {
  Column {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
  }
}

Row

Conversely, the Row composable facilitates the horizontal arrangement of elements. It's perfect for creating side-by-side UI components.

@Composable
fun HorizontalRow() {
  Row {
    Text("Left Item")
    Text("Right Item")
  }
}

These layout components provide a simple and intuitive way to structure your UI in a declarative manner.

Text: Displaying Textual Content

The Text composable is your go-to for displaying textual content in Jetpack Compose. It allows you to customize text appearance, size, and style effortlessly.

@Composable
fun DisplayText() {
  Text(
    text = "Hello, Compose!",
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Black
  )
}

You can adjust the fontSize, fontWeight, and color properties to tailor the appearance of your text to fit the design of your app.

Button: Handling User Interaction

The Button composable is crucial for incorporating user interaction into your Compose UI. It simplifies the process of creating clickable elements.

@Composable
fun ClickableButton() {
  var clickCount by remember { mutableStateOf(0) }
  Button(onClick = { clickCount++ }) {
    Text("Click me! Click count: $clickCount")
  }
}

In this example, the Button is associated with a mutable state variable (clickCount). Upon clicking the button, the state is updated, and Compose automatically recomposes the UI. We will discuss the state handling in the next blog post part.

Spacer: Adding Space

The Spacer composable is handy for introducing empty space between UI elements, ensuring your layout remains visually appealing.

@Composable
fun SpacedLayout() {
  Column {
    Text("Item 1")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Item 2")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Item 3")
  }
}

Here, Spacer is used to create vertical space between the Text elements.

Surface: Background Container

The Surface composable serves as a container with a specified background color, helping you organize and group UI elements.

@Composable
fun ColoredSurface() {
  Surface(color = Color.Gray) {
    Text("This text is on a colored surface", color = Color.White)
  }
}

You can customize the Surface by adjusting the color property.

By mastering these basic components, you've laid the groundwork for creating dynamic and visually engaging user interfaces with Jetpack Compose. In the next part of this series, we'll explore more advanced components and techniques, empowering you to build modern and feature-rich Android applications.

Until the next part, happy coding!