Skip to content

Latest commit

History

History
64 lines (44 loc) 路 3.63 KB

README.md

File metadata and controls

64 lines (44 loc) 路 3.63 KB

@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?

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:

Open preview pane in Android Studio

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

Run preview 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.

Select a preview group