You're welcome. Hi, good to have you around. I am my name. I is peculiar um me an Android developer in this section. We are going to be looking at basis of Android navigation component.I add to set and uh we are going to go through a lot of things and you get to understand what is jet pack Android uh navigation component is and not only what it is and how to apply it in your mobile application.

Ok. Now I'm

going to be looking at different

slides. Uh We look at AC P

is moving from one screen to another that a user move from one screen to another and this can be done. You can achieve it by just uh adding an intent to uh abo click in your, in your, in your code. And with this, you can easily move from one screen to another. Now, when we, we call, we looked at Jetpack uh navigation component when we want to more complex than just

sleeping, just what do you order.

That's where we looked at NA na uh Jetpack navigation comp component because it has a lot of features and a lot of things that will make it more easier for us to navigate from one script to another. And not only that Jetpack uh Android com uh Jet A navigation company has a lot of features that will make things a lot easier for

us.

Now, when we talk about jetpack navigation companies, uh what actually are we talking about

here? We,

we we, we know that jet back

a

plug in and a tooling for simplifying and unifying Android navigation. That's what a navigation component is all about. Now, this navigation,

yeah, lots of

features that will help us that will make us consider. So they say that is the best and the most uh uh and the best for use in an Android navigation uh applications. Now, the first we look at here, we look at what does it offer when why should I use it? Why should I choose to use uh jet navigation components? Number one, we need to find see that this navigation components are are hand those bus, it also handles uh a transition animation, it also handles uh uh auto, it automates fragment, transaction. Not only that, it also uh simplify deep linking and it also handles the the type of argument person, what I'm going to take this one after the other but also be able to understand what they are. They all mean. It also uh set up uh It also help in setting up navigation uh navigation that the navigation pattern is also help us in setting it up in a simplified way. That's why we look at it and we want, want everybody to understand how to implement it and then how to use it in your Android application.

Now, this and, and Jetpack navigation component is made up of three main parts and I'm going to look at these three main parts, these three main parts, we have them as the first one is navigation graph. The next one is navigation for uh nerve boost. And the next one is nerve controller. That's the three main, the three men

are uh

part of navigation component. Now going to look at navigation graph, what's navigation graph? Navigation graph is, is, is an S MLS M

L of

resource file. It contains all the information that is information that has related to the NAV navigation and the android in your application. That's where all is contained. Now, this navigation graph also have uh I have an example of it. I'm going to show you. So that is there for us

to understand if you look at what I have like

this is called a navigation. And when we come to our section, I'm going to show you how we can implement this manually in uh

uh uh android uh application.

Now this navigation graph, it has a destination and it also have uh uh it has contained a lot of actions each of these, you're saying this is a destination where you click on each of them and each of these destinations is a scream on its own. Now, you also

have a uh

adoption which is a route to which we navigate or we move to the next screen from one screen to another. If you look at the sample I have here, you have some others, a lot of actions there leading us from one screen to another. And there is a sample

of uh

navigation graph. Like I said, a navigation here. The navigation graph here contains and information information about for uh about your application. That's about the whole screen from one screen to another stream and it contain them and keep them in just one century centralize them in just one location.

Now, the next part of the navigation Android navigation company is what we

call NUS.

I'm going to show you an example of NAV and all these we're going to

implement very soon, we're going to implement

very soon. OK. Now this is a sample of a N host. Now this now post

is a widget,

a widget that we can add in a SML, uh an SML file.

And this widget is responsible for uh from one

screen to another screen. That's what it's all about. I'm going to show you a sample of

feedback when we move into the practical section.

That's just what is

responsible for. Uh

Then the next one we have is the N control the N controller, the N controller is just AAA code that you can add into your uh maybe in a fragment or in a activity that will help you to move from one screen to another. This shows an action, the action you need to, you have N A controller, you find it linking to your N A graph, you find the action here and then this action will

lead you

from one screen to another. The action also can, we can also achieve this uh uh this action we have here, this uh resource uh uh file here. We can also achieve that by using a safe app

