Material3-Lottie-Expressive-Demo

This project is a showcase of using Material 3 expressive UI components and Lottie animations in a Jetpack Compose Android application. It includes interactive and animated UI examples to help understand how to implement and customize modern UI elements effectively.

---

🌟 Key Features

• 🎞️ Lottie Animation support using lottie-compose

• 🎨 Change individual component colors in Lottie using dynamic properties

• 🌀 Integration of Material 3 Expressive Components:

  • CircularProgressIndicator
  • CircularWavyProgressIndicator
  • ContainedLoadingIndicator
  • VerticalSlider
  • Pull-to-Refresh (using Accompanist SwipeRefresh)

• 🎯 Smooth animations, theme-aware design, and user interaction

---

🎯 Purpose

This project was built to:

• Practice the use of Lottie animations in Jetpack Compose
• Understand how to dynamically modify Lottie layers such as changing colors
• Experiment with Material 3 expressive UI elements
• Learn how to implement pull-to-refresh animations in Compose
• Explore building fluid, reactive UIs in a declarative style

---

📚 Concepts Practiced

• Jetpack Compose fundamentals
• Material 3 theming and components
• Animation principles using Lottie
• Dynamic customization of Lottie via key paths and properties
• Swipe-to-refresh gesture handling with smooth indicators
• Kotlin state handling and recomposition for animation updates

---

🧩 Material 3 Expressive Components Used

Component	Description
CircularProgressIndicator	A standard circular loading spinner with customizable progress and size
CircularWavyProgressIndicator	A wavy animated circular loader offering a more expressive alternative
ContainedLoadingIndicator	A button-like indicator with a built-in loader
VerticalSlider	A vertical slider for value selection with steps and ranges
SwipeRefresh	Pull-to-refresh component integrated with any scrolling content

---

🎞️ Lottie Animation Customization

This app demonstrates how to:

• Integrate .json animations from LottieFiles
• Control animation playback (speed, loop, etc.)
• Handle loading and failure gracefully
• Change specific layer colors dynamically using key paths

---

📌 Benefits

• Modern UI practices using Material 3 and animations
• Clean architecture using Jetpack Compose
• Enhanced user experience with feedback-driven interactions
• Theme-aware design adapting to dark and light modes

---

🛠 Tools & Libraries

• Kotlin
• Jetpack Compose
• Material 3 Expressive
• Lottie for Compose

---