Chapter 4: Building User Interfaces with Jetpack Compose

Building User Interfaces with Jetpack Compose. This is where your app stops being boring text in the console and starts looking like a real, beautiful Android app.

We’re in January 2026, and Jetpack Compose is the official, recommended way to build all new Android UIs (the old XML + View system is legacy now). Compose is declarative (you describe what the UI should look like, not how to draw it step-by-step), written in Kotlin, super fast with live previews in Android Studio, and it handles recomposition automatically when data changes.

Think of Compose like LEGO: each piece is a @Composable function, and you snap them together. No more findViewById headaches!

Let’s build this chapter like we’re coding together on your laptop in Airoli — step by step, with copy-paste examples, explanations, analogies, and a full hands-on project at the end.

1. Composable Functions (The Heart of Compose)

A @Composable function is just a regular Kotlin function… but annotated with @Composable. It can call other composables, and Compose turns them into UI elements on screen.

Key rules:

• Can only be called from inside other @Composable functions (or setContent in Activity).
• They are very fast & lightweight — Compose calls them many times during “recomposition” when state changes.
• No return value usually (they emit UI “side effects”).

Basic example (in your MainActivity.kt):

• @Preview → Android Studio shows a live preview in the right panel (super useful!).
• Run the app → You see the text on screen.

2. Layouts: Row, Column, Box (Arranging Things)

These are the main “containers”:

• Column → Stacks children vertically (like a vertical LinearLayout).
• Row → Places children horizontally (like horizontal LinearLayout).
• Box → Stacks children on top of each other (like FrameLayout — great for overlays, backgrounds).

All take a lambda (content) where you put child composables.

Example — a simple profile card:

• Spacer → Invisible gap (like margin).
• Modifier.padding(16.dp) → Adds space around.

3. Text, Buttons, Images, and Modifiers (The Visible Stuff)

• Text → Displays text. Supports styles, colors, alignment.

• Button → Clickable Material button.

• Image → Loads images (from resources, URL, painter).

First, add an image to res/drawable (e.g., download a logo and name it ic_logo.xml or .png).

• Modifier → The Swiss Army knife! Chainable to customize size, padding, color, click, shape, etc.

Common chains:

Analogy: Modifier is like makeup — apply in any order, each changes the “face” of the composable.

4. Material Design Themes and Styling (Make It Pretty & Consistent)

Compose uses Material 3 (Material You) — dynamic colors from wallpaper (on Android 12+), light/dark modes auto.

Wrap your UI in MaterialTheme:

In MainActivity.kt → setContent:

Define theme (create new file Theme.kt):

• Auto dark mode: Use isSystemInDarkTheme() to switch.
• Dynamic colors: dynamicDarkColorScheme(context) pulls from wallpaper.

5. Hands-on: Build a Simple UI Screen (Your First Real Compose Screen!)

Goal: A nice “Welcome” screen with title, subtitle, image placeholder, button, and Material theme.

1. In your project → Open MainActivity.kt
2. Replace the default setContent with this full example:

3. Fix theme — If you don’t have HelloWeblianceTheme, create ui/theme/Theme.kt (Android Studio can generate it via right-click → New → Compose Theme).
4. Run → See your beautiful screen! Resize emulator to see responsiveness.
5. Play:
   • Change colors in theme.
   • Add .clickable { } on Image.
   • Use @Preview parameter uiMode = Configuration.UI_MODE_NIGHT_YES to preview dark mode.

You’ve just built your first real Compose UI! No XML, pure Kotlin, live preview — feels magical, right?

Questions? Want to add state (click button → change text)? Image from URL? Or fix any error? Tell me — next chapter we’ll make it interactive with state & ViewModel. You’re progressing fast — super proud! Keep building! 🚀💜