Jetpack Compose: Material Catalog and Compose Integration Demos

There are many sample projects available for Jetpack Compose, but some often-overlooked gems reside in the Compose source code itself. In this blog, I will discuss two of the most useful examples: the Material Catalog and the Compose Integration Demos.

Advantages of using these demo apps:

1. Centralized Resource for Compose Features
   These demos serve as a comprehensive and centralized source for exploring Compose features. In my opinion, they are far more efficient than searching on StackOverflow, Google, or even asking ChatGPT.
2. Access to the Latest Code Updates
   By using these demos, you can experiment with the most up-to-date changes in Compose. Whether the Compose team introduces new features that could benefit your project or makes changes that might break your app, these demos allow you to plan months in advance.

Downloading the code

I believe the first, and perhaps the only, obstacle to using these demo apps is downloading the source code. These projects are embedded within the AndroidX source code, which requires a considerable amount of time, patience, and disk space to download.

The detailed instructions can be found here:

https://github.com/androidx/androidx/blob/androidx-main/docs/onboarding.md

To summarize, you need to do perform the following steps:

// Download the repo tool
test -d ~/bin || mkdir ~/bin
curl https://storage.googleapis.com/git-repo-downloads/repo \
    > ~/bin/repo && chmod 700 ~/bin/repo

// Download the source code
mkdir androidx-main && cd androidx-main
repo init -u https://android.googlesource.com/platform/manifest \
    -b androidx-main --partial-clone --clone-filter=blob:limit=10M
repo sync -c -j32 // If server returns 429, make this -j smaller

// Starting the IDE, loading all modules
./frameworks/support/studiow a
// Starting the IDE, loading only compose modules
./frameworks/support/studiow c

The studiow script downloads a recent version of Android Studio and uses it to load the AndroidX project. Once the AndroidX project is loaded, the Material Catalog and Compose Integration Demos should be available in the configurations dropdown menu.

androidx

material catalog

The screen capture above showcases the UI of the Material Catalog app. If you find a feature that fits your use case, you can quickly locate its source code by searching for the sample’s title directly in the IDE.

compose integration demos

The screen capture above showcases the UI of the Compose Integration Demos app. This demo app covers nearly every aspect of the Compose project, making it an incredibly useful tool for exploring and searching Compose features.