/Shrine-Compose-Stream

Repo for building Shrine with Jetpack Compose, on Material Design Live: https://bit.ly/399Y1XA

Primary LanguageKotlinApache License 2.0Apache-2.0

Shrine Compose livestream

Repo for building Shrine with Jetpack Compose, on Material Design Live.

Shrine is an e-commerce Material Design case study: https://material.io/design/material-studies/shrine.html. This is a prototype, focused on translating the design intent, intended for teaching designers and those new to Jetpack Compose on how to build UI.

Progress:

  • Backdrop
  • Cart
  • Catalog
  • Details

Shrine stickersheet from Material Design website

🧑‍💻 Development setup

Note: Above Studio version required only for specific Animation Inspector features, otherwise Bumblebee 2021.1.1 should still work at a minimum to build and deploy the app

📚 Topics covered

Episode 5 (stream)

  • Adding the Catalog to the Backdrop front layer
    • Create the custom Card
    • Build a weaved list with LazyRow
  • Hook up interaction to add items to the cart

Episode 4 (stream)

  • Creating the expanding Cart BottomSheet
    • Build the collapsed version of Cart
    • Expanded <-> collapsed transition of Cart
  • Add animated Checkout button to expanded cart
  • Hide/show Cart bottom sheet in coordination with Backdrop

Episode 3 (stream)

  • Intro to animation
    • APIs
      • updateTransition
      • AnimatedVisibility
      • AnimatedContent
    • Animation Inspector
  • Animating parts of Backdrop

Episode 2 (stream)

  • Intro to state management
  • Slot-based approach in Compose
  • Creating the navigation Backdrop menu
    • Layers
      • Placeholder front layer
      • TopAppBar
      • Back layer with menu items
    • State
      • Show selection of nav menu item

Episode 1 (stream)

  • Compose basics on building UI
  • Material Theming
  • Using Material components in Compose
    • Button, Card, Icons
  • Creating a List with a complex list item
  • Using @Preview for your design components
  • Deploying our first screen to a device!

🧰 Helpful resources

Disclaimer

This project is not an official Google project. It is not supported by Google and Google specifically disclaims all warranties as to its quality, merchantability, or fitness for a particular purpose.