um blogging.

And how can we do that by using a safe app problem that when we talk about adding debtors, adding debtors in in what in a navigation? Now I said that set up uh plug in this the navigation library that help us

that's different from one

uh between a destination

to another destination. This is a sample of a set uh uh how to

pass in a data from one screen to another. Let's assume we have

uh uh a recycler

view that we want to use three data

from a

particular uh let's say from um an API. Now we use this set up program to person these debtors and we use this argument to retrieve

this data from,

from that uh from that API. So what you need to do is to do what set up the you make over here and call it in your, in your fragment or in your activity. So that when you click on a particular

uh uh

link or on a, on a particular uh image or object, it would automatically fetch the data for that, that you are looking

for, for that uh uh image of your P. All right.

Now, let's go ahead to the

I have it the navigation destination. Now, this set

up it, it, it has a lot of this set up plug in how to use it is it, you just need to add the plug in and your, you just need to add a plug in the plug in in your, in your video file. You just need to add a plug in in your what in your GLI do file and then sync after adding it, this set up plug in will automatically who generates what we

generate uh our, our, our

classes for you. Then it will first of all generate AAA direction

class for

any action that does any destination that needs an action.

Then

it also uh generates uh an argument class for any destination that you use

the argument.

So that's what the save up uh The save up plug-in

does for you. Now, the next one is

the uh talk about the destination. And I also talk about this code you have here, just what you add to your, your, your flatmate to your fragment or your activity for you to be able to get the action you are looking for. Now, the next one, we're going, we're going to go back to an Android studio to see what we're talking about. Because when we talk about Android development,

we are talking about, um we,

we mostly look at the application of it, not

just uh

talking about it but the application of it. That's where the ending is.

So I'm going to go

away from this

screen now and back to my Android studio

where I will come back. Please don't go away where we have to implement exactly what are the few things

I've explained here. OK. Uh Back. OK. OK.

Yes, I'm back again. Now. I believe you're seen by scream over here. Now, this, this is uh

a

project where this everything I've been saying have been applied. Now in this project. I see a lot of things like what I showed you, you will see the state ar uh arguments here have been implemented in this fragment. Actually, the project just contained only two

uh

the main fragment, which is this and

the fragments. Now

in the main fragments, you have a lot of things, information that we need to call on the main fragments. And in this fragments, you already have its bit coin to have it being called

in the main activity is this applied?

I'm going to start from the beginning to show you exactly

how this is being applied.

OK. I'm going to stop sharing that string. And then I will move over to the next spring where we're moving into the practical section where we can

exactly, um, applying what

we are talking about. Because in this section, we are actually looking at the implementation and manually, that's what we are looking at. So you know how we can manually implement all this in an application.

OK. I'm going to put up that. Now, I'm going to show

you manually how we can implement

this in our application. Oh, and I believe if you see

my screen now, please, if you see my screen, I would like you to respond. Just say hi to me. I'm seeing your screen. Um Actually appreciate

you for coming. Just say hi over here on the chat. I'm seeing your screen then that way I know you are with me. I appreciate you for coming in this in this section. Let's

go ahead into the hard drive studio

to implement this.

OK? How I'm going to start with? The first thing I'm going to start with is

the N

graph. Now the N A graph for me to apply the NAV graph in this project which I've created. I just, it's an empty project. I just

created I just um topic sample uh project.

And what I need to do is to go to the, the layout file, it has the layout file and then I'm going to right, click on the layout file. I will go to new then click on layout resources. Now, I'm going to type in now

and that's called graph. Then this is a navigation.

So I'm going to select navigation here.

Oh, I'm sorry about that. I need to take that again. I'll be back. Ok. Let me go back to take that again.

I'm going to do this in the resource file because I told you that NAB graph is a resource file type. So in the resource file, I'm going to click on resource android. Then I'm going

to type in now R N A graph. Then I'm going to select the type,

the resource

