Introducing Showkase: A Library to Organize, Discover, and Visualize Your Jetpack Compose Elements
Over the last few years, Android™ development has gone through significant changes in how apps are structured, the language used for development, the tooling & libraries that speed up our development, and the improvements in testing apps. What didn’t change in all these years is the Android UI toolkit.
This changes with Jetpack Compose — Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android and is a paradigm shift in Android development as we know it. The move to using declarative programming for describing UI is a welcome change and one that is prevalent across platforms with the introduction of frameworks like React for web, SwiftUI for iOS, and Flutter for cross-platform development.
Declarative UI frameworks encourage the creation of reusable components that can be shared across different parts of the app. We know that reusability is a good engineering practice but what often ends up happening is a little more nuanced.
What’s The Problem?
- As developers add new UI components, the codebase ends up with hundreds of components that are often hard to visualize.
- 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. You might be able to use your IDE to search for a component if you used a very descriptive name. However, naming things is hard and descriptive names still do not always help us find the right component to use.
- The same problems extend to other aspects of your design system like colors, typography, icons, etc.
- In order to get around this, most mobile teams build their version of a “component browser” that lets you visualize your design system. This is often maintained manually with little-to-no tooling around it.
If you have ever worked on any frontend platform, you can probably relate to some of these issues that contribute to a sub-par developer experience. As engineers, our job is to make software do this work for us.
Introducing Showkase
Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements. With minimal configuration it auto-generates a UI browser that organizes your design system for you.
Showkase takes it a step further and auto-generates permutations of your components in common situations like dark mode, right-to-left layouts, scaled fonts, etc. This helps to preview your components in common scenarios without the need to do any additional work. This is helpful in detecting issues early and fixing them while you are still developing the components.
How do I use Showkase?
Setting up Showkase just requires a few simple steps-
Step 1: Add the dependency to your module’s build.gradle file. If you have a multi-module setup, add this dependency to all the modules with UI elements that should be displayed inside the Showkase browser.
Step 2: Add the relevant annotations for every supported UI element that should be a part of the Showkase browser.
Showkase provides different annotations to mark UI elements that you’d like to see inside the Showkase UI browser.
For @Composable components, use the @ShowkaseComposable annotation:
Showkase provides first class support for @Preview. If you are already using the @Preview annotation that Compose provides for previewing Composable in Android Studio, you don’t need to do anything else.
For color properties, you can add the @ShowkaseColor annotation to the field:
Similarly, for TextStyle properties that are useful for representing typography in Jetpack Compose, you can add the @ShowkaseTypography annotation to the field:
Step 3: Define an implementation of the ShowkaseRootModule interface in your root module.
Step 4: Showkase is now ready to use!
Showkase comes with a predefined Activity that does the necessary scaffolding for accessing the UI browser with the elements you annotated. Typically you would start this activity from the debug menu of your app but you are free to start this from any place you like! A nice helper function createShowkaseBrowserIntent is generated for you — just start the intent and you are good to go.
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.
If you like what you see and are experimenting with Jetpack Compose, give Showkase a spin and let us know what you think.
How can we improve Showkase further?
We are thinking of ways in which we can extend Showkase. Here are some ideas that we are thinking about.
- Hooks for screenshot testing. Since all your components are a part of the Showkase browser, this would be a good opportunity to make this a part of your CI and detect differences in components across pull requests.
- Support for other UI elements that are a part of your design system (like icons, spacing, etc).
- Generating a web version of the Showkase browser with documentation, search, and screenshots.
Acknowledgements
Showkase was inspired by a similar internal tool that was built at Airbnb by Nathanael Silverman.
Many thanks to Eli Hart, Ben Schwab, Laura Kelly, Andreas Rossbacher, Gaurav Mathur, Laura Skelton, Madison Capps, Steve Flanders, Shreya Sharma, Brett Bukowski, Lauren Mackevich & David Shariff for helping with various aspects of Showkase.
Airbnb is always looking for talented Android engineers such as yourself. Check out our careers page for current openings and apply!
All trademarks, registered trademarks, product names, brands, are the property of their respective owners. Any use of such in this website are for identification purposes only and do not imply endorsement.
Android is a trademark of Google LLC.
