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 right in the editor, without launching the app. Use that feedback to check one small change at a time.

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()
}

Focused example: keep your generated package and theme. Add the shown APIs to your Compose project using Android Studio imports.

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. A build or preview refresh may still be needed, but you can inspect the component without installing the full app on every iteration.

Key idea

Previews provide fast layout feedback. 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.
UI-emitting composables return Unit (nothing). They don'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.

Practice: one small working feature

Create WelcomeMessage and a parameterless preview wrapper. Display your own welcome text.

Check your result

The same composable appears in the preview and when called inside setContent.

Remember

A preview checks a component layout; it does not establish that device navigation or lifecycle behavior works.

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; refresh or build when needed, then verify device behavior separately.
You can have many previews for one composable (different data, themes, font sizes).
UI-emitting composables use PascalCase and return Unit; composable helpers may return values.

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.