type and the resource type is what navigation.

And this will automatically ask me if I will want to add this dependency in my grad uh in in my app dot Grito file. Now, sometimes some people would prefer to get over there, get this plug in and add it in

the uh in the app dot grad file first,

but you might not need to do that because once you,

you uh you, you, you, you want what you

want to uh generate your n nerve graph. It will actually if you need this Libra uh this like dependency in your Abdo grid file and most likely OK. It will set a AAA

automatically add this in my

uh dependency in my uh A dot Grito file. We're going to check to see if that is possible, wait for it to load just few minutes

is going to load and then we, we will see that

just a few minutes is going to lose coming up. OK. As that is coming up. Now, you are going to see that this uh this is just how we can manually implement

uh N A graph and uh application.

What did I do? I just went to resource which is over here and clicking on that.

Just give me some minutes. It's going to come up. Just

went to resource, click on

resource. I went to um new and then uh that's no resource. Sorry about that. I clicked,

I clicked on resource or I clicked on resource. I went to new and I selected Android

uh navigation, android resource. F then

I typed in the N A graph and

selected

navigation because the resource

time I'm trying to add up here is uh is navi navigation.

Now, if you look at what you have here, you see that the N A graph has already been implemented over here. We don't have anything

in this. The NRA is navigation company.

You will see that this dependency has been already uh uh automatically implemented for

us here. And this uh in this

uh bill dot grad five, that's exactly what we have here. OK. So the next thing we need

to do is to move ahead to uh I'm going to split this so we can see what we are doing at the same time. We remove this test view because we don't need, need this test view.

Now, I'm going to turn to design view and in the design view, what I want to implement here is the next part of the navigation component, which is the NAVCO. Now, I'm just going to

tie for easy going to the past NAVCO fragment I told

you is the widget that we apply, we add in the resource file and this helps us is a window that helps us to

swap from one screen to another screen. Now, once I, I selected that, if I want to use this N A graph, which I've already created, I'll click, yes, select it and click here.

And this will automatically

generate the uh the fragment,

the N graph and add it up for me over

here.

I'm going to constrain it because I'm using constraint layouts.

I prefer using constraint layout because that is faster for me and it doesn't waste time. I'm going to it up and down left, right. And OK. Um Most

cases I don't normally want to

use this. So I most time I prefer to use the. So then we get which is this Android

Android X fragment uh dot app dot fragment container view.

I'm just going to select that and that I prefer to use. So now we're done with the first thing added the, the first one,

the man added NN graph A the NAV and the love

uh fragments

and and

um uh N A

graph in application. And then the next thing we did is to open the

activity uh main uh M

F file. And then we added what the NG, what this, what we added here is A N boos. And then the next thing that

is remaining in this

part is the N controller which will help us to do what to call this, to help us navigate into another,

showing all the actions and this would inside a inside uh main uh

fragments. OK? Now, because we're using fragments, we're using a single uh activity with different fragments. So I would prefer to create a fragment uh Before I agree that I'm going to and I'm going to call this package bill,

OK? Inside

this packet, I'm going to do

what I'm going to create. It's I from,

I'm going to say

let's call it first fragments. I'll click OK with JJ A code that I

might not use. So what I need to do is just to remove those codes that I don't need, I'll manually add the code

myself so I could be able

to manipulate and do a lot of things I want to do. But if you look at this code already, which

the, the, the fragments, you will also

see the arguments here. But this agreement is not really directing me to exact to

what I want to exact. So I'm going to delete them and add my. So I'm going to start from here. All this, I don't need them. I want this to be clean so that I will my own. I want this to be clean. OK. Now I have it clear. So the next night is to do what to go to my Nora for a grad, there must be a home. That's

a starting point for every fragment. For every uh android

application, there must be a starting point. Now, I don't know if you have. So I'm going to call on the first fragments I have, which is the first fragment. That would be my starting point over here. Now please, if

you have a question

