Writing a @Composable Function
Define your own reusable UI function.
Writing a @Composable Function is a free Jetpack Compose 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 Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What You Will Build
In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀
It Starts With @Composable
A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.
@Composable
fun Greeting() {
Text("Hello!")
}Name It Like a Type
Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.
They Return Unit
Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.
@Composable
fun Welcome() {
Text("Welcome aboard")
}Pass Data With Parameters
Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.
@Composable
fun Greeting(name: String) {
Text("Hello, " + name)
}Default Values Help
Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.
@Composable
fun Greeting(name: String = "World") {
Text("Hello, " + name)
}Built-in Composables
You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.
Import What You Use
When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.
Keep Functions Small
Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.
No Return, Just Calls
Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.
@Composable
fun Card() {
Text("Title")
Text("Subtitle")
}It Is Still Kotlin
A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.
@Composable
fun Status(online: Boolean) {
if (online) Text("Online")
else Text("Offline")
}Quick Check
Time for a quick check on what defines a Composable.
Recap
You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉
Frequently asked questions
Is the “Writing a @Composable Function” lesson free?
Yes — the full text of “Writing a @Composable Function” is free to read here on the web, and the Jetpack Compose 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 Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Writing a @Composable Function”?
Define your own reusable UI function. You practise Jetpack Compose 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 Jetpack Compose Academy?
No prior experience is required. Jetpack Compose 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 “Writing a @Composable Function” 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 Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose 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
- Writing a @Composable Function
- Live Previews with @Preview
- Calling Composables from Composables
- setContent: Where Your UI Begins