How To Build A Simple App Using Jetpack Compose, A Reactive Programming Pattern That Powers Android UI Development

|

Jetpack Compose is Google’s modern toolkit for building native Android user interfaces using a declarative and reactive approach. Rather than manipulating XML layouts and manually synchronizing UI with data, Compose allows developers to describe how the UI should look based on the current state — and the framework handles the rest. This not only reduces boilerplate code but also makes your UI easier to maintain and test.

In this article, we’ll walk through building a simple app using Jetpack Compose. You’ll learn about its reactive programming paradigm, the core building blocks, and step-by-step code examples that tie everything together. By the end, you will have a working Compose app and a deep understanding of how the toolkit empowers Android UI development.

What Is Jetpack Compose?

Jetpack Compose is part of the Android Jetpack suite and introduces a declarative UI paradigm. In contrast to traditional imperative UI development, where you explicitly modify UI elements when the data changes, Compose lets you declare your UI in terms of state. When that state changes, Compose automatically updates the UI — no need for manual view bindings or updates.

This is possible because Compose uses reactive programming principles. At its core:

  • UI = function(state): You describe your UI as a pure function of state.

  • Automatic recomposition: When state updates, the UI recomposes (re-renders) only the affected parts.

  • Composable functions: UI elements are built using composable functions annotated with @Composable.

Setting Up Your Project

Before we dive into code, you’ll need a recent version of Android Studio (at least Android Studio Bumblebee or later). Jetpack Compose is fully integrated into Android Studio, making development seamless.

  1. Create a new project:

    • Open Android Studio → New Project → Select Empty Compose Activity template.

    • Set package name, save location, and minimum SDK (API 21+ is supported).

  2. Check your Gradle files:
    Your build.gradle files should include Compose settings. For example:

    gradle
    android {
    compileSdk 34
    defaultConfig {
    applicationId "com.example.simplecomposeapp"
    minSdk 21
    targetSdk 34
    versionCode 1
    versionName "1.0"
    }
    buildFeatures {
    compose true
    }
    composeOptions {
    kotlinCompilerExtensionVersion '1.5.0'
    }
    }
    dependencies {
    implementation "androidx.compose.ui:ui:1.5.0"
    implementation "androidx.compose.material3:material3:1.2.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.5.0"
    debugImplementation "androidx.compose.ui:ui-tooling:1.5.0"
    }

With the setup complete, you’re ready to build your first app using Jetpack Compose.

Building Your First Screen

Let’s start with a simple greeting app. This will introduce you to composable functions, state handling, and previews.

  1. Create a composable function:

    kotlin
    @Composable
    fun Greeting(name: String) {
    Text(text = "Hello, $name!", style = MaterialTheme.typography.headlineMedium)
    }

  2. Preview it inside Android Studio:

    kotlin
    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
    MaterialTheme {
    Greeting("Jetpack Compose")
    }
    }

What’s happening here?

  • The @Composable annotation tells the compiler this function describes part of the UI.

  • Text is a composable provided by Compose to display text.

  • MaterialTheme wraps the UI with theming support.

  • @Preview lets you render composables directly in Android Studio without running on a device.

Introducing State with remember and mutableStateOf

So far, the greeting text is static. To make it interactive, we’ll add state. Compose uses reactive state containers like mutableStateOf to store and track UI-related data.

kotlin
@Composable
fun GreetingWithInput() {
var name by remember { mutableStateOf("") }Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text(“Enter your name”) }
)
Spacer(modifier = Modifier.height(16.dp))
Text(text = “Hello, $name!”, style = MaterialTheme.typography.headlineMedium)
}
}

Explanation:

  • remember keeps state alive across recompositions.

  • mutableStateOf creates an observable state. When name changes, Compose automatically updates the UI.

  • OutlinedTextField provides a Material Design input field.

  • Column arranges elements vertically, while Spacer adds space between them.

Combining Screens Into an App

Next, we’ll integrate this composable into our app’s entry point (MainActivity.kt):

