Jetpack Compose Preview like a pro!

Let’s discuss a smarter way to use Jetpack Compose Preview while app development!

Hey Androiders 👋, this is a blog where we’ll discuss how we can use JetpackCompose @Preview in a different way to make our app development more productive!

Before starting of JetpackCompose @Preview let's discuss how we can enable Android projects with required dependencies. We need to add tooling dependencies which will support @Preview annotation in the app:

Simple Composable Preview

Create a new Composable using @Composable annotation:

and create a preview for the above Composable annotated with @Composable and @Preview to show a preview in the Android studio window:

Composable preview in the design window:

UseCases:

Now let’s discuss this differently Preview parameters and use cases where we can update our Preview annotation and make the preview more useful.

Case 1: Light/Dark theme preview:

Output:

Case 2: Preview your entire screen with system UI controls along with different device specifications like in tablets, phones etc:

specs:

Case 3: See preview with enabling background colour for that Composable:

Case 4: To test different user locales, you need to add the locale parameter:

MultiPreview Annotations rescue 🔥:

Using MultiPreview, we can define multiple @Preview annotations and create a defined annotation that we can reuse instead of writing multiple Preview annotations every time. For example, you can use this annotation to preview multiple devices, font sizes, or themes simultaneously without repeating those definitions for every single composable.

See the example code below for how I created MultiPreview class to define reusable DevicePreviews annotation that we can reuse every time where we want multiple device preview

Using @DevicePreviews class:

Output:

Spoiler alert 🤯 !

You can combine multiple multipreview annotations and normal preview annotations, to create a complete set of previews. Combining multipreview annotations doesn’t mean all the different combinations are shown. Instead, each multipreview annotation acts independently and renders only its variants.

Preview action menus🔥:

1. Animation Preview: Using this menu you can inspect animations defined using Jetpack Compose animation framework frame-by-frame. Currently, limited APIs are supported to view animation previews like updateTransition , AnimatedVisibility , CrossFade etc.
2. Interactive Mode: Using this menu we can make a live preview of gestures like click events and check composable in a different state like the check button in enabled/disable mode:

3. Run Preview: Using this menu, we run individually composable in isolation mode on the testing device to see how that particular composable looks on a real device/emulator.

Let’s take a look at the summary of what we have learned:

• How we can enable the Jetpack Compose app for Preview
• How we can use Preview Annotation for composable
• How we can use multi preview to combine multiple Preview and reuse it
• How to use Preview action menus

Wrap Up!

So, that was pretty cool, right? This is all the stuff related to JetpackCompose Preview.

More you can learn at Android Studio support for Compose:

Android Studio support for Compose | Jetpack Compose | Android Developers

Thanks for reading this article. Don’t forget to clap👏/recommend as much as you can and also share📤 with your friends. It means a lot to me.

For more about programming, follow me and MutualMobile Engineering, so you’ll get notified whenever a new article is posted.

You can find our MutualMobile Engineering best articles here.

Also, Let’s become friends on Twitter, GitHub