Skip to content

README.md

Latest commit

 

History

History
70 lines (42 loc) · 2.17 KB

README.md

File metadata and controls

70 lines (42 loc) · 2.17 KB
Raw

🚀 Jetpack Compose Navigation Drawer Showcase

This project is a comprehensive exploration of Navigation Drawers in Jetpack Compose, starting from Material Design-based drawers to fully custom animated drawers with interactive gestures and smooth transitions.

🧩 Features Covered

✅ Standard Navigation Drawers

  • Modal Navigation Drawer – Temporarily displays drawer content alongside main content.
  • Dismissible Navigation Drawer – Swipes to dismiss the drawer from the screen.
  • Permanent Navigation Drawer – Always visible drawer layout used for large screen layouts.

🌟 Advanced Animated Drawer (animatedDrawer3)

A fully custom drawer design with powerful features:

  • Custom animated drawer using scale and offset transformations.
  • Interactive transitions powered by Animatable and gesture detection.
  • Custom gestures using pointerInput and detectHorizontalDragGestures to open/close drawer.
  • Smooth experience and high responsiveness to user input.

📁 Project Structure (For animatedDrawer3)


animatedDrawer3/
│
├── CustomDrawer.kt          // The visual layout and animation of the drawer.
├── CustomDrawerState.kt     // Tracks the current state (Opened/Closed) of the drawer.
├── Data.kt                  // Enum classes for bottom bar, box items, and drawer items.
├── MainContent.kt           // The main UI content shown beside the drawer.
└── MainScreen.kt            // Root screen containing drawer logic, gestures, and layout management.

🎥 Demo Videos

🎬 Check out the drawer designs in action below:

  • Standard Drawers Demo
drawer_demo.mp4
  • Animated Custom Drawer Demo
Screen_recording_20250707_004418.webm

🔧 Tech Stack

  • Jetpack Compose
  • Kotlin
  • Material3 Components

⭐ Feedback

If you found this project helpful or interesting, please consider giving it a star ⭐ Your support encourages further development and exploration.