Navigation 3 Demo App 🚀

This is a simple Jetpack Navigation 3 demo showcasing a clean navigation setup with multiple NavDisplays and a bottom bar layout.
It demonstrates how to structure navigation across different parts of an app — from authentication to the main content area — using modern best practices.

---

🧭 Overview

The app simulates a small application with two main navigation layers:

1. Root NavDisplay — handles the login flow.
2. Main NavDisplay — contains a bottom navigation bar with two sections: Tasks and Settings.

---

📱 App Flow

🔐 Login Screen

• The entry point of the app.
• Contains a single Login button that navigates to the main app area.
• Serves as the root NavDisplay for authentication.

🏠 Main Screen (Bottom Navigation)

After login, the user is taken to the main app screen which includes:

• A bottom bar with two tabs:
  • Tasks
  • Settings

This main section is controlled by its own NavDisplay, separate from the root navigation.

---

✅ Tasks Screen

• Displays a simple in-memory list of tasks managed by a ViewModel.
• Each task can be marked as completed.
• Supports navigation to a Task Details screen with a smooth horizontal slide animation.
• Demonstrates how to pass data between destinations and manage UI state using a shared ViewModel.

📄 Task Details Screen

• Shows details of the selected task.
• Includes a back button to return to the list.

---

⚙️ Settings Screen

• Contains only a simple text element (for demo purposes).
• Exists to show how multiple destinations can coexist under a bottom navigation setup.
• Highlights the flexibility of Navigation 3 when using multiple NavDisplays.

---

🧩 Key Concepts Demonstrated

• Multi-layer navigation using two NavDisplays
  • One for login (root)
  • One for the bottom bar (main content)
• Integration of bottom navigation with Navigation 3
• Smooth transition animations between destinations
• Basic state management with ViewModel
• Simple and clear navigation structure ideal for scaling to larger apps

---

🧠 Why This Demo Exists

This project was built to help Android developers understand how to:

• Organize navigation hierarchies in modern apps
• Use multiple NavDisplays effectively
• Keep navigation logic modular and maintainable

If you're exploring Navigation 3, this demo provides a clear, minimal example of real-world structure and behavior.

---

🛠️ Tech Stack

• Kotlin
• Jetpack Compose
• Navigation 3
• ViewModel (AndroidX Lifecycle)
• Material 3

---

🚀 How to Run

1. Clone the repository:

   git clone https://github.com/<your-username>/navigation3-demo.git

2. Open the project in Android Studio Jellyfish (or newer).
3. Sync Gradle and run the app on an emulator or device.

---

🧾 License

This project is released under the MIT License.
You’re free to use it as a reference, fork it, or adapt it for your own projects.

---

If you found this useful, leave a ⭐ on the repo and check out the upcoming Medium article about this demo!