Previewing Your UI
Use @Preview to iterate fast.
Previewing Your UI is a free Android Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, and your progress syncs across the web and the CoddyKit app. The Android Academy course includes 4 lessons in total.
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.
Learn Kotlin with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 36
- Lessons
- 152
Frequently Asked Questions
Is the “Previewing Your UI” lesson free?
Yes — any 3 lessons of the Android Academy learning path, including “Previewing Your UI”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Android Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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
- What a Composable Is
- Text and Column Basics
- Previewing Your UI
- Building a Profile Card