kotlin
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
GreetingWithInput()
}
}
}
}
}

Here:

  • setContent {} replaces XML layout inflation entirely.

  • Surface applies background and elevation effects.

  • MaterialTheme provides colors, typography, and shapes.

At this point, you can run your app. Type in your name, and watch the greeting update instantly — no extra code required to “notify” the UI. That’s reactive programming at work.

Adding a Button and Handling Events

Let’s extend the app further by adding a button to show a custom message.

kotlin
@Composable
fun GreetingWithButton() {
var name by remember { mutableStateOf("") }
var showMessage by remember { mutableStateOf(false) }Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text(“Enter your name”) }
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { showMessage = true }) {
Text(“Greet Me”)
}
Spacer(modifier = Modifier.height(16.dp))
if (showMessage && name.isNotBlank()) {
Text(text = “Hello, $name! Welcome to Jetpack Compose.”)
}
}
}

Key points:

  • showMessage toggles the visibility of a text message.

  • When the button is pressed, the state updates (showMessage = true), and Compose triggers recomposition.

  • Conditional rendering (if (showMessage)) determines which UI elements appear dynamically.

Understanding Recomposition

Every time a state variable like name or showMessage changes, Compose calls the affected composable functions again — this is called recomposition. Unlike imperative programming where you manually modify views, here the framework re-executes UI functions based on the new state.

Don’t worry about performance — Compose intelligently skips parts of the UI that haven’t changed. You only describe what the UI should look like for a given state, not how to update it.

Styling and Layout Enhancements

Jetpack Compose provides modifiers to style and layout components. For example:

kotlin
Button(
onClick = { showMessage = true },
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 8.dp)
) {
Text("Greet Me", style = MaterialTheme.typography.bodyLarge)
}

  • Modifier.fillMaxWidth() makes the button stretch horizontally.

  • Modifier.padding() adds space around the component.

  • Compose supports advanced layouts with Row, Column, Box, LazyColumn (for lists), and more.

Extending with ViewModels for State Management

While remember works well for local UI state, complex apps benefit from ViewModel integration to survive configuration changes. Compose works seamlessly with Android’s ViewModel:

kotlin
class GreetingViewModel : ViewModel() {
var name by mutableStateOf("")
var showMessage by mutableStateOf(false)
}

In your UI:

kotlin
@Composable
fun GreetingScreen(viewModel: GreetingViewModel = viewModel()) {
Column(modifier = Modifier.padding(16.dp)) {
OutlinedTextField(
value = viewModel.name,
onValueChange = { viewModel.name = it },
label = { Text("Enter your name") }
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = { viewModel.showMessage = true }) {
Text("Greet Me")
}
Spacer(modifier = Modifier.height(16.dp))
if (viewModel.showMessage && viewModel.name.isNotBlank()) {
Text(text = "Hello, ${viewModel.name}! You're using a ViewModel.")
}
}
}

Using ViewModel makes your state lifecycle-aware, ensuring data persists across screen rotations.

Conclusion

Jetpack Compose fundamentally changes how Android developers build UIs:

  • Declarative and Reactive: Instead of manually managing UI changes, you simply declare the UI based on state.

  • Less Boilerplate: No more XML layouts, adapters, or complex view binding.

  • Consistent Theming: Material Design components and theming are baked in.

  • Seamless with Jetpack: Works perfectly with ViewModel, LiveData, Coroutines, and Navigation.

  • Faster Development: Previews let you iterate rapidly without running the full app.

In our example, we built a simple app that takes user input, reacts to button presses, and displays dynamic messages — all with concise, readable code. We explored key concepts like composable functions, state handling, recomposition, event handling, and ViewModel integration.

As apps grow more sophisticated, Jetpack Compose’s declarative model scales gracefully, helping developers write cleaner, more maintainable code. Whether you’re starting a fresh project or migrating from XML, learning Compose is one of the best investments you can make in Android development today.