as this session is going on, just help me type in uh your question in the chat area. I will be able to attend to see it and attend to it. OK. So

far we've been able to create just one fragment and we're going to go ahead to create the next fragment. So we can see what I've

explained about the, the N uh the nerve

graph. We are going to see a des a destination already. What we have here is a destination, which is the

first fragment and then what another fragment that will help us see the action in this uh in

the N A graph. After that, we move ahead, if our time permit

us to add a step up that will help us to move from one screen to a another that will help us passing data from what uh from maybe from the Mera or the home first to the second fragment. It happened to also apply a deep linking. And this in this uh uh application we're

trying to set

up. But if time does not per

us, OK, I'm going to drop a link uh link below for

this project for the first project I use

so that you can go through it. If you have

any questions, you

can a after this

uh conference, you can

ask me uh through my, either my

github or, or linkedin or, or, or, or Twitter. And then I will be able to answer your question. I explained to you the part. Maybe you got uh you're confused about OK. Now let's move ahead quickly before I time wrap up, I will add the second fragment inside here and then we'll link it up. OK. I'll go to the next one which is uh a fragment. Raise the second, I'll create the second fragment. I click. OK. Step again

is going to also

generate for me, which I don't think.

But when you look at this information, we are uh that's actually what we are looking at when we talk about the

set up. Uh uh um You will see that we have private constant. Um I'm

actually using here uh coupling. Sorry, I didn't say that earlier. I use actually using applying this, using co link, not java,

but

navigation jap navigation components can also be applied

in Java or, or in coin. What's the US

here is this only makes it

the code and everything more concise. But Java is that the code

is a bit a big and complex that you have to write in a lot of code

for you to be able to achieve the same thing just like uh uh in, in, in, in,

in court you just a few lines is we arrive at what we are actually

looking for when we

talk about. Uh because navigation components, we also uh have it. When we talk about navigation

UIs.

When you talk about navigation UIs, we talk about bottom navigation. In bottom navigation, just one line of code can be able to navigate each screen from one,

you can be able to navigate on one icon and then bottom navigation to another icon,

just one line of code. But

in, in Java, you will need to write a different line of code before you can be able to do that, which will make up uh your, your, the code base to be would be a lot of uh uh a lot of code there.

But coline why I prefer and I

use code limit

because the codes are very simple, they are

concise and they're not uh they're not uh too long, too, too much. You just still

achieve the same

uh the same thing. Uh You can also achieve with android uh uh with uh Java, which it can also achieve

the same thing and much more because it has a lot of other features that Java doesn't have and it makes your

work very fast. Noted to spending a lot of

time building just one application. Now, I've also added the second fragment. All I need to do is to do what's over here. I'm going to click on that and you'll see that the nest

that I'm going to remove this. So we can see what I'm talking about here. I have the

next fragment

over here.

What I need. This is a destination in the N gram and well, and this

is N and

this destination had. Uh We have a lot of things I can do here. I have the ID and I have the level. Then I can

add the

action uh arguments here by using the uh add button. I can also add in the action and then I can add the deep links

here by

using the app, all of them in any one I want to add, I can

just use uh the block,

add them. So over here now I'm going, I'm going to add an action. This action will

help us to not to move from this script to the next group. And remember what I said that the action is a route through, we just like uh uh bypass through one step to another step just to and then draw it to the next. And that's all. If I still want to

come back to the nursery, I can also draw it here

and then move back to the nursery. No, but if I don't, I'm using just uh uh just uh uh uh just code

uh code and just writing code this, I'm going to write so many codes to move uh using an intent from one button to another button. I'm going

to add a button to move from one

screen to another screen for this navigation confidence. I just made it very

easy and very simple by just using looking at destination you are go so I use an action to navigate that and this automatically

generates an XML

file for us. If I split now you're going to see there's going to split, you're going to see the XML code that this what action that we have taken has also generated for us. Now

let me also move over to look

at how an

argument to passing one data from

different data. This will come here. Let's go back to the design view. And then all I need to do is to click on this

destination that I want to navigate to. That's this destination. I want to move the data. When I click in on an image of an object here, I will move into the next destination. I just have to click in here, click on that destination and then go to add, then I have this a argument. Now, this argument can

just help me. This will also do controller can do by moving from one screen to another. Now, I'll just add an ID for that uh for that, for that

object or for that uh for where I want to navigate to, I just

need to add the id. Then I will select, is it an eight?

Is it, is it, will it be a float or a loan

or ball or is

a, a string? Now, my company is string. Now, at this point, I might not need the default

value. It's not an array, it's not, I don't need it to be a no level. And then the default value I don't really actually need it. Um because I'm not actually person in

any data here, but I'm just showing you

how this can be done. Ok? Once I click, I see the ID is a

string and it's already applied here. And then when I split this, I will go to the code and I will see this pin navigate. I mean what I've generated over here, you see the app type the ID, the name I have the ID and then the

app type is just a string.

And for me to be able to do, to navigate and to make use of it, I'm going to come back to the,

let me close some of this because I don't need it. I don't need them. Ok? Uh I need to close some of this. I don't need them for now. Uh OK. Thanks. Now, I'm

going to come to, this is my main screen. I'm going to come here and then create a component object calling in the, the, the, the argument here. Then the argument must have an ID. And it's this idea that I will also call it over here. So that when I click on the first fragment, I will get

in to the next the second fragment with this ID uh with the code I've

already added in

the second fragment. OK. Now, uh my time is already up

already. But before let

me check in and see if you have questions uh for this, if we don't have questions, I believe that you are following. And you've been able to uh we were able to understand a lot of things, understood, a lot of

things about this and basis of android navigation. Now, I'm going

to drop uh uh the, the first

project I used where I showed you a sample. I'm going to bring it

up again so that we

can, you can look at it. And then when you have questions,

you feel free to ask your question and then I will be able to answer your question. Uh After now, I'm going to remove this fragment, uh this screen so that I will bring up the first code. Uh the first OK string we use, which is this OK? Just give me some minutes that will be up. OK. OK. So everything has already been implemented by in this project, I use

data binding. I prefer

using data binding and uh with the navigation company because it gives me uh less um uh it makes it more faster and easier for me.

What I explain over there is this, this is the the component objects are created for this. Uh The A the A ID are calling over here and the ID is a drink

ID, I was able I

consume an API and the

ID is the drink ID over here. That's what I

use then over here in

this uh not control. Uh I was able to

call in ID

using bond them to pass the ID over here. And that's all I

did then and now move over to the detail fragment because

I want to get in the, the details of each does

eat drink and then I just use V ID, it's empty. This string is empty because I have so many drinks there so that it can pick it one after the other.

Then I just uh then dot L and then the ID it dot gets the strength. Then I pass in the ID, which are the I,

the ID, which I also pass

here in my, which also have here in the, in the companion

object. And just with this, that's all to do to strength. Just with this code I've been able to achieve what I actually want to, I actually

want to achieve in this application.

OK. Now that having been said

uh come to the end of this session because our time is up and I'm giving you

a few minutes. We have gone through all this. I hope you

are seeing. OK? OK. And I want to say uh OK, uh back to uh come through this and back to my slide again. Good. I want to say thank you to as many of you that were able to join this session. If you have any question, you can go ahead to app.

But over here you can see the source code

of the first uh sample

I use code I use. And

then you have more questions you can ask me in my Linkin or, or, or Twitter or through github or mail. Then I will be able to uh answer your question and I will give you some minutes here to drop you your question in this section area. OK? I say hi. So miss I'll know your s I'm driving up now and saying thank you very much for joining this question session. Ir the clear. Thanks so much. Thank you for joining this session. Thank you so much as many of you joined this section. And I also want to use this opportunity to sponsors from all over the continent and we are grateful we are happy to have you and you been part of us or make this program resources. Thanks a lot. Thanks for joining this session.