Navigation Component in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn about navigation component in Jetpack compose so in our previous videos I have already used a navigation component in Jetpack compos but I thought let's make a detailed video about it hence here we are now we have used the navigation component in general and to be honest it's the same only the steps are different in Jetpack compos okay so what is navigation component it's a process through which you can navigate from one screen to another screen simple now in the navigation component we have three components first is the Nave graph second is the Nave host and third is the Nave controller so what is the Nave controller the Nave controller manages all the navigation that takes place with with the help of Nave host and Nave graph now what are the Nave host and Nave graph the Nave host is associated with the Nave controller that initialize the navigation and the Nave graph is present inside the Nave host which specifies the route or the destinations got it once the theory is clear now it's time to implement it so go to Android Studio step number one is to add navigation dependency so go to Gradle and the dependency I will mention it in the description box click on sync now and done now come to the main activity the project is very simple there will be a main screen and a home screen all we have to do is navigate from main screen to the home screen using a button and vice versa simple remove the default code and done now we will create a composable function as main screen that will display text as the main screen and also a button that will help us to navigate to the home screen so let me quickly create it e and then see here there is a column whose Arrangement and Alignment are in the center inside we have a text that says the main screen with the font size of 30sp then below it a button with text as good to the home screen also I have kept on click blank for now once we will implement the navigation component then we will write the code here okay now how do we implement the navigation component so we will create a separate composable function that will consist of a Nave controller Nave host and Nave graph let me quickly create it and then here inside first we need NV controller so this is how we initialize the NV controller using the remember na controller then next we require Nave host so write a Nave host who sentext should look like this the first parameter is the na controller and the second parameter is the start destination our start destination is the main activity itself which I will call as main screen as a keyword now there are two ways to perform navigation One is using keywords and the second is using seal class we will see both of them one by one first let's see using keywords so our first screen is the main activity host keyword is main screen got it then inside the Nave host we have a Nave graph here we are supposed to mention all the destinations means all the screens so our for screen is the main screen so let's mention it here using composable so write a composable whose root is the keyword of the main activity which is main screen then inside it mention what will happen once we are on the main screen so it should launch the main screen composable function see this is just the initialization of all the destination this is not where the navigation is happening navigation will happen at the on click button got it now for the navigation obviously we will require a second screen that it should navigate to right and that screen will be our home screen so let's quickly create a home screen cot file and done now here we will create a home screen composable function that will display a text as home screen and below it a button that will help us to navigate back to the main screen so let me quickly create [Music] and done again I have kept on click blank for now so come back to the main activity our main screen destination is declared here so let's declare the home screen as well and then this is the keyword for the home screen now once everything is set up let's write the code for on click here we require a nav controller so declare it here inside the brackets and then then right here the na controller dot navigate and inside it write the keyword of where you want the screen to navigate to I want to navigate from the main screen to the home screen hence I will write the keyword for the home screen and then the same thing we will do for the home screen as well so declare the Nave controller then write na controller. navigate to the main screen keyword and then come back to the main activity make sure to pass the arguments and also don't forget to call the display NV component matter here inside the set content and that's it now let's run the app and see this is our main screen and when I click on the go to the home screen button here we are on the home screen now if I click on the go to the main screen button look here we are on the main screen easy this was our first method using the keyword now let me show you the second method using a sealed class now what is a seal class seal class consist of all the sub classes so all you have to do is to create a seal class called as destinations and then here inside it we will create two objects that are main screen and the home screen with the respective keywords so let me quickly write it and then see our first destination is the main screen and the second destination is the home screen now come back to the main activity here instead of keywords we will use the destination class so our start destination will be the main screen only but using the class of destination look this is how we write destinations dot main screen do two string and then similarly here root is the destination mean screen and also here as well rout is the destination home screen then here also replace the home screen keyword with the destination home screen and also don't forget to change the home screen class with the destination main screen and then now let's run the app and see look it is working the same way but as you will notice here when I click on the back button instead of exceeding from the app it goes back to the previous screen this is not recommended hence to solve this issue we use a pop back stack like this way also make sure to write inclusive false inclusive which means whether the given destination should also be pop or not so I said false means it should not pop now let's run the app and see go to the home screen perfect go to the main screen perfect now if I click on the back button look the app is closed and this is what we wanted right so yeah that is it for the video If you new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 587

Keywords: jetpack, compose, jetpack compose, what is jetpack compose, basics of jetpack compose in android, jetpack compose series in android studio, learn jetpack compose, create an app using jetpack compose, 2024 jetpack compose, android studio, new android studio, latest version, java, kotlin, create an android app, text composable, 2024, android in jetpack compose, navigation, component, nav host, nav controller, nav graph, intent, sealed class, keywords., nav components, screens, design, nav

Id: a3Y2uncgAMM

Length: 12min 26sec (746 seconds)

Published: Mon Mar 25 2024