ComposeCookBook
A Collection on all Jetpack compose UI elements, Layouts, Widgets and Demo screens to see it's potential
Sample Android app demonstrating hundreds of Jetpack Compose UI components, animations, and layouts, including demo screens styled after Spotify, Instagram, and Gmail. A hands-on reference for developers learning Compose.
ComposeCookBook is a sample Android app that demonstrates the full range of UI building blocks available in Jetpack Compose, which is Android's newer approach to building app screens. Instead of designing layouts in separate XML files, Jetpack Compose lets you describe your UI directly in Kotlin code, updating what appears on screen as data changes without manual synchronization.
The repository is organized as a working app you can install and run on an Android device or emulator. It covers individual widgets such as buttons, sliders, cards, and text fields; layout structures for arranging those widgets; animations for transitions and state changes; and theme support including dark mode. A dedicated section reproduces familiar app interfaces, with demo screens that look like Spotify, Instagram, Gmail, TikTok, and others, so you can study how real-world layouts are put together in Compose.
Beyond static screens, the cookbook also includes examples of full app patterns: a crypto price app using MVVM architecture, a movie browser using MVI, and a dating app UI demo. These integrate common Android tools including Retrofit for network requests, Room for local database storage, and Kotlin Flow and LiveData for handling data that changes over time.
The project is aimed at Android developers learning Jetpack Compose or looking for concrete examples to copy and adapt. Each section isolates a specific concept, so you can jump to animations, lists, or dialogs without reading through unrelated code. The repository asks for Android Studio Bumblebee or later and JDK 11 to build.
Contributions are welcomed, with a clear structure for where to add new widgets, demo UIs, or feature showcases, and a requirement that all additions also work correctly in dark mode.
Where it fits
- Browse and run working examples of Jetpack Compose widgets, buttons, sliders, animations, dialogs, to learn how each one works.
- Copy a Compose demo screen styled after Spotify or Instagram as a starting point for your own app's layout.
- Study MVVM and MVI architecture patterns in a real Compose app that integrates Retrofit for networking and Room for local storage.
- Find and adapt a specific Compose pattern such as dark mode theming, lazy lists, or custom animations for your own project.