Jetpack Compose Basics

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Understand Jetpack Compose Basics without any of the intimidation
Be able to run Android Studio/Compose code yourself
Apply this concept immediately in a real project

Let's think about it for a second

In the past, Android UI was written in separate XML files and wired up from Kotlin code (an imperative style — 'update this view like so'). Jetpack Compose is a declarative UI toolkit — inside an `@Composable` function, you write directly in Kotlin what you want the UI to look like, and whenever the data changes, Compose automatically redraws the UI — this is similar to the declarative UI concept in React/Flutter.

Let's connect this to a real-world scenario

If you write `@Composable fun Greeting(name: String) { Text("Hello, $name!") }`, calling `Greeting("Aye Aye")` will display the text 'Hello, Aye Aye!' on screen — no XML layout file needed at all. Add the `@Preview` annotation and you can view the UI instantly inside Android Studio, no emulator required.

Jetpack Compose = Google's modern declarative UI toolkit (no XML needed)
@Composable function = a function that describes a UI component
When data changes, Compose automatically redraws the UI

Let's look at an example together

kotlin

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

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Greeting(name = "Aye Aye")
}

You should see

You should immediately see the text 'Hello, Aye Aye!' in the Android Studio Preview panel, with no need to run the emulator.

Try it in 5 minutes

Write your own `Greeting` composable and check it in the `@Preview` panel — change the name parameter and confirm the preview auto-updates.

A quick word of caution

`@Preview` is for a quick look at your layout — interactive behavior like button clicks and navigation can only be properly tested on an emulator (or physical device).

Easy traps

Forgetting to add the `@Composable` annotation to a function — Compose won't recognize it as a UI function
Trying to write Composable functions in the old XML-era imperative style (manually updating view references) — you should follow Compose's declarative pattern instead

Now try it yourself

Write your own `Greeting` composable and check it in the `@Preview` panel — change the name parameter and confirm the preview auto-updates.

You'll know it worked when: You should immediately see the text 'Hello, Aye Aye!' in the Android Studio Preview panel, with no need to run the emulator.