Airbnb Showkase aims to help developers organize, discover, and visualize their Jetpack Compose UI elements by synthesizing a browser activity based on specific code annotations.
By reducing the amount of manual work needed in maintaining your design system/UI components and making it more discoverable, Showkase helps in driving adoption of the reusable components in your Android codebase.
While Airbnb is not using Jetpack Compose yet for their official app, they have already started preparing the tooling to adopt this new technology when it becomes production-ready. As Airbnb senior software engineer Vinay Gaba explains, Showkase is similar to and inspired by another tool that Airbnb is currently using for classic Android UIs. According to Gaba, tools like Showkase are useful when your library of reusable UI components grows too much to prevent it from becoming unmanageable.
Discoverability of these components is a challenge and there is no easy way to search. As a result, your codebase often ends up with duplicate components that offer similar functionality.
This problems exists not only with components but also with colors, typographic styles, and other reusable properties in Android apps.
Using Showkase, Jetpack Compose elements can be searched based on their names or the group they belong to. For each component, Showkase is able to display a preview of how it looks like in different configurations, e.g. in normal and dark mode, with scaled fonts, etc. Additionally, the browser provides direct accees to the documentation associated to each component.
Once you have installed Showkase by adding its dependency to your build.gradle file, you annotate every UI components in your codebase that you would like to be included in the Showkase catalog. For example, you can use the standard Android Studio @Preview annotation for @Composable elements:
@Preview(name = "Custom name for component", group = "Custom group name")
@Composable
fun MyComponent() { ... }
Similarly, you can use @ShowkaseColor for Color properties, @ShowkaseTypography for TextStyle properties and so on:
@ShowkaseColor(name = "Primary Color", group = "Material Design")
val primaryColor = Color(0xFF6200EE)
@ShowkaseTypography(name = "Custom name for style", group = "Custom group name")
val h1 = TextStyle(
...
)
As a final step, you define an implementation of the ShowkaseRootModule interface in your root module and start the Showkase activity from anywhere you like:
@ShowkaseRoot
class MyRootModule: ShowkaseRootModule
...
startActivity(createShowkaseBrowserIntent(this))
...
Just like Jetpack Compose itself, Showkase is not yet stable and subject to API changes.
Jetpack Compose is a Kotlin-based toolkit developed at Google that enables the creation of declarative UIs for Android apps. It makes it possible to create UI by connecting composable functions, similarly to the approach React popularized for Web apps. According to Google, Jetpack Compose allows developers to accelerate development and reduce code. While extremely appealing, Jetpack Compose is still in alpha and its API subject to planned changes, so it is not advisable to use it in production apps.
