Your First Composable — Android Course

What you'll learn

Time to write real Compose. A composable is just a function that describes a piece of UI — and the @Preview annotation lets you see it render instantly, right in the editor, without launching the app. That fast feedback loop is what makes Compose a joy to work in.

By the end you'll be able to:

Write a composable function with @Composable
Display text with the Text composable
See it render with @Preview
Explain the anatomy and naming of composables

The @Composable annotation

Any function annotated with @Composable can emit UI and call other composables. That annotation is what turns an ordinary Kotlin function into a building block of your interface. Composables can only be called from other composables — that's how Compose keeps the UI tree consistent.

Displaying text

Text is the most fundamental composable — it draws a string on screen. You'll use it constantly. Here's a complete, previewable example:

WelcomeMessage.kt

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun WelcomeMessage() {
    Text(text = "Welcome to Compose!")
}

@Preview(showBackground = true)
@Composable
fun WelcomeMessagePreview() {
    WelcomeMessage()
}

9:41

Welcome to Compose!

WelcomeMessage() — how this renders on a device

The @Preview

Add @Preview above a composable (that takes no required parameters) and Android Studio renders it in a panel beside your code — updating as you type. showBackground = truegives it a solid background so text is easy to see. This is the workflow: write a composable, preview it, tweak, repeat — no build-and-run cycle needed.

Key idea

Previews are your superpower. You can add many previews for one screen — different data, light and dark themes, small and large fonts — and see them all at once. Because a composable is just a function, previewing it is as simple as calling it with sample data.

Anatomy of a composable

A few conventions define a well-formed composable:

Annotated with @Composable — this is what lets it emit UI.
Named in PascalCase, like a noun — WelcomeMessage, ProfileCard — because it represents a thing on screen, not an action.
Returns Unit (nothing). A composable doesn't return UI — it emits it by calling other composables like Text.

Note

That last point trips people up: Text(...) doesn't give you back an object to store. Calling it is the act of placing text in the UI. You compose interfaces by callingcomposables inside other composables — that's the whole model.

Recap & quick check

Key takeaways

A composable is a function marked @Composable that emits UI and can call other composables.
Text is the fundamental composable for showing a string.
@Preview renders a composable in the editor instantly — no need to run the app.
You can have many previews for one composable (different data, themes, font sizes).
Composables are PascalCase, return Unit, and emit UI by calling other composables (not by returning).

Quick check

1. What can a function do once it's marked @Composable?

2. Which composable displays a string?

3. What does @Preview do?

4. How should composable functions be named?

5. How does a composable produce UI?

You wrote your first UI! Next we'll make composables reusable with parameters and meet recomposition.