This is a clean, modern, and beautifully animated Android application designed with a primary focus on UI/UX excellence. The entire interface was conceptualized in Figma, imported via Google Stitch, and brought to life using the latest Jetpack Compose tools. This project acts as a playground for experimenting with elegant UI components and seamless user interactions.
The intention behind developing this app was to:
- Explore UI-driven development using Figma + Stitch
- Demonstrate how custom animations, layouts, and transitions can enhance user experience
- Build a portfolio-ready UI demo that showcases Jetpack Compose's flexibility
- Experiment with the latest features from Material 3, Navigation 3, and Lottie
| Feature | Description |
|---|---|
| 🎨 UI via Google Stitch | UI imported from Figma directly using Stitch, retaining layout fidelity |
| 🎞️ Lottie Animations | Multiple animated icons & interactions using Lottie |
| 🧭 Navigation 3 | Modern navigation architecture with clean stack management |
| 🧩 Custom TabRow | Interactive, smooth TabRow with state-based selection UI |
| 📦 LazyColumn & LazyGrid | Efficient lists and grid layouts used for content display |
| 💠 Animated Gradient Card | Gradient animation in Profile screen for aesthetic interaction |
| 🔻 Bottom Navigation | Responsive bottom navigation with dynamic icons and label states |
| 🧵 CenterAlignedTopAppBar | Uses Material 3's modern app bar design |
| 🧑🎨 Material You Styling | Theme colors adapt from user preferences (light/dark mode toggle ready) |
| 🎛️ Custom Components | Reusable Compose components styled with Figma's design specs |
- Home Screen – Responsive grid, entry cards, Lottie icons
- Profile Screen – Contains animated gradient cards, user info section
- Settings / Tabs – Dynamic tabs and toggles
- Navigation Graph – Clean NavHost using Navigation 3
- Global Theme Setup – Light/Dark themes and typography included
- Language: Kotlin
- UI Toolkit: Jetpack Compose + Material 3
- Design Tools: Figma + Google Stitch
- Animations: Lottie
- Architecture: MVVM, modular UI-first layout
- Gradle Setup: Minimal and clean with Compose optimizations
Here’s a visual walkthrough of key screens in the app:
##Displays a personalized dashboard with quick access to main features.##
home.mp4
Shows user information, profile actions, and animated gradient cards.
profile.mp4
First-time entry point to insert Data (just UI)
Displays real-time app alerts and scheduled updates.
