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:

• [x] Backdrop
• [x] Inventory
• [x] Cart
• [ ] Details

🧑‍💻 Development setup

• Android Studio Dolphin 2021.3.1 Canary 3 or newer
• Compose 1.1.0

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 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
  • Motion in Shrine
  • TopAppBar Text <-> Search field
  • Navigation menu items

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
  • Color, shape, and typography
  • Shrine theme
• 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

• Compose Material
  • Compose Material reference docs
  • Compose Material Components layout guide
• General Compose
  • Tutorial
  • Animation
  • Other guides
  • Sample apps on GitHub
• Design resources
  • "Slot" method in Figma - YouTube, Community file
  • Material studies
• Other tools
  • scrcpy - mirrors physical Android devices on desktop
  • Direct - animation spec tool made by Google
• Kotlin resources
  • Learn Kotlin by example
  • Beginner Kotlin course on Codeacademy

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.