Live Previews with @Preview
Iterate on UI without rebuilding the whole app.
Live Previews with @Preview is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 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.
See UI Without Running
Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡
Add the Annotation
Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Previews Need No Arguments
A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.
Wrap Your Real Composable
Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Name It With a Title
Add name to label the preview in the panel. Helpful when one file shows several previews at once.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Show System Decorations
Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Just the Background
If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Many Previews at Once
Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.
Preview Different Sizes
Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interactive Preview
Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.
Previews Stay Out of the App
Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.
Quick Check
A quick check on how previews work.
Recap
You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨
Frequently asked questions
Is the “Live Previews with @Preview” lesson free?
Yes — the full text of “Live Previews with @Preview” 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 “Live Previews with @Preview”?
Iterate on UI without rebuilding the whole app. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Live Previews with @Preview” 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