Bottom Navigation with Jetpack Compose

Поделиться
HTML-код
  • Опубликовано: 26 ноя 2024

Комментарии •

  • @gamesforu6619
    @gamesforu6619 2 года назад +5

    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

  • @ernestguevara5968
    @ernestguevara5968 Год назад +27

    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 11 месяцев назад +1

      youre a god and saved me

    • @devacc9958
      @devacc9958 11 месяцев назад +1

      Thank you very much

    • @sinbad552
      @sinbad552 7 месяцев назад +1

      alternative for selected and unselected property in NavigationBarItem?

    • @brigadut
      @brigadut 2 месяца назад

      to use this you : implementation("androidx.compose.material:material:1.7.2")

  • @duncanmoiyo6069
    @duncanmoiyo6069 Год назад

    You are the most exceptional RUclips 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.

  • @Lucasgustavom
    @Lucasgustavom 2 года назад +16

    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

  • @mxgenius753
    @mxgenius753 3 года назад +4

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

    • @StevdzaSan
      @StevdzaSan  3 года назад +2

      Thanks! Yeah, I'll continue my Jetpack Compose journey, definitely! 🚀😊

  • @mehdiparsaei1867
    @mehdiparsaei1867 3 месяца назад

    Perfect, just a point: When we have the bottom bar, I think we should exit the app by pressing the back button on any destination (not first pop into HOME, then exit)

  • @lucasnpc2
    @lucasnpc2 3 года назад +1

    Great man! I really appreciate your teaching skills!!

  • @AkshayTaru
    @AkshayTaru 2 года назад +1

    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 года назад +1

      Yeah I've received a lot of questions about it. I'll definitely think about making video on that topic. 🤔

  • @stineandthebooks
    @stineandthebooks 2 года назад

    Thank you - you explain it so well!

  • @libinmathew2566
    @libinmathew2566 2 года назад +1

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

  • @raseenakt8174
    @raseenakt8174 3 года назад

    Thanks for your work man!!

  • @tmjromao
    @tmjromao 3 года назад +1

    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  3 года назад +2

      Watch my video about nested navigation. 👌

  • @TheParthDesai
    @TheParthDesai 2 года назад

    Thank you Stefan.

    • @StevdzaSan
      @StevdzaSan  2 года назад

      You're welcome buddy! :)

  • @souptiknath4668
    @souptiknath4668 3 года назад +1

    Make some big projects using jetpack compose

  • @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.

  • @Guilo583
    @Guilo583 2 года назад

    Thanks great job. I need more

    • @StevdzaSan
      @StevdzaSan  2 года назад

      I will continue uploading videos for Jetpack Compose.

  • @Wallenlaguinee
    @Wallenlaguinee 3 года назад

    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!

  • @ArnoldWafula
    @ArnoldWafula Год назад +1

    Is there a shorter and simpler way to implement this?

  • @ErdemKalyoncu
    @ErdemKalyoncu 3 года назад +1

    Thank you for the video! Is it possible to use BottomNavigation with nested navigation to show it only in MainNavGraph?

    • @StevdzaSan
      @StevdzaSan  3 года назад

      You can achieve everything you want, even create two different NavHosts.

    • @slayer5171
      @slayer5171 3 года назад

      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.

  • @hamzaelmarjani8541
    @hamzaelmarjani8541 2 года назад

    Thank you for your good tutorial 🙏

    • @StevdzaSan
      @StevdzaSan  2 года назад

      Glad I can help buddy! 💜

  • @datel666
    @datel666 Год назад +1

    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

  • @FaridAdashov
    @FaridAdashov Год назад

    If you die you are a legend!

  • @nullpointer57
    @nullpointer57 Год назад +1

    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.

  • @valdompinga
    @valdompinga 2 года назад

    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

  • @Asair4ik
    @Asair4ik 2 года назад +1

    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 года назад +1

      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

  • @paulvickers8059
    @paulvickers8059 2 года назад

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

    • @StevdzaSan
      @StevdzaSan  2 года назад +1

      Not yet, I'll keep that in mind for future video tutorials. 👍

  • @frax84
    @frax84 2 года назад +1

    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 👍: ruclips.net/video/2sKnGloDJf0/видео.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.

  • @bijooop7955
    @bijooop7955 3 года назад

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

  • @АлександрБасанец-т9л
    @АлександрБасанец-т9л 9 месяцев назад

    How do you pass arguments between bottom navigation screens?

  • @alexaguiar7268
    @alexaguiar7268 3 года назад

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

  • @NaraveyGaming
    @NaraveyGaming 3 года назад

    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 ?

  • @gilsonjuniorpro
    @gilsonjuniorpro 3 года назад

    Really a great video, thanks

  • @DavidNitzscheBell
    @DavidNitzscheBell Год назад

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

  • @funnymoment9164
    @funnymoment9164 3 года назад

    Thanks!

  • @rc5016
    @rc5016 Год назад

    Great video!

  • @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

  • @abdelsttarahmed8821
    @abdelsttarahmed8821 3 года назад

    Man you are amaizing

  • @aagaasavaanii9075
    @aagaasavaanii9075 2 года назад

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

  • @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.

  • @felipe61307
    @felipe61307 Год назад

    Muito bom, procurei tutoriais em português, mas não encontrei. Esse deu certo

  • @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. 👍

  • @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 6 месяцев назад +1

      Someone posted a fix on the next video in the playlist. "... use NavigationBar and NavigationBarItem from material3 in place of BottomNavigation and BottomNavigationItem"

  • @Jerry-of9zj
    @Jerry-of9zj 2 года назад

    Hello sir, how can I navigate from single screen(splash screen) to bottom navigation screen

  • @SaratNath-ei9mr
    @SaratNath-ei9mr Год назад +1

    BottomNavigation and BottomNavigationItem is not working right now

    • @gara7723
      @gara7723 Год назад

      Did you find out the solution?

    • @sadiquereyaz
      @sadiquereyaz 9 месяцев назад

      exactly

    • @rosylinemilia6123
      @rosylinemilia6123 7 месяцев назад +1

      Add the dependency i.e androidx. compose .material: material :1.6.5

  • @AhmedAli-qm1td
    @AhmedAli-qm1td 3 года назад

    Thanks a lot
    Can we make a custom one with rounded corners

    • @StevdzaSan
      @StevdzaSan  3 года назад

      Yes we can, I'll think about making a shorts video. Basically you can achieve that with a simple modifier.

  • @ashokmanis2111
    @ashokmanis2111 3 года назад

    Awesome 🔥

  • @irfanalkan4246
    @irfanalkan4246 11 месяцев назад

    Teşekkürler

  • @zyoyi5612
    @zyoyi5612 Год назад

    How I can change the color of the bottom bar?

  • @АльфредАхметгалеев

    Hi! How change color Bottom bar ?

  • @moissesfalcao8941
    @moissesfalcao8941 10 месяцев назад

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

  • @hatdot
    @hatdot 2 года назад

    Hello, How can I hide the Bottom Navigation in the next screen?

  • @indiebloog6785
    @indiebloog6785 Год назад

    how to change background color sir

  • @maximkarassev1016
    @maximkarassev1016 6 месяцев назад

    Thanks for this video! But slow down please.

  • @cub3608
    @cub3608 Год назад

    nice on stef

  • @rahathossainhimel7177
    @rahathossainhimel7177 3 года назад

    Wow great ❤️.

  • @deepakchoudhary7712
    @deepakchoudhary7712 2 года назад

    Again, You are better than Phillps L. lol

  • @immohanraj
    @immohanraj Год назад

    Nice

  • @siva_subramaniam
    @siva_subramaniam Год назад

    Bm - 11:28

  • @raymondmichael4987
    @raymondmichael4987 2 года назад

    So this today, good content.
    Can create a tutorial to work with mongodb realm?
    Subed

  • @AidenLin-sq4oh
    @AidenLin-sq4oh 2 года назад

    Another useful tutorial, thanks a lot. 👍

    • @StevdzaSan
      @StevdzaSan  2 года назад

      You're welcome buddy 🙏😉

  • @senya_tall
    @senya_tall Год назад

    Отлично

  • @luisguilhermeloubacksouza1399
    @luisguilhermeloubacksouza1399 8 месяцев назад

    Música?

  • @gkozgkeiros5750
    @gkozgkeiros5750 4 месяца назад

    this is 10x times easier than xml way

  • @BAAAAAAAAAAA
    @BAAAAAAAAAAA Год назад

    Very frustrating to follow, you do things way to quickly

  • @SahilRaiDev
    @SahilRaiDev Год назад

    You made it too long. Like if you're going to use this in bigger projects, this could make things confusing

  • @rahulsharma5386
    @rahulsharma5386 11 месяцев назад

    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.

  • @AndrewDChristie
    @AndrewDChristie 2 года назад +1

    Thanks!

  • @AndrewDChristie
    @AndrewDChristie 2 года назад

    Thanks!

    • @StevdzaSan
      @StevdzaSan  2 года назад

      Thanks again Andrew! 🙏❤

  • @madbuds
    @madbuds 2 года назад

    Thanks!

    • @madbuds
      @madbuds 2 года назад +1

      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 года назад +1

      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 года назад +1

      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?