Preview annotation in Android Kotlin

Introduction

The Preview annotation helps you see how your UI looks without running the app on a device. It saves time by showing a quick picture of your screen design.

When you want to check how a screen or component looks while coding.

When you want to quickly test different UI styles or themes.

When you want to share your UI design with teammates without running the app.

When you want to catch layout mistakes early before running the app.

Syntax

Android Kotlin

@Preview(showBackground = true)
@Composable
fun MyPreview() {
    // UI code here
}

Use @Preview above a @Composable function to show its design in Android Studio.

The parameter showBackground = true adds a simple background to better see the UI.

Examples

This shows a simple text preview without background.

Android Kotlin

@Preview
@Composable
fun SimplePreview() {
    Text("Hello Preview")
}

This preview adds a background so the text is easier to see.

Android Kotlin

@Preview(showBackground = true)
@Composable
fun BackgroundPreview() {
    Text("Hello with background")
}

You can name previews to identify them in the preview panel.

Android Kotlin

@Preview(name = "Light Mode")
@Composable
fun LightPreview() {
    Text("Light theme preview")
}

Sample App

This program shows a text message in the preview window with a background. You can see how the text looks without running the app.

Android Kotlin

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

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Text("Welcome to Preview Annotation!")
}

Important Notes

Previews do not run your app code; they only render the UI part.

You can create multiple previews to test different UI states or themes.

If your preview does not show, try rebuilding the project or restarting Android Studio.

Summary

@Preview shows your UI design quickly inside Android Studio.

Use showBackground = true to add a background for better visibility.

Previews help you save time by avoiding running the full app.