Bottom Navigation with Jetpack Compose

🏆 My Online Courses
⭐Discount Coupon: LAUNCH-STEVDZA-SAN

🐱‍👤 Wanna become a member? Join!

📸 Instagram

In this video I'm going to show you how to implement Bottom Navigation Bar into your Android application using Compose Navigation! Watch the whole video to learn more about it! :)

⌚Timestamps
0:00 - Introduction
0:35 - Bottom Screen holder class
2:14 - Add MainScreen
3:03 - Create BottomNavGraph
4:30 - Create BottomBar
6:17 - Add Item
9:50 - Recap
10:39 - Run the App
11:28 - Unselected Items Visibility
13:12 - Handle Back Stack
14:40 - Conclusion

[duncanmoiyo]

You are the most exceptional YouTube instructor, effortlessly simplifying every concept. I am gaining a wealth of knowledge from you, and I aspire to become one of the top Android experts in the near future.

[ernestguevara]

To those whose watching this in mid 2023. If you're having problems importing BottomNavigation and BottomNavigationItem. It's because material3 uses a new one.

You can try this one

NavigationBar {
items.forEachIndexed { index, item ->
NavigationBarItem(
icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
label = { Text(item) },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
}

But still a great vid!

[gamesforu]

You're the best instructor on youtube, Because you are simplifying the tutorials to everyone who watching your videos, Keep going and never stop Stevdza

[mxgenius]

Thank you Stefan, always easy to understand your tutorials. Please keep them coming.

[lucasnpc]

Great man! I really appreciate your teaching skills!!

[Lucasgustavom]

Very good video as always, what I didnt actually like is the navigation with compose, too much complicated when compared to the Navigation Library we already have when working with XML

[Wallenlaguinee]

Really great tutorial. Thank you! What's a good way to handle more than 8 screens? I have seen some apps use a hamburger or a 'more' icon on the right. How could we implement that? A thousand thanks!

[NaraveyGaming]

so if i want to add destination ( not for bottom navigation ), do we need to make another screen class or just add another NavHost on MainScreen ?

[bijooop]

Amazing, Plz also make a video on how to integrate payment gateway in jetpack compose.

[turnitsimple]

Thanks for the nice explanation. I have some issue when randomly and quickly switched between bottom nav item the app crashes.Can I get some help.

[alexaguiar]

Good videos!. How can I select the startDestination based on some condition on starting the app?

[AkshayTaru]

Thank you for Awesome video and the Nested Navigation video.

If you check comments lots of people want to know how would you structure following.

Like a navGraph for a login flow, and a navGraph for bottom nav when user is logged in

Login Screen,
MainScreen which has bottom navigation bar.

There is no much resource available for this (common) problem. And on stackoverflow few people are trying to solve using Two Navhost with different NavHostController. And nobody knows if this approach is correct. They are using because it works.

And I have seen you commenting somewhere that we dont need two NavController for two Navhost.

Appreciate if you could make video on this. Would love to see how you would solve the problem.

[libinmathew]

How is it possible to show a detail screen from home screen which show as full screen outside bottom screen .

[paulvickers]

Thanks for detailed tutorials. Have you anything on navigation drawer?

[fjdfgbb]

How do you pass arguments between bottom navigation screens?

[tmjromao]

Many thanks for the explanation. Is it possible to have to more than one scafffold? Meaning 2 or more graphs, one per each bottom navigation item? How to mix each bottom item with its screen flow? Would much appreciate a mix between bottom navigation and multigraph explanation, Many thanks, keep up

[aagaasavaanii]

Nice explaination. Can we have the repo link of the sample?

[ArnoldWafula]

Is there a shorter and simpler way to implement this?

[DavidNitzscheBell]

There are limited ImageVectors to choose from. How can I change this to use a Vector Asset, please?

[moissesfalcao]

I see a fade animation when making transition betwen screens in my app, someone know how to disable that?