Skip to content

Exploring ways of using Preview annotation to view Composables ๐Ÿ‘€

Notifications You must be signed in to change notification settings

nimisaya/android-previews

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

@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

About

Exploring ways of using Preview annotation to view Composables ๐Ÿ‘€

Topics

Resources

Stars

Watchers

Forks

Languages