explaingit

gurupreet/composecookbook

★ 6,823KotlinAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((ComposeCookBook))
    What it does
      Compose UI demos
      Widget examples
      App pattern demos
    Demo Screens
      Spotify clone
      Instagram clone
      Gmail clone
    Tech Stack
      Kotlin
      Jetpack Compose
      Retrofit
      Room
    Architecture
      MVVM pattern
      MVI pattern
      Kotlin Flow
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Browse and run working examples of Jetpack Compose widgets, buttons, sliders, animations, dialogs, to learn how each one works.

USE CASE 2

Copy a Compose demo screen styled after Spotify or Instagram as a starting point for your own app's layout.

USE CASE 3

Study MVVM and MVI architecture patterns in a real Compose app that integrates Retrofit for networking and Room for local storage.

USE CASE 4

Find and adapt a specific Compose pattern such as dark mode theming, lazy lists, or custom animations for your own project.

Tech stack

KotlinJetpack ComposeAndroidRetrofitRoomKotlin Flow

Getting it running

Difficulty · easy Time to first run · 30min

Requires Android Studio Bumblebee or later and JDK 11 to build and run the project.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me the ComposeCookBook implementation of the Spotify demo screen and explain how the scrollable layout and header collapse are built in Jetpack Compose.
Prompt 2
How do I implement a bottom navigation bar with NavController in Jetpack Compose the same way ComposeCookBook does it?
Prompt 3
Copy the animation examples from ComposeCookBook and adapt them for a loading skeleton transition in my own Compose screen.
Prompt 4
Walk me through the MVVM architecture and Kotlin Flow setup in the ComposeCookBook crypto price screen so I can apply the same pattern to my own app.
Prompt 5
How does ComposeCookBook implement dark mode theming so I can add the same toggle to my Jetpack Compose app?
Open on GitHub → Explain another repo

← gurupreet on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.