Previews and Hot Reload
Iterate quickly with Compose previews.
Previews and Hot Reload is a free Android Academy lesson on CoddyKit — lesson 4 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.
Design-Time Previews
One of Compose's best features is the @Preview: you can see a composable rendered inside Android Studio without running the app on a device or emulator.
The @Preview Annotation
Add @Preview above a @Composable function. Android Studio renders it in the design pane.
@Preview
@Composable
fun GreetingPreview() {
Greeting(name = "Preview")
}Previews Need No Parameters
A preview function must be callable with no arguments. So you create a wrapper composable that supplies sample data, then preview that wrapper.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada", followers = 42)
}Naming Preview Functions
By convention, preview wrappers are named after the composable plus the suffix Preview, e.g. GreetingPreview. This keeps them easy to find and signals they are not used in production.
Preview Parameters
@Preview accepts arguments to tweak the rendering, such as showBackground, name, and widthDp.
@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
Greeting(name = "Hi")
}showBackground
By default a preview has a transparent background. Pass showBackground = true to render an opaque surface, which makes text easier to see during design.
Multiple Previews
You can stack several @Preview annotations on one function to see different configurations side by side — for example a small and a large width.
@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
HomeScreen()
}Interactive Preview
Android Studio offers an Interactive Mode for previews. It lets you click buttons and trigger state changes right inside the preview, without deploying the app.
Live Edit / Hot Reload
With Live Edit, edits to composable bodies appear almost instantly in the preview and even on a running device — no full rebuild needed. This dramatically speeds up the design loop.
Previews Are Free
Preview functions are stripped from your release build, so adding many previews costs nothing at runtime. Use them liberally to document and test each composable visually.
A Full Example
Here is a composable plus its preview. Open the design pane to see it render instantly.
@Composable
fun Badge(label: String) {
Text(text = label, color = Color.White)
}
@Preview(showBackground = true)
@Composable
fun BadgePreview() {
Badge(label = "NEW")
}Quick Check
Why must a @Preview function take no parameters?
Recap
Previews speed up Compose development:
- Add
@Previewabove a no-arg composable. - Use options like
showBackgroundandwidthDp. - Stack multiple previews; use Interactive Mode and Live Edit for fast iteration.
Frequently asked questions
Is the “Previews and Hot Reload” lesson free?
Yes — the full text of “Previews and Hot Reload” 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 “Previews and Hot Reload”?
Iterate quickly with Compose previews. 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 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Previews and Hot Reload” 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 Is Jetpack Compose?
- Your First Composable
- Text, Image, and Button
- Previews and Hot Reload