A comprehensive Android application demonstrating various Jetpack Compose concepts and UI patterns. This project serves as a learning resource and reference for developers getting started with or advancing their knowledge of Jetpack Compose.
This project showcases practical examples of building modern Android UIs using Jetpack Compose, Google's modern toolkit for building native UI. Each screen demonstrates different Compose concepts, from basic layouts to advanced custom composables.
The application includes the following example screens:
A complete user profile UI demonstrating:
- Circular profile images with Material 3
- Sectioned settings layout
- List items with icons and navigation
- Material Design theming
- Column layouts with proper spacing
Demonstrates fundamental layout concepts:
- Vertical arrangement with
Column - Horizontal arrangement with
Row - Main and Cross axis alignment
- Space distribution (SpaceEvenly, SpaceBetween)
- Nested layouts
Shows overlapping and stacking composables:
- Z-index layering
- Alignment properties (TopStart, TopEnd, CenterEnd, etc.)
- Circular shapes and borders
- Background colors and custom shapes
- Cut corner shapes
Demonstrates responsive wrapping layouts:
FlowRowfor automatic line wrapping- Tag-based UI patterns
- Spacing between items
- Maximum items per row configuration
- Responsive chip layouts
Advanced text styling techniques:
- SpanStyle: Inline text styling with different fonts, sizes, and colors
- ParagraphStyle: Line height, text indentation, and alignment
- Brush/Gradient Text: Multi-color gradient effects on text
- Annotated strings for complex text formatting
Demonstrates composable reusability with slots:
- Higher-order composables
- Content slots for flexible UI
- State hoisting
- Interactive checkboxes
- Toggle between different UI states (Linear/Circular progress, Image/Text)
Shows how to share data implicitly across composables:
- Creating custom
CompositionLocal - Providing values with
CompositionLocalProvider - Theme-aware color switching
- Dark/Light mode handling
Creating custom layout modifiers:
- Custom
layoutmodifier implementation - Manual positioning of composables
- Understanding the measure-and-place API
- Custom offset implementation
Building custom layout composables from scratch:
- Cascade/Staircase layout pattern
- Using the
Layoutcomposable - Measuring and placing children
- Custom spacing logic
Advanced constraint-based layouts:
- Basic constraints with
constrainAs - Guidelines for proportional positioning
- Barriers for dynamic content alignment
- Chains with different styles (Spread, SpaceBetween, Packed)
- Complex layouts with minimal nesting
Understanding intrinsic measurements:
IntrinsicSize.Maxfor matching widest childIntrinsicSize.Minfor matching narrowest child- Solving layout problems without custom layouts
- Automatic width/height synchronization
- Comparing layouts with and without intrinsic sizing
- Language: Kotlin 2.0.21
- UI Framework: Jetpack Compose
- Architecture: Single Activity, Composable-based navigation
- Build System: Gradle (Kotlin DSL)
- Minimum SDK: 26 (Android 8.0)
- Target SDK: 36
git clone https://github.com/yourusername/compose_examples.git
cd compose_examples- Launch Android Studio
- Select "Open an Existing Project"
- Navigate to the cloned repository
- Wait for Gradle sync to complete
- Connect an Android device or start an emulator (API 26+)
- Click the "Run" button (
▶️ ) in Android Studio - Select your target device
- The app will build and install automatically
compose_examples/
├── app/
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/com/codehuntspk/compose_examples/
│ │ │ │ ├── MainActivity.kt # Main entry point
│ │ │ │ └── ui/
│ │ │ │ ├── screens/
│ │ │ │ │ ├── ProfileScreen.kt # Profile UI example
│ │ │ │ │ ├── RowColumnDemo.kt # Row/Column layouts
│ │ │ │ │ ├── BoxDemo.kt # Box layout examples
│ │ │ │ │ ├── FlowLayoutDemo.kt # FlowRow examples
│ │ │ │ │ ├── StringDemo.kt # Text styling
│ │ │ │ │ ├── SlotAPI.kt # Slot pattern demo
│ │ │ │ │ ├── LocalDemoScreen.kt # CompositionLocal
│ │ │ │ │ ├── CustomLayout.kt # Custom modifiers
│ │ │ │ │ ├── CustomLayoutComposable.kt # Custom layouts
│ │ │ │ │ ├── ConstraintLayoutDemo.kt # ConstraintLayout examples
│ │ │ │ │ └── IntrinsiveMeasureDemo.kt # Intrinsic size examples
│ │ │ │ └── theme/
│ │ │ │ ├── Color.kt
│ │ │ │ ├── Theme.kt
│ │ │ │ └── Type.kt
│ │ │ ├── res/ # Resources (drawables, strings, etc.)
│ │ │ └── AndroidManifest.xml
│ │ ├── test/ # Unit tests
│ │ └── androidTest/ # Instrumented tests
│ └── build.gradle.kts # App-level build config
├── gradle/
│ └── libs.versions.toml # Version catalog
├── build.gradle.kts # Project-level build config
└── settings.gradle.kts # Project settings
If you're new to Jetpack Compose, we recommend exploring the examples in this order:
- RowColumnDemo - Learn basic layouts and alignment
- BoxDemo - Understand overlapping and stacking
- FlowLayoutDemo - Explore responsive wrapping layouts
- StringDemo - Master text styling techniques
- ProfileScreen - See a real-world UI example
- SlotAPI - Learn about composable reusability
- LocalDemoScreen - Understand implicit data sharing
- CustomLayout - Create custom layout modifiers
- CustomLayoutComposable - Build custom layout composables
- ConstraintLayoutDemo - Advanced constraint-based layouts
- IntrinsiveMeasureDemo - Master intrinsic size measurements
The app uses Material 3 design principles with:
- Dynamic color scheme support
- Typography scaling
- Consistent spacing and elevation
- Material You components
- ✅ State hoisting for better testability
- ✅ Reusable composables with slot API
- ✅ Proper separation of concerns
- ✅ Preview annotations for rapid development
- ✅ Material 3 design system
- ✅ Modifier chains for styling
- ✅ Custom layouts when needed
- ✅ CompositionLocal for implicit data passing
Contributions are welcome! If you'd like to add more examples or improve existing ones:
- Fork the repository
- Create a feature branch (
git checkout -b feature/NewExample) - Commit your changes (
git commit -m 'Add new example') - Push to the branch (
git push origin feature/NewExample) - Open a Pull Request
- Follow Kotlin coding conventions
- Add preview functions for all composables
- Document complex logic with comments
- Ensure code passes lint checks
- Add your example to this README
Muhammad Naveed
- Email: naveed@codehuntspk.com
- Google Compose team for the amazing framework
- Android developer community for inspiration
- Material Design team for design guidelines
Future examples to be added:
- Navigation Compose integration
- Animations and transitions
- Lazy lists (LazyColumn, LazyRow, LazyGrid)
- ViewModel integration
- Side effects (LaunchedEffect, DisposableEffect)
- Gesture handling
- Canvas and custom drawing
- Paging 3 with Compose
- Material 3 components showcase
⭐ If you find this project helpful, please consider giving it a star!
Happy Composing! 🚀