Hello guys,hope you all good and welcome back.In today’s article we shall learn how to use Airbnb’s Showkase library to visualize android components.This is more of a browser in our android app to help engineers organize, discover, search and visualize Jetpack Compose UI elements. To jump straight to the codebase, check the repo on my github.

Setting up Showkase
To set up showkase lib in our android app, we shall be required to add dependencies in our build gradle as follows.

In order to visualize our android ui elements created in android app, we are required to add certain annotations provided by the showkase lib.We shall start with annotation used while creating composables.In such a scenario, we use the @Preview or @ShowkaseComposable annotation. Check this example below.

Whilst to search,visualize,discover etc Color properties,we use the @ShowkaseColor annotation. Example,

And the last property being the TextStyle, we use the @ShowkaseTypography annotation.Example,

Our last usecase while using showkase involves creating a component that supports multiples styles.A good example was provided by Airbnb library documentation where we have a custom button with multiple styles.The library luckily have these extra properties, the styleName and defaultStyle.The usage for such a circumstance is well captured in this code.

This the code in general for that,

Our second last step is adding the Showkase root class to our android app.A.K.A 👇,

After this, do not forget to rebuild your app, this is critical to make it possible for the library to add packages required and finally call the helper function provided by Showkase in our starter activity, eg,

And thats all guys, thanks for reading this.

The final source code can be found here.By any chance you have a query regarding this, do not hesitate to reach out on my twitter