DOCSEARCHbyAlgolia
Submit Docs

Material 3 Expressive Catalog

repository·main·Indexed 41 days ago

https://github.com/meticha/material-3-expressive-catalog

A demonstration application showcasing Material 3 expressive components and UI patterns using Jetpack Compose. It provides interactive examples of buttons, button groups, progress indicators, bottom app bars, FAB menus, and floating toolbars for Android developers.

Tokens
491
Snippets
1
Records
3
Agent score
3%

What's inside Material 3 Expressive Catalog

  1. Explore available Material 3 components and patterns

    main

    The catalog provides interactive examples of the following Material 3 components and expressive UI patterns:

    • Buttons: Various button types and styles.
    • Button Groups: Standard and connected button groups used for selection.
    • Progress Indicators: Linear, circular, and refresh indicators.
    • Bottom App Bar: Different configurations, including variants with Floating Action Buttons (FABs).
    • FAB Menu: Expressive Floating Action Button with menu options.
    • Floating Toolbar: Contextual toolbars that appear dynamically.

  2. Tech stack and key libraries used

    main

    The project is built with a modern Android development stack. When building on top of this project or studying its implementation, note the following dependencies:

    UI Toolkit

    • Jetpack Compose: Declarative UI toolkit.
    • Material 3 Expressive Components: Implementation of the latest Material Design guidelines.
    • Material Icons Extended: Rich set of icons.

    Architecture & Navigation

    • Android Jetpack Libraries: Core libraries like ViewModel and Lifecycle.
    • Hilt: Used for dependency injection.
    • Jetpack Navigation 3: For navigating between composable screens.

    Data & Build Tools

    • Kotlinx Serialization: For JSON serialization/deserialization.
    • Spotless & KtLint: Used for code formatting, including io.nlopez.compose.rules:ktlint for Compose-specific rules.

  3. Get started with Material 3 Expressive Catalog

    main

    To use this project as a reference for Material 3 expressive UI patterns, follow these steps to set up the demonstration application locally:

    1. Clone the repository using Git:
      git clone https://github.com/cavin-macwan/material-3-expressive-catalog.git
    2. Open in Android Studio: Launch Android Studio and open the cloned project folder.
    3. Build and Run: Execute the build process and run the application on an Android emulator or a physical device (requires API level 31+).
    git clone https://github.com/cavin-macwan/material-3-expressive-catalog.git