Jetpack Compose Navigation for Beginners - Android Studio Tutorial

Поделиться
HTML-код
  • Опубликовано: 11 июл 2021
  • In this video you will learn what you need to know about having different screens in jetpack compose and navigating between them.
    ⭐ Get certificates for your future job
    ⭐ Save countless hours of time
    ⭐ 100% money back guarantee for 30 days
    ⭐ Become a professional Android developer now:
    pl-coding.com/premium-courses...
    💻 Let me personally review your code and provide individual feedback, so it won't backfire and cost you a fortune in future:
    elopage.com/s/philipplackner/...
    This is the navigation compose dependency I used in this video:
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha04"
    Regular programming advice on my Instagram page: / _philipplackner_
    Checkout my GitHub: github.com/philipplackner
    You like my free content? Here you can buy me a coffee:
    www.buymeacoffee.com/philippl...

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

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

    So helpful. I had no idea what you were doing for a lot of it but after building it and using it I can safely say I understand how this works. I love the new stuff. Thanks for making this easier to learn!

  • @thearpansircar
    @thearpansircar 2 года назад +6

    Loved this explanation, Philipp! Absolutely easy to understand and implement. Tried it out on a project that I've been working on and it implemented beautifully without a single error. Thanks :)

  • @stefanusayudha1853
    @stefanusayudha1853 2 года назад +19

    why wont they make it simpler

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

    Such a great tutorial, you made compose navigation super easy to understand. Thank you so much. You are an amazing teacher.

  • @denisshov8518
    @denisshov8518 7 месяцев назад

    Thanks for the dependency in the description so I can just copy-paste. Love your tutorials. Super quality.

  •  Год назад

    Hello Philipp ! Thank you for your tutorial. Just watched it after your Jetpack Compose beginner crash course. Very well explained !!

  • @dransom90
    @dransom90 6 месяцев назад +1

    Finally, a well-explained tutorial!

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

    Thanks for a video. Very good explanation.👍😊 Very surprised how navigation works, no need to create fragments, mind blowing 🤯

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

    thanks a lot for your tutorials, definitely among the best teaching android out there

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

    Thx works.
    If the app is crashing for anyone make sure you revert @15:20

  • @zaryabK-vi8fh
    @zaryabK-vi8fh Год назад +3

    the old nav graph stuff was so easy

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

    very nicely and clearly explained, great job, thanks !!

  • @user-en7un8pc3k
    @user-en7un8pc3k 2 года назад

    Man you are the best! Thx for tutorial. For a newbie like me it like a wellspring!

  • @vindoodles7346
    @vindoodles7346 Год назад +2

    really wish i could see the whole screen when you're working, it helps for newbs who need to see their way around the application. You have a lot of different folders and setups than I do and so panning the camera all over the application leads to a lot of confusion.

  • @tanjimahmed213
    @tanjimahmed213 2 года назад +2

    Thanks for your amazing tutorial

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

    nice explanation. you can set the varargs type to Any so that it can also accept other data types rather than String types only.

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

    Thanks! you helped me a lot

  • @atila_tv
    @atila_tv Год назад +3

    Damm, doing this makes me miss the old Intents.StartActivity, don't you think is too much for just changing from one screen to another?

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

    This was awesome!

  • @Kunal-jp8tn
    @Kunal-jp8tn 2 года назад

    Thank you so much for this simple explanation....

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

    I like your videos man, all of them are very useful..

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

    As always a great video.
    How do we use the NavButton on any other screen but the MainScreen?? Which navController do we need to import??

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

    nice example, thank you

  • @mehulbisht9708
    @mehulbisht9708 3 года назад +6

    *Offtopic
    fun fact: earlier Philipp was able to hide her behind his chair when recording in front of his bed but now the green screen made him no longer used to it, so now he has to tilt his camera to hide her 😂😂

  • @xavierrispal9605
    @xavierrispal9605 3 года назад +6

    Hello Philipp and thanks for this interesting video. Have you tackled a little bit the topic of screen transition animation which was pretty easy in navigation components but seems to be much much harder in Compose ?

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

    Tnx Phillip, for all of your tuts not just this video.
    Is it possible to add compose to an existing project without refactoring old codes?

  • @UriahHeep-gj5jj
    @UriahHeep-gj5jj 5 месяцев назад +1

    Very good tutorial. It is easy to follow and understand; however it is easy only if the user is starting from scratch. I am trying to impliment this tutotrial with the other one you have about the Room database. I have not been able to incorporate both. The 2 tutorials don't seem to be compatible. Perhaps it would help us all if you could make another tutorial where you incorporate bot tutorials. Thank you and keep up the good work.

  • @David-zb8br
    @David-zb8br Год назад +1

    hey philipp, is it possible to share viewmodels between screens using compose navigation? or just primitive types are allowed?

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

    Helpful one, could you make a video on how to navigate between activites?

  • @pixlize
    @pixlize 19 дней назад

    Holy fuck its a 16 step process to go to the next screen and say hello phillip

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

    Hey Philipp, how do you make it so that when you select a method from the autocomplete dropdown, the method argument keywords appear too?

  • @dmytromarchuk3023
    @dmytromarchuk3023 2 года назад +2

    What is happening with the screen A when we open screen B? A->B
    We used to think that it will be stored somehow and will be restored once we press back.
    But since Compose is function of a state, it will free up all the resources of the screen A and will be composed again when we go back.
    Is that correct?

  • @aleksandrnikolaev2914
    @aleksandrnikolaev2914 6 месяцев назад +1

    So, my application crashes without passing an argument. But But if I use ?name={name} instead /{name} then the application crashes when you pass arguments and when you don’t pass it, it successfully substitutes the default value. What could it be?

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

    Philipp, have you tried navigation from a page inside an HorizontalPager?

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

    How can I deeplink into a specific screen in this single-activity scenario please? Can the NavHost be instructed to map a deeplink to a route? (I presume the Activity needs to be set up to receive all possible deeplinks in some way for this)

  • @khronosium8480
    @khronosium8480 2 года назад +2

    Hello! Thanks in Advance for this. It helps a lot.
    So Is it safe to say the whole Activity/Fragment as Pages Paradigm can be replaced with this? One Activity is enough to make an app. Say an app contains Auth, Dashboard, Profile, Transactions, etc. ?

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

      Yes correct, one activity is enough

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

      ​@@PhilippLackner I see, much obliged!

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

    Is there any way to implement nested navigation?
    I tried to do this for a single tab by using navigation instead of composable function, when defining NavHost, but when it was buggy.
    Example:
    A-B-C - 3 bottom bar tabs
    I go to B->B1->B2
    Then go to A
    Then go to B
    I expect to see B2 route, but it is B
    Passing a different NavController to a nested graph leads to a crash "ViewModelStore should be set before setGraph call"

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

    Good tutorial, thank you so much, it is so much better than the old XML. I am very new to Android Dev`. But I have to say, this is still way too complicated & not very inuitive for a high level framework, especially passing arguments should be much simpler

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

      well passing arguments works the same way as on the web now. I think with XML it's actually not less complex to deal with Intents and bundles

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

      @@PhilippLackner Thanks, If I wanted to manage state in ViewModels, would there be one viewModel per screen?
      How would I add state here?

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

      @@peshutanpavri1599 well that depends on your architecture. You can have one ViewModel per Screen, or a single one for all Screens. Obviously one ViewModel per Screen is cleaner. I hate to say it, but it’s true as always: it depends 😂
      For state just use LiveData as usual, then handle them in your Screens

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

      ​​@@PhilippLackner , Hello sir,
      can you do a video on how to navigate between different screens by inputting voice.
      For example the user should talk to the application and if for example the user say "next" the app should move to the next screen and if the user say "back" the application should navigate to the previous screen
      I can't find this information anywhere on the internet.
      Thanks sir, Hope you respond to me quickly please

  • @Alex-ve4wr
    @Alex-ve4wr 2 года назад

    Helpful

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

    Can we develop the same using NavGraph ? and if so what changes we have to make in gradle file

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

    There is any other solution to pass Parcelables as parameters using Jetpack Compose? The two I end up were to use Json or put parcelable directly on the backStack

  • @abhay2192
    @abhay2192 3 года назад +5

    Please sir🙏🙏🙏make a video illustrating the use of architectural pattern in jetpack compose

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

      Did that in my pokedex Playlist

    • @user-cl5wn9fz7f
      @user-cl5wn9fz7f 3 года назад

      No, beg harder

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

      @@PhilippLackner maybe, (didn't want to say that) it was not that explanatory 🥺

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

    Hi, I am starting with android, and I have a query Is navigation similar to using Intent in android?

  • @DraskoSaric
    @DraskoSaric 2 года назад +2

    Why don't you use graph? It is more visible when you have all drawn on one place.

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

    So we should use compose able functions as different screens instead of whole fragment?

    • @PhilippLackner
      @PhilippLackner  2 года назад +4

      yes

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

      @@PhilippLackner If we use composables as diff screens then how to manage their lifecycle of each screen(in our case, composables) ?

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

    Nice

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

    Do u have any examples for below scenario
    Graph_A--->F1,F2,F3.
    Graph_B--->F4,F5,F6
    So I need to lunch F5 from the F2 with passing data .

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

    Hi Philipp, I implemented it but have a problem with recomposition after getting data from the view model and navigating to the next screen and not find right solution

  • @Vl-TV
    @Vl-TV Год назад

    tnx bro

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

    How if the string argument that we want to pass contains slash "/"? Is it read as an argument separator?

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

    Really nice content. I am wondering why jetpack navigation doesn't have animation when routeing another page

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

    Hi, Can you tell me how to create a new launcher activity in jetpack compose?

  • @Navak_
    @Navak_ Месяц назад

    Ok ok this is great for navigation WITHIN Compose but how do you pass navigation commands from OUTSIDE Compose? The NavHost obeys the NavController but the NavController exists entirely within Compose. I need an external ViewModel to be able to command the NavController.

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

    Im looking in you repo for the source code for this video, and Im not finding it... is it there in a different name?

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

    ​@Philipp Lackner , Hello sir,
    can you do a video on how to navigate between different screens by inputting voice/speaking using jetpack compose
    For example the user should talk to the application and if for example the user say "next" the app should move to the next screen and if the user say "back" the application should navigate to the previous screen
    I can't find this information anywhere on the internet.
    Thanks sir, Hope you respond to me quickly please

  • @Rafael-hk9pg
    @Rafael-hk9pg 2 года назад

    How about conditional routes when the user authenticates?

  • @ajay-ri7ex
    @ajay-ri7ex Год назад

    What is the best way to pass bitmap between composoble screens

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

    Is it a bad practice to use intent when navigating to another screen

  • @h.k3260
    @h.k3260 Год назад +1

    How come theres nothing in the Main activity file?

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

    Great video! But all this to simply navigate between two screens, having to pass string args...

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

    If anyone an answer this, that would be great!
    So Jetpack Compose is like navigating between different "screens" (AKA fragments) on one singular Activity?
    Also anyone else having issues with the
    'rememberNavController()'? Im getting IllegalStateException there ...

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

    How to use github libraries views which those included in xml file in a jetpack compose...?

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

    Does the classical way without Jackpack require a similar convoluted mess?

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

    How to add transition like opening and closing activity?

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

    The project is using an incompatible version (7.0.0-alpha05) of the Android Gradle plugin.

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

      perhaps you can try version 7.1.0-alpha03 (when in alpha, they tend not to continue serving the previous releases, so the ide reports it not being available...), and perhaps also kotlin-gradle-plugin:1.5.10 which seemed to be required for on my androidstudio bumblebee ide

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

      @@fauxvillage3811 classpath 'com.android.tools.build:gradle:7.1.0-alpha03'
      classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.10"
      thanks working

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

    As I engage it, this tutorial is a year old.... I'm experiencing NO END of build issues. Please please please Philipp, thinking back and knowing all that you know, what can you give me to simplify this nightmare so that I can complete the tutorial with my sanity intact and my blood not on my walls? PLEEEEEEASE HELP

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

    What's the second "build.gradle JetpackNavigation" file is all about?

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

    Супер.

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

    Philip why you have made the media queries video private. please make it available

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

    hey philip do you have any idea how we can listen to viewmodel livedatas with jts ui state in jetpack compose?

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

      you can convert live data to compose state with the function observerAsState() I think

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

      @@PhilippLackner What about observing one-time events emitted by SharedFlow?

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

    Very Nice Explanation.
    Although i have a question.
    I have a Main Screen Composable, inside of which i have defined NavHost and Routes. Now i have Navigation like this :
    Main Screen -> License Listing Screen -> License Detail Screen
    But Issue is when i use navigate(":License Detail Screen") from inside of "License Listing Screen", then Listing Screen gets removed from stack. But i want this Listing Screen to stay right there. But currently when navigate to Detail Screen it pops out the Listing screen and It's Exit Animation is displayed.
    It would be awesome if you ping some comments on this.

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

    Dear Philipp,
    I am sorry that my comment not related to this topic, but could you please show how to implement real ERASER TOOL using PotterDuff.Mode in Drawing App, not just setting white color or any other color equal to background color. I've been stuck with this issue for a long time and cannot find any solution in Kotlin. PLEASE help if it is possible. I will be really grateful!

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

    What about our own objects? How can I pass them?

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

    Hello idk why but I am not able to get the alignment part right

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

    so the app is now a single activity?

  • @MrNik-zv7dp
    @MrNik-zv7dp Год назад

    JetCompose dropdown . with only icons . no text. do we have that in android ? Icon Drop down ?

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

    fillMaxSize() to fix the alignment of main screen

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

    Here is probably the main "pain" in android/kotlin/compose family.
    Your nice example does not work anymore with an actual version.
    I was trying to implement it for two hours or so... errors, errors... Gradle info's are no longer available etc... a real mess.
    I don't blame you. To the contrary, your made an excellent job... but as two of my books : they are obsolete after a very short while.

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

      Works for me. In the gradle make sure you have the updated nav implementation, you don't need to do anything in the Project grade.
      also @15:20 make sure you revert to "/{name}" or the app with crash on button click

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

    It seems that we wont be needing fragments now.
    But do the compose pause when it is in background and another compose screen comes in foreground ?

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

    it is getting complex with compose for passing nav arguments

  • @ultimat.
    @ultimat. 2 года назад

    Je voudrais qu'une. Liste d'items ouvre d'autres liste de divers catégories avez vous des tutos ou des liens qui pourrait traité mon sujet , merci

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

    Can you pass a mutable state?

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

    Why did Google do navigation with no simple sending of parameters: strings, numbers, objects? It’s boring to send arguments not directly.

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

    Im getting an error when i make this:
    NavHost(navController= navController,startdestination = Screens.Mainscr.route){
    composable(route = Screens.Mainscr.route){
    Mainscr(NavController = navController)
    }
    Says i have to create composable function. Can anyone help?
    I may be missing a gradle implementation but idk.

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

    I think with intents it seems a bit easy

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

    Great guide and presentation, but as I'd never heard of "Compose navigation" before, I was really confused about the steps behind the development of this feature. To me, it feels like taking steps backwards from the "Jetback Navigation" way of navigating. The lack of a navgraph (xml) and the fact that you pass arguments almost like a url feels like a huge disadvantage to me? You lose all the type safety and ease of use that you get from using safe-args, and you also have to "re-invent the wheel" with regards to setting up navigation. I don't really see the benefit of using this over "default" jetpack navigation? Unless you (for some reason) really dislike writing xml, I don't see any immediate connection/benefits to this way of merging the worlds behind navigation and compose? Am I missing something?

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

      Nope, you're right, the normal navigation for Compose is pretty bad. That's why I typically use the Compose Nav Destinations library for that which makes this a lot easier

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

      @@PhilippLackner I found that video a couple of minutes after writing my comment above, so I'll spare my judgement until I've finished that video. :)
      But:
      I still can't understand what the benefits are compared to just using "normal" navigation? A library that improves it is great, but if it forces you to use third party library, it feels like you're back to the times before Jetback navigation where every developer had their own self-written or third-party library handling navigation. It might be a personal preference, but I'd prefer *less* fragmentation between apps. As it is now, library or not, I still can't see the benefits to either Compose or navigation in general to using this?

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

    how to pass parcelable without navigation? @Philipp Lackner

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

    Please upload the github repository of this

  • @Albert-Dyck
    @Albert-Dyck 2 месяца назад

    3:55 sealed class missing in Android studio Iguana. What now?

  • @AbhishekPal-ri9gr
    @AbhishekPal-ri9gr 3 года назад +2

    Can you make a video of android development roadmap

    • @PhilippLackner
      @PhilippLackner  3 года назад +9

      no I'm not a friend of roadmaps. Just learn the basics and build projects. You'll learn everything necessary on the fly

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

      @@PhilippLackner thank you for specifying the way

    • @iam-learning6374
      @iam-learning6374 3 года назад

      follow his tutorials, you will rock :)

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

    Thanks for explaining ❤. I am an iOS developer. It’s still complicated than SwiftUI.😮

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

    Intents deprecated ? ?. ?: !!

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

    Tons of boilerplate just to send an argument from one screen to another? Android developera need to rethink this

  • @CorneliusJubril
    @CorneliusJubril 11 месяцев назад +4

    fucking hell! just to switch from 1 screen to another. XML was better 😑

    • @Luffy_2804
      @Luffy_2804 10 месяцев назад +1

      fr 😂 they just fucked up jetpack

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

    What's the point in the sealed class with the different screens? I can't see why it's important at all!

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

      Okay so to answer my own question, it basically just seems like it's storing strings for the routes, but doing it in this way allows you to have one source of truth for the different routes!

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

    too hard to understand...

  • @elviss911
    @elviss911 3 года назад +5

    With XML i make app demo with navigation in 5 minutes

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

    Usually a big fan of your videos, Philipp, but I don't think this was explained as well as you usually do. For me, you went way too fast and I felt like you didn't really explain things in a way that someone who hasn't touched compose could grasp.

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

    20 minutes of coding just to navigate between pages. This language is horrible. I have stopped investing more time

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

    Kotlin 👎