🎨 Compose Practice Hub

📖 About This Project

This repository is designed to help Android developers learn Jetpack Compose through practical, real-world UI implementations. Each branch focuses on a specific UI pattern, component, or concept, making it easy to:

• 🎯 Focus on one concept at a time
• 📱 See working implementations
• 🔄 Compare different approaches
• 💡 Learn best practices
• 🚀 Build production-ready UIs

🌟 Why Branch-Based Learning?

Traditional tutorials often mix multiple concepts, making it hard to focus. This repository uses a branch-per-concept approach:

• Isolated Learning: Each branch contains one complete UI example
• No Clutter: Focus on what matters without distractions
• Easy Navigation: Switch branches to explore different UIs
• Version Control: Track your progress and experiments
• Reusable Code: Copy and adapt what you need

🚀 Getting Started

Prerequisites

• Android Studio Hedgehog (2023.1.1) or later
• JDK 17 or higher
• Basic knowledge of Kotlin
• Familiarity with Android development

Installation

1. Clone the repository

   git clone https://github.com/thogaruchesti-hemanth/compose-ui-playground.git
   cd compose-ui-playground

2. View available branches

   git branch -a

3. Switch to a specific UI branch

   git checkout branch-name

4. Open in Android Studio

   • Open Android Studio
   • Select "Open an Existing Project"
   • Navigate to the cloned directory
   • Wait for Gradle sync to complete

5. Run the app

   • Connect your device or start an emulator
   • Click the "Run" button or press Shift + F10

🎯 Available UI Branches

Each branch is prefixed with the proper category for easy identification. Here's a sample structure:

master
├── feature/
│   ├── reusable-onboarding-compose
│   ├── dictionary-app
│   └── animated-chat-application
├── practice/
│   ├── text-practice
│   └── row-column
└── google-compose/
|   ├── birthday-card
|   ├── dice-roller-app
|   └── basic-tip-calculator
.
.
Read More..

📝 For the complete branch structure with screenshots and learning objectives, see BRANCH_INDEX.md

📸 Screenshots

Each branch contains its own screenshots showing the implemented UI

🌱 Practice

Text Practice	Column Arrangements	Row Column Practice	Codelab Practice	Preview
practice/text-practice	practice/row-column	practice/row-column	feature/codelab-android-compose
⭐ Beginner	⭐ Beginner	⭐ Beginner	⭐ Beginner
⏱️ 15–20 min	⏱️ 30–45 min	⏱️ 30–45 min	⏱️ 30–45 min

---

🟢 Google Compose

Birthday Card	Business Card	Dice Roller App	Lemonade App	Basic Tip Calculator
google-compose/birthday-card	google-compose/business-card	google-compose/dice-roller-app	google-compose/lemonade-app	google-compose/basic-tip-calculator
⭐ Beginner	⭐⭐ Beginner+	⭐⭐ Intermediate	⭐⭐ Intermediate	⭐⭐ Intermediate
⏱️ 45–60 min	⏱️ 1–1.5 hrs	⏱️ 1.5–2 hrs	⏱️ 1–1.5 hrs	⏱️ 1.5–2 hrs

Art Space App	Preview	Preview	Preview	Preview
google-compose/art-space-app
⭐⭐ Beginner+
⏱️ 1.5–2 hrs

---

🔵 Codelabs

Basic Layouts	Basic State	Preview	Preview	Preview
codelabs/basic-layouts	codelabs/basic-state
⭐⭐ Intermediate	⭐⭐ Intermediate
⏱️ 1.5–2 hrs	⏱️ 1.5–2 hrs

---

🚀 Feature

Onboarding Screen	Dictionary App	Animated Chat UI	Preview	Preview
feature/reusable-onboarding-compose	feature/dictionary-app	feature/animated-chat-application
⭐⭐⭐ Intermediate+	⭐⭐⭐⭐ Advanced	⭐⭐⭐⭐ Advanced
⏱️ 2–3 hrs	⏱️ 4–6 hrs	⏱️ 4–6 hrs

🛠️ Tech Stack

• Language: Kotlin
• UI Framework: Jetpack Compose
• Architecture: MVVM (where applicable)
• State Management: Compose State, ViewModel
• Navigation: Compose Navigation
• Design System: Material Design 3
• Build System: Gradle with Kotlin DSL

🤝 Contributing

We welcome contributions! Here's how you can help:

Adding a New UI Branch

1. Fork the repository
2. Create a new branch from main

   git checkout main
   git pull origin main
   git checkout -b ui/your-ui-name

3. Implement your UI with:
   • Clean, readable code
   • Comments explaining key concepts
   • A dedicated README in the branch
   • Screenshots or GIFs
4. Submit a Pull Request with:
   • Clear description of the UI
   • Learning objectives
   • Difficulty level
   • Screenshots

Contribution Guidelines

• ✅ One UI concept per branch
• ✅ Follow Material Design principles
• ✅ Include comprehensive comments
• ✅ Add a README with screenshots
• ✅ Test on multiple screen sizes
• ✅ Use meaningful variable names
• ✅ Follow Kotlin coding conventions

💬 Community & Support

• Issues: Found a bug? Open an issue
• Discussions: Questions? Start a discussion
• Instagram: Follow @Thogaruchesti-hemanth for updates

📜 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

⭐ Show Your Support

If this repository helped you learn Compose, please:

• ⭐ Star this repository
• 🐦 Share it on social media
• 🤝 Contribute your own UI implementations
• 📝 Write about your learning experience
• 📣 If you share your work, I’d really appreciate a mention or tag — it helps grow the community and supports my work!

🙏 Acknowledgments

• Thanks to all contributors who help make this resource better
• Inspired by the amazing Android developer community
• Built with ❤️ for learners worldwide

---

Happy Composing! 🚀

Made with ❤️ by Thogaruchesti Hemanth

⬆ Back to Top