Bottom Navigation with Jetpack Compose

  Рет қаралды 51,016

Stevdza-San

Stevdza-San

Күн бұрын

🏆 My Online Courses
⭐Discount Coupon: LAUNCH-STEVDZA-SAN
stevdza-san.com
🐱‍👤 Wanna become a member? Join!
/ @stevdzasan
📸 Instagram
/ stevdza_san
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! :)
💻 Source code: github.com/stevdza-san/Bottom...
⌚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

Пікірлер: 123
@duncanmoiyo6069
@duncanmoiyo6069 Жыл бұрын
You are the most exceptional KZfaq 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.
@ernestguevara5968
@ernestguevara5968 Жыл бұрын
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!
@tristanbocook6311
@tristanbocook6311 7 ай бұрын
youre a god and saved me
@devacc9958
@devacc9958 7 ай бұрын
Thank you very much
@sinbad552
@sinbad552 3 ай бұрын
alternative for selected and unselected property in NavigationBarItem?
@gamesforu6619
@gamesforu6619 Жыл бұрын
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
@StevdzaSan
@StevdzaSan Жыл бұрын
Thanks buddy 💜🙏
@mxgenius753
@mxgenius753 2 жыл бұрын
Thank you Stefan, always easy to understand your tutorials. Please keep them coming.
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Thanks! Yeah, I'll continue my Jetpack Compose journey, definitely! 🚀😊
@lucasnpc2
@lucasnpc2 2 жыл бұрын
Great man! I really appreciate your teaching skills!!
@stineandthebooks
@stineandthebooks Жыл бұрын
Thank you - you explain it so well!
@Lucasgustavom
@Lucasgustavom 2 жыл бұрын
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
@raseenakt8174
@raseenakt8174 2 жыл бұрын
Thanks for your work man!!
@StevdzaSan
@StevdzaSan 2 жыл бұрын
You're welcome! 🚀
@AndrewDChristie
@AndrewDChristie 2 жыл бұрын
Thanks!
@rc5016
@rc5016 Жыл бұрын
Great video!
@TheParthDesai
@TheParthDesai 2 жыл бұрын
Thank you Stefan.
@StevdzaSan
@StevdzaSan 2 жыл бұрын
You're welcome buddy! :)
@Wallenlaguinee
@Wallenlaguinee 2 жыл бұрын
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!
@ashokmanis2111
@ashokmanis2111 2 жыл бұрын
Awesome 🔥
@abdelsttarahmed8821
@abdelsttarahmed8821 2 жыл бұрын
Man you are amaizing
@Guilo583
@Guilo583 2 жыл бұрын
Thanks great job. I need more
@StevdzaSan
@StevdzaSan 2 жыл бұрын
I will continue uploading videos for Jetpack Compose.
@NaraveyGaming
@NaraveyGaming 2 жыл бұрын
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 ?
@hamzaelmarjani8541
@hamzaelmarjani8541 2 жыл бұрын
Thank you for your good tutorial 🙏
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Glad I can help buddy! 💜
@turnitsimple3584
@turnitsimple3584 2 жыл бұрын
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.
@gilsonjuniorpro
@gilsonjuniorpro 2 жыл бұрын
Really a great video, thanks
@StevdzaSan
@StevdzaSan 2 жыл бұрын
🙌🙌
@libinmathew2566
@libinmathew2566 2 жыл бұрын
How is it possible to show a detail screen from home screen which show as full screen outside bottom screen .
@rahathossainhimel7177
@rahathossainhimel7177 2 жыл бұрын
Wow great ❤️.
@alexaguiar7268
@alexaguiar7268 2 жыл бұрын
Good videos!. How can I select the startDestination based on some condition on starting the app?
@irfanalkan4246
@irfanalkan4246 7 ай бұрын
Teşekkürler
@bijooop7955
@bijooop7955 2 жыл бұрын
Amazing, Plz also make a video on how to integrate payment gateway in jetpack compose.
@ArnoldWafula
@ArnoldWafula Жыл бұрын
Is there a shorter and simpler way to implement this?
@cub3608
@cub3608 Жыл бұрын
nice on stef
@user-fj8df8gb4b
@user-fj8df8gb4b 5 ай бұрын
How do you pass arguments between bottom navigation screens?
@AkshayTaru
@AkshayTaru 2 жыл бұрын
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.
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Yeah I've received a lot of questions about it. I'll definitely think about making video on that topic. 🤔
@aagaasavaanii9075
@aagaasavaanii9075 2 жыл бұрын
Nice explaination. Can we have the repo link of the sample?
@paulvickers8059
@paulvickers8059 2 жыл бұрын
Thanks for detailed tutorials. Have you anything on navigation drawer?
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Not yet, I'll keep that in mind for future video tutorials. 👍
@DavidNitzscheBell
@DavidNitzscheBell Жыл бұрын
There are limited ImageVectors to choose from. How can I change this to use a Vector Asset, please?
@moissesfalcao8941
@moissesfalcao8941 6 ай бұрын
I see a fade animation when making transition betwen screens in my app, someone know how to disable that?
@tmjromao
@tmjromao 2 жыл бұрын
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
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Watch my video about nested navigation. 👌
@immohanraj
@immohanraj Жыл бұрын
Nice
@Jerry-of9zj
@Jerry-of9zj 2 жыл бұрын
Hello sir, how can I navigate from single screen(splash screen) to bottom navigation screen
@zyoyi5612
@zyoyi5612 Жыл бұрын
How I can change the color of the bottom bar?
@user-ed8xj1py6w
@user-ed8xj1py6w Жыл бұрын
Hi! How change color Bottom bar ?
@felipe61307
@felipe61307 Жыл бұрын
Muito bom, procurei tutoriais em português, mas não encontrei. Esse deu certo
@souptiknath4668
@souptiknath4668 2 жыл бұрын
Make some big projects using jetpack compose
@indiebloog6785
@indiebloog6785 Жыл бұрын
how to change background color sir
@HeraldOD
@HeraldOD 2 жыл бұрын
Hey, awesome video. Is there a way to not have content underneath the bottom bar? it seems to be "floating" and overlaps stuff on the bottom of the screen
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Check out this answer: stackoverflow.com/questions/66573601/bottom-nav-bar-overlaps-screen-content-in-jetpack-compose
@senya_tall
@senya_tall Жыл бұрын
Отлично
@valdompinga
@valdompinga Жыл бұрын
Perfect explanation! Is there a way to change between tabs swipping right or left?
@mikejawoski5904
@mikejawoski5904 Жыл бұрын
You'll probably want to implement a ViewPager instead.
@valdompinga
@valdompinga Жыл бұрын
@@mikejawoski5904 thanks
@AidenLin-sq4oh
@AidenLin-sq4oh 2 жыл бұрын
Another useful tutorial, thanks a lot. 👍
@StevdzaSan
@StevdzaSan 2 жыл бұрын
You're welcome buddy 🙏😉
@hatdot
@hatdot 2 жыл бұрын
Hello, How can I hide the Bottom Navigation in the next screen?
@ryank8463
@ryank8463 2 жыл бұрын
Hi, really appreciate this video. I got some problems. The thing is that I use the same way to implement a bottom navigation, but once I trigger the button on one of my screen to navigate to another screen outside the bottom navigation, the app crash immediately. I use the same method to build navigation as in your last video. Can anyone help me?
@StevdzaSan
@StevdzaSan 2 жыл бұрын
I'll soon make a video about nested navigation with bottom navigation, in the next week probably. 👍
@Asair4ik
@Asair4ik 2 жыл бұрын
Man, thanks for the video, u are the best. But can u do bottom bar with expandable fab ? i have some problems to do this
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Thank you for suggesting, I'll keep that in mind.
@Asair4ik
@Asair4ik 2 жыл бұрын
@@StevdzaSan thanks a lot. I ve tried to do it by myself but I have problems wit expanded state, everything is moving downstairs
@raymondmichael4987
@raymondmichael4987 2 жыл бұрын
So this today, good content. Can create a tutorial to work with mongodb realm? Subed
@user-fy6bo7ng6o
@user-fy6bo7ng6o Жыл бұрын
If you die you are a legend!
@AhmedAli-qm1td
@AhmedAli-qm1td 2 жыл бұрын
Thanks a lot Can we make a custom one with rounded corners
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Yes we can, I'll think about making a shorts video. Basically you can achieve that with a simple modifier.
@frax84
@frax84 2 жыл бұрын
Thank you for your interesting tutorials! If possible, i have a question. Based on this video and the previous one (Nested Navigation), is it possible to achieve an architecture where you have a navigation like Screen -> Screen with Bottom Navigation Bar and then navigating using Navigation Bar? Thank you!
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Everything that can be achieved with Navigation component can be achieved with Compose Navigation as well.
@frax84
@frax84 2 жыл бұрын
@@StevdzaSan That's a wise answer xD. I asked because I don't get how you can manage the NavHost in such situation. In fact, for standard Screen2Screen navigation NavHost is usually called at high scope (let's say in setContent function) while in the NavBottomBar case you call it in the innerpadding scope of Scaffold composable to avoid making the NavBottomBar disappear at every transaction
@StevdzaSan
@StevdzaSan 2 жыл бұрын
@@frax84 Watch my video about nested navigation, you can have multiple nav graphs in your app 👍: kzfaq.info/get/bejne/aNl7oaqd1KqulmQ.html
@frax84
@frax84 2 жыл бұрын
@@StevdzaSan Yes i already watched (and liked!) it. Unfortunately i am not able to apply it to my case. Probably what i would need would be 2 different NavController to associate with 2 different NavHost: one in charge of Splash->MainScreen navigation, the second one in charge of navigating with BottomNavBar. Because i'm a noob, i don't know how to get 2 NavControllers -.-'
@StevdzaSan
@StevdzaSan 2 жыл бұрын
@@frax84 You don't need two Nav Controllers for two NavHost's. You can pass one to both of them.
@kios1973
@kios1973 2 жыл бұрын
thanks for this, is there a way to prevent the page from reloadin everytime you reopen it?
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Save and restore screen state with nav controller when navigating away.
@ErdemKalyoncu
@ErdemKalyoncu 2 жыл бұрын
Thank you for the video! Is it possible to use BottomNavigation with nested navigation to show it only in MainNavGraph?
@StevdzaSan
@StevdzaSan 2 жыл бұрын
You can achieve everything you want, even create two different NavHosts.
@slayer5171
@slayer5171 2 жыл бұрын
Yes, this is exactly what I am curious about.
@slayer5171
@slayer5171 2 жыл бұрын
@@StevdzaSan How to implement two different navhost?
@cumahaznedar1191
@cumahaznedar1191 2 жыл бұрын
​@@slayer5171 Bro, I have this problem, Did you fix that? (Nested Navigation with Bottom Bar)
@slayer5171
@slayer5171 2 жыл бұрын
@@cumahaznedar1191 I am using state and just pass a handler to show and hide bottom navigation bar.
@rpitpatel1004
@rpitpatel1004 2 жыл бұрын
Thank you for tutorial Sir. unselectedContentColor parameter not working for me. How do I fix that? I am switching to dark mode and my app is not changing colour according to the theme.
@rpitpatel1004
@rpitpatel1004 2 жыл бұрын
Found an error in my code. I did not wrap my scaffold in my app theme. 😊 But unselectedContentColor parameter not working for me. Do you have any suggestions for that?
@cufflink919
@cufflink919 2 ай бұрын
Someone posted a fix on the next video in the playlist. "... use NavigationBar and NavigationBarItem from material3 in place of BottomNavigation and BottomNavigationItem"
@deepakchoudhary7712
@deepakchoudhary7712 2 жыл бұрын
Again, You are better than Phillps L. lol
@nullpointer57
@nullpointer57 Жыл бұрын
Imagine spending 10minutes to set up a Bottom Nav bar with the speed of Author. In old layout, a newbie can set up navigation bar in 2 minutes.
@maximkarassev1016
@maximkarassev1016 3 ай бұрын
Thanks for this video! But slow down please.
@luisguilhermeloubacksouza1399
@luisguilhermeloubacksouza1399 5 ай бұрын
Música?
@datel666
@datel666 Жыл бұрын
Cant use delegate currentBackStackEntryAsState() 5:40 also scaffold gives an error - Content padding parameter it is not used 1) fixed delegate with some kind of import with alt+enter that for some reason wasnt added automatically 2) Scaffold fix = @SuppressLint("UnusedMaterialScaffoldPaddingParameter") annonation. Omg compose is garbage. Thx for video anyway
@SaratNath-ei9mr
@SaratNath-ei9mr Жыл бұрын
BottomNavigation and BottomNavigationItem is not working right now
@gara7723
@gara7723 8 ай бұрын
Did you find out the solution?
@sadiquereyaz
@sadiquereyaz 5 ай бұрын
exactly
@rosylinemilia6123
@rosylinemilia6123 4 ай бұрын
Add the dependency i.e androidx. compose .material: material :1.6.5
@gkozgkeiros5750
@gkozgkeiros5750 29 күн бұрын
this is 10x times easier than xml way
@siva_subramaniam
@siva_subramaniam Жыл бұрын
Bm - 11:28
@susantkumar2889
@susantkumar2889 11 ай бұрын
But you are not explaining , you are reading what ever you are writing
@SahilRai2
@SahilRai2 Жыл бұрын
You made it too long. Like if you're going to use this in bigger projects, this could make things confusing
@BAAAAAAAAAAA
@BAAAAAAAAAAA Жыл бұрын
Very frustrating to follow, you do things way to quickly
@rahulsharma5386
@rahulsharma5386 7 ай бұрын
Jetpack Compose involves too much coding; it's the worst. Who suggested it to Google ? Jetpack Compose seems like a step backward, reminiscent of the early stages of Android development.
@funnymoment9164
@funnymoment9164 2 жыл бұрын
Thanks!
@AndrewDChristie
@AndrewDChristie 2 жыл бұрын
Thanks!
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Thanks again Andrew! 🙏❤
@madbuds
@madbuds 2 жыл бұрын
Thanks!
@madbuds
@madbuds 2 жыл бұрын
Nice video! But what if I wanted to use on tab Icons, resources of my own? I have accomplished that using a R.drawable resource and using painter on Icon(). But i guess this way I cannot achieve the unselectedContentColor the way you did.
@StevdzaSan
@StevdzaSan 2 жыл бұрын
Hm, I haven't tried that. I guess you could try changing it's alpha state instead.
@madbuds
@madbuds 2 жыл бұрын
@@StevdzaSan it works. Thanks a lot! Keep up the good job!
@madbuds
@madbuds 2 жыл бұрын
Imagine the following scenario: what if need a authentication flow before rendering this bottom tab nav graph... like a navGraph for a login flow, and a navGraph for bottom nav when user is logged in... How would you structure this kind of navigation?
Search Widget/App Bar with Jetpack Compose
20:14
Stevdza-San
Рет қаралды 18 М.
Navigation Basics in Jetpack Compose
14:40
Stevdza-San
Рет қаралды 64 М.
Best KFC Homemade For My Son #cooking #shorts
00:58
BANKII
Рет қаралды 72 МЛН
Викторина от МАМЫ 🆘 | WICSUR #shorts
00:58
Бискас
Рет қаралды 5 МЛН
路飞太过分了,自己游泳。#海贼王#路飞
00:28
路飞与唐舞桐
Рет қаралды 38 МЛН
Bottom Navigation in Jetpack Compose using Kotlin | Android Studio
16:50
Android Knowledge
Рет қаралды 8 М.
Type-Safe Navigation with the OFFICIAL Compose Navigation Library
10:03
Magnus Carlsen, Hans Niemann Drama Just Got Much Worse
31:16
GothamChess
Рет қаралды 160 М.
Full Guide to Nested Navigation Graphs in Jetpack Compose
12:01
Philipp Lackner
Рет қаралды 60 М.
Should You Use Compose State or StateFlow in Your ViewModels?
13:59
Philipp Lackner
Рет қаралды 74 М.
Nested Navigation | Jetpack Compose
15:57
Stevdza-San
Рет қаралды 26 М.
Best KFC Homemade For My Son #cooking #shorts
00:58
BANKII
Рет қаралды 72 МЛН