Android Academy · Lesson

What a Composable Is

Functions that describe UI.

What a Composable Is is a free Android Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Composable?

In Jetpack Compose you build screens by writing functions, not by inflating XML layouts. A composable is just a Kotlin function that describes a piece of your user interface.

You mark such a function with the @Composable annotation. That tells the Compose compiler this function can emit UI and can call other composable functions.

The @Composable Annotation

Adding @Composable above a function unlocks Compose's superpowers. Inside it, you can call other composables like Text or Column.

By convention, composable function names start with an uppercase letter, just like classes. This makes UI functions easy to spot in your code.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

UI Described in Kotlin

A composable does not return a View object. Instead, it emits UI as a side effect when Compose runs it. You simply describe what should appear on screen.

This is called a declarative style: you state what the UI looks like for the current data, and Compose figures out how to draw it.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composables Call Composables

The real power comes from nesting. A composable can call other composables, letting you build complex screens from small, reusable pieces.

Here a parent composable calls a child composable. Compose runs them top to bottom and arranges the emitted UI.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

Functions Without Return Values

Most composables return Unit, meaning they return nothing useful. Their job is to emit UI, not to hand back a value.

So you call a composable for its effect on the screen, not to capture a result. This feels different from regular functions, but it quickly becomes natural.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

Passing Data as Parameters

Composables can take parameters, just like normal Kotlin functions. This lets the same composable display different data.

Here Greeting accepts a name and shows it. Passing data in makes your composables flexible and reusable across the app.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

Reusing a Composable

Because composables are functions, you can call one many times with different arguments. Each call emits its own copy of the UI.

This is how you avoid repeating yourself: write the UI once, then reuse it wherever you need it.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Where Composables Live

You place composables inside your Android activity using setContent. That block is the entry point where Compose takes over the screen.

Inside setContent you call your top-level composable, and everything it emits becomes your app's UI.

setContent {
    Greeting("World")
}

Recomposition Basics

When the data a composable reads changes, Compose re-runs that function to update the screen. This re-running is called recomposition.

You don't manually update the UI. You change the data, and Compose recomposes the affected composables automatically. This keeps the screen in sync with your state.

Keep Composables Small

A good habit is to make each composable do one clear job. Small, focused composables are easier to read, test, and reuse.

If a function grows too large, split it into smaller composables and call them together. Your future self will thank you.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

Imports You Will See

Composables come from the Compose libraries. You'll often import androidx.compose.runtime.Composable for the annotation and androidx.compose.material3.Text for text.

Android Studio usually adds these imports for you. Knowing where they come from helps when an import is missing.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

Quick Check

Let's review what makes a function a composable.

Recap

You learned that a composable is a Kotlin function marked with @Composable that describes UI declaratively. Composables can take parameters, call other composables, and are named in uppercase.

They return Unit and emit UI instead of returning a value. When data changes, Compose recomposes them to update the screen. Next, you'll display real text and stack views with Column.

Frequently asked questions

Is the “What a Composable Is” lesson free?

Yes — the full text of “What a Composable Is” is free to read here on the web, and the Android Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “What a Composable Is”?

Functions that describe UI. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “What a Composable Is” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy