Google rewrote the Play Store’s UI with Jetpack Compose for up to 50% less code, faster rendering

Abner Li | Mar 10 2022 - 3:19 pm PT

Jetpack Compose is how Google wants Android developers to create app user interfaces going forward. Google today detailed how the Play Store leveraged Jetpack Compose for its UI rewrite.

Google set out to revamp the Play Store’s entire storefront tech stack in 2020 since “existing code was 10+ years old and had incurred tremendous tech debt over countless Android platform releases and feature updates.”

We laid out a multi-year roadmap to update everything in the store from the network layer all the way to the pixel rendering. As part of this we also wanted to adopt a modern, declarative UI framework that would satisfy our product goals around interactivity and user delight.

After looking at the options, it committed to Jetpack Compose, which was still in pre-Alpha and would not hit stable 1.0 until July of 2021.

In terms of developer productivity — “hundreds of engineers” work on the app, and the Google Play team found that “writing UI requires much less code, sometimes up to 50%” due to declarative UI framework nature. For example, the ratings table on app listings went from about 350 lines of Java and 55 lines of XML to around 210 lines of Kotlin. Another highlight is how it’s easier to add animations and other motion features, like the download/update ring around app icons.

Performance was the other big consideration:

By rolling out baseline profiles, Play Store saw a decrease in initial page rendering time on its search results page of 40%. That’s huge!

While creating heavily re-used UI components in Play Store that were used frequently in scrolling situations, we found that unnecessary recompositions were adding up to missed frame times and thus jank. We built a Modifier to easily spot these recompositions in our debug settings as well. By applying these techniques to our UI components, we were able to reduce jank by 10-15%.

Noting a “big step-up for code quality and health,” Google has been using Jetpack Compose for over a year now to write UI code with “all new Play Store features are built on top of this framework.”