@Preview

---

The Preview annotation (@Preview) allows us to quickly and easily look at UI created using Jetpack Compose in Android Studio. In this repo I explore some of the different ways we can use it.

What's in this repo?

• Basic Preview
• Show a background
• Set dimensions
• Change the font scale
• Specify API level
• Check out how it looks on different devices
• Stack previews
• Multipreview annotation
• Combining Multipreviews - includes using two languages
• Using Preview Parameters

Getting started with Previews

To preview your Composable create a function with both @Preview and @Composable annotations and call the composable you want to preview.

// 1. Create your composable function
@Composable
fun YourComposableFunction() {
    Text(text = "Hello Universe")
}

// 2. Preview your composable
@Preview
@Composable
fun YourComposableFunctionPreview() {
  YourComposableFunction()
}

Build the app and open either "Split" or "Design" view in Android Studio to see your UI:

You can also run the preview to view it in the emulator or on your device:

Once you have your basic preview working you can dive deeper to explore different ways of previewing composables.

Hint: If you don't want to type out @Preview all the time you can simply type prev and it will set up the preview function for you:

@Preview
@Composable
fun () {
    
}

Preview Groups

To view the different preview groups go to the dropdown in the top left corner of the preview pane and select the group you are interested in.