Android Academy · Lesson

Previewing Your UI

Use @Preview to iterate fast.

Previewing Your UI is a free Android Academy lesson on CoddyKit — lesson 3 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.

Why Previews Help

Building and running an app on a device takes time. Compose offers a faster way to see your UI: the preview.

A preview renders a composable right inside Android Studio, so you can check your layout without launching the full app on an emulator or phone.

The @Preview Annotation

To preview a composable, you create a separate function and mark it with @Preview. Android Studio then shows its rendered output in the design pane.

The preview function itself is also a composable, so it carries both @Preview and @Composable.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("World")
}

Previews Take No Parameters

A preview function must not take parameters. Compose needs to call it on its own, so it cannot supply arguments.

That's why you make a wrapper: the preview calls your real composable and passes in sample data for it to display.

@Preview
@Composable
fun ProfilePreview() {
    ProfileCard(name = "Ada")
}

Naming Preview Functions

A common convention is to name the preview after the composable it shows, ending in Preview. For Greeting, you'd write GreetingPreview.

This makes it obvious which preview belongs to which composable, especially as your file grows.

@Preview
@Composable
fun HeaderPreview() {
    Header()
}

Giving a Preview a Name

You can label a preview with the name parameter. This title appears above the rendered preview in Android Studio.

Helpful names make multiple previews easy to tell apart at a glance.

@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
    ProfileCard("Ada")
}

Showing the Background

By default a preview may render on a transparent backdrop. Set showBackground = true to draw a solid surface behind your composable.

This makes spacing and colors much easier to judge in the design pane.

@Preview(showBackground = true)
@Composable
fun TextPreview() {
    Text("Hello!")
}

Multiple Previews at Once

You can add several @Preview annotations to one function, or write several preview functions. Each renders separately.

This is handy for checking the same UI with different sample data, like a short name and a long name.

@Preview
@Composable
fun ShortNamePreview() {
    Greeting("Ada")
}

@Preview
@Composable
fun LongNamePreview() {
    Greeting("Grace Hopper")
}

Previewing Different Sizes

The widthDp and heightDp parameters set the size of the preview canvas. This lets you test how your layout looks in a small or large area.

Sizing the preview helps catch text that wraps awkwardly or content that overflows.

@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
    Greeting("Hi")
}

Dark Mode Previews

You can preview how your UI looks in dark theme using the uiMode parameter set to night mode. This catches colors that look wrong on dark backgrounds.

Checking both light and dark previews early saves you from surprises later.

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
    ProfileCard("Ada")
}

Interactive and Live Previews

Android Studio can update the preview as you type, so changes appear almost instantly. There's also an interactive mode for clicking around without a full build.

Previews don't replace running the app, but they make designing screens far quicker.

Previews Are Debug Only

Preview functions are tools for development. They are not part of your shipped app and won't appear to users.

So feel free to add as many previews as you like with sample data. They only affect what you see in the IDE.

@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
    InfoBlock()
}

Quick Check

Let's review a key rule about preview functions.

Recap

You learned that @Preview renders a composable inside Android Studio, no device needed. Preview functions take no parameters, so they wrap your real composable with sample data.

Useful options include name, showBackground, widthDp, heightDp, and uiMode for dark mode. Previews are debug-only tools. Next, you'll combine everything to build a real profile card.

Frequently asked questions

Is the “Previewing Your UI” lesson free?

Yes — the full text of “Previewing Your UI” 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 “Previewing Your UI”?

Use @Preview to iterate fast. 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 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Previewing Your UI” 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