Good day, good afternoon, or good morning wherever you're joining me on this session.My name is Beckilia Ome,

and I'm glad to have you join me for this session today. Okay. I'm going to be picking up my slide so we can get straight to the topic I have today. Like I said, my name is Becky Leaume. I am an Android engineer. And today, in this session,

I want to shout give shout out to our sponsors and women tech organizers for this opportunity. I'll be taking you through the topic building Android application with Jetpack Compose. Last year, I we looked at building Android. Last 2 years, we looked at building Android application with, with, comparing Java and Kotlin. And this year, we'll have a new awesome topic for you, and that is building Android application with Getback Compose. Okay. I'm going to dive deep to find out and to tell you a lot about Jetpack Compose.

Okay? Now Jetpack Compose is,

yeah, more than that's It's new and it's modern toolkit for building native Android UIs. With Jetpack Compose, you can build beautiful, responsive,

flexible, user interface using a declarative programming model. K.

In this session, I will guide you through the process of building an Android application using Jetpack Compose. My session will always be more of practical. Okay? So I'm going to guide you through how to develop Android application with Jetpack Compose. Jetpack Compose makes it, develop building,

Android application more easier, simple, and is awesome. So without wasting time, I'm going to show you what we'll be working on in this session. So we'll have

the next one. In this practical session, we're going to be building just a simple application just to show you how to use, Jetpack Compose to build Android applications in a more concise, easy, and using just simple, intuitive, centers. Okay. I'm going to stop sharing this while we go over to Android Studio to create a new project, and we'll talk about Jetpack Compose info. Okay. The next coming up will be my Android studio. And this Android Studio, for you to be able to develop or build an application using Jetpack Compose, the prerequisite of what

you need is an Android Studio, and

you need Android Studio erratic force or the latest Android Studio. But presently, I'm using Flamingo. Then you can or your Kotlin, you're going to have Kotlin 1.5 or the latest. So once you open the address that you need to do just to get to new project in the new project, you're going to use an empty, Jetpack Compose, template, which is already here for you in Android Studio. DSS is for you to be able to have the dependence, for the you to get all the depends and density necessary for you to work and build your application with ease. So I'm going to click, name. Now like the sample of application we will be working on, like I showed you, is just using Jetpack Compose to show a list a list of courses that's maybe a pro programming languages or just courses that you want to learn for a certain period of time.

So over here in

the Android Studio, I'm going to just give this, a name.

Let me say, learn a cost. So I'm going to click finish. I think that something happened. My I'm going to share that again in my Android studio. So we give, Android we give it some time to build to come up why while continue with give us to address just a free time. It will come up complete with adding the dependency and and the rest of them and get the platform environment ready for us. So like I said, for you to start working on you're using Jetpack Compose, you need to do what? Create and use an empty compose activity template. The empty compose activity template, like I said, will create a project with necessary dependency and basic composable function that displays hello hello Android, not hello world, but this time is hello Android. Okay. I mentioned composable function. In Jetpack Compose, we use most, composable functions. What's a composable functions? Composable functions are building blocks of Jetpack composed UI.

A composable function in Kotlin, does is a is a Kotlin function that returns what a UI element. Okay? The composable function are notated with at compose annotation. In SML, we when we use SML for, developing Android application, we don't we don't use annotation just when you want to build, write a function. But when you are using, like, maybe dependency injection or something, you can add maybe some annotations, some other things you want to use. But just to build a simple UI that doesn't need much information on on on a, on a screen, you might not really need to annotate anything except now once you're going to, like, use adding

a room database and all the rest. So project

is ready. Let's look at what we have here in Compose. Compose has made everything just so easy. It has created a simple just simple project for us. Now let me show you one thing about compose that it updates it has a live update. So it updates whatever you're working on or any code you are adding to your to your application. It's updated live, and that is what you are going to see when we use preview. Now what's a preview to see exactly what we have here on this? Oh, I got that. Yes. It's a normal thing, and it's saying, this happened and failed application Java like agreed to. Java is part of Android Studio. So all you need to do, just come over here and SDK location. Okay. So grid set up and you change this to 17. Okay.

Let me use 17

and you just hit okay and okay. So rebuild this again. Everything would be alright at this point.

Yeah. We'll give it a few minutes to come up. So we're going to see a composable function that is displayed on this sample we have over here. Let me get something again. Yes. Over here. Now the this is a composable function. A composable function is a you can see is annotated with words at composable. And the name of this function is gritting. This gritting has a parameter name and then a modifier, which is a custom modifier. I will talk about that as we move along as we move on in this section. And then it has what? A composable, what, elements in it. So this is example of a composable portion. Just like I said earlier that com in compose, you have live updates. So what we we're going to happen is that I would like to see what I'm working on or what is, exactly all the code I'm have.

Now my UI is going to look like in a real life device. So I'm going to just refresh this. For me to be able to do that, I'm going to add preview. This preview will help me see how my the UI will look like in the real life device. Okay? So I'm going to use the, preview over here, and I'm also going to use the real life, device so you can be able to see,

what you're working on. Okay?

So we wait for that to come up while we look at. You don't need this. I don't need at this point, and I don't need this now. I will add them later when I need them. So it's coming up. So over here, you've seen that this is called a composable function. And I made mention of something I talked about. This composable function has a parameter. The parameter the parameter is what? That this part that did it the grittiness takes is a function that takes in any parameter and also a modifier too, and then returns a test like you can see, a test UI that displays a, a greeting message. Okay? If you want to change how this test this test you are seeing here look like or appear or does how your UI look like, you use what we call modifier.

So let me tell you about modifier. What's modifier? Modifiers are used to do what? To change the appearance or the behavior of a composable element. Modifiers are portions that are called on a composable element using the dot operator. All you just need to do to add dot operator. Okay? Maybe operator, maybe padding, or the size. You want to change the size of that, composable element. You you you can use, dots, maybe front dot, you can add, I mean, this this side the UI, the arrangement in the UI, how the UI will look like. You can use that fixed mass, size or something. So let's look at what we have here already. Okay. Like, exactly what I have here. If I want to if I don't want to use this modifier over here, okay, I can actually remove it from here, and then I will use it on the body of of the test to modify to modify this test.

Okay? Now like I mentioned, the preview has shown us. This is just what I have here. Hello, world. That's what the preview has shown us. Forget about this because we may not need the need it. If I also run this on the physical device, which I'm which I'm going to do at this moment, you will see that on this, he will have just hello, Android. That's only what we have. But for us to move ahead in this, I like I said, what we are working on is just a simple, application that accepts, that shows displays list of courses. That's what we're going to be working on. So I don't need this.

We move ahead to

start building our project. Okay? So

I have I want to work on a just simple list. Like, if you look at what I showed the other slide I showed, the sample of data, it has a test. It has a a test field and a, a button. The test field you I I you see there in the sema is called edit test. Okay? But over here in compose, it's called a test field. So what I need to do is this I have to have this at back of my mind that I will need to use the, the the best practice by creating a package called a presentation package.

Presentation. So inside this package, I'm

going to decide on what I'll be work the name for the app I want to do. So I'm just going to create a file, and let's, I think I missed that.

K. Yes. And let's say, let me call it learn,

cost. Okay. Okay. This is just

like what I explained over there, we have we had the,

a function that's interested to create state for us. But now we're going to create this function on our own. So I'm going to start by having okay. I like this way compose, then I get, at compose added. Like, I explained area earlier that is a composable function is annotated with at compose. So let me call this function, learn. Cost. Okay. Yes. Now just like we saw greeting, greeting was a function we saw over there. And inside greeting, we had we had a composable element, which which what which was a test. So in this way, we're going to be creating composable elements here. So I'm going to start by creating 1. I'm looking at the UI. Don't forget. I've already shown us the UI of what we are going to be working on at the end what we'll be achieving at the end of this.

So I'm going to create composable elements called test.

Okay. So this is it will take a parameter. It will take string, and then I can call it, let's say, list

of courses. Okay. Now if I preview here, I will not be able to see anything. If I try, I will not be able to see anything. You know why? The reason is because there's no preview. I didn't add anything about ad preview over here, so nothing will happen. So what I need for me to see on the Android Studio, what I'll have this update for me,

have the live updates. I'm just going to have a review, a preview for this function. Okay. Let me call it learn

learn, course preview. Okay. So for this to be able to work, I'm going to annotate this with at preview At preview. Okay. You see? It's updating immediately. So then I'm going to call this function over here so that I will see what, have worked on. Learn

a cost. Automatically, this

is going to preview for us to see what we have achieved at this point. I'll give it few minutes for that to happen. Exactly. You can look at my Android Studio. You're going to see list of courses. That's the a composable element that I just added. Okay? So we'll move on to, remember, I made mention of modifier, and I said that we can use modifier to do what? They are used to change the appearance or the the behavior of a composable element. And I said that modifiers are portion that are called on a, on a composable element using dot operator. So over here, I'm going to call use a modifier to to make and another another thing about compose is once you click on this, you bring your cursor close to this, test this test view.

You can see all the parameter that this test this this test can accept. We can change increase the size, the color. You see the modifier. You can use this modifier to add the padding and the rest of them on the test. So let's just add increase the size. We're going to use, font font size because we I saw it can accept yes. Font size. Let's make the font size, like, 17 dot d p. We it's not here. And, currently, you just add dp close to this board here. You add dotdp. Let's see why we have, this. Okay. Okay. We'll call that again. I'm going to come back to that again. Alright.

I'm going to add that again.

The is not

there. Okay. We'll allow that to view.

Alright. That's done. So let me use modifier here. Let's add modifier. So add modify. And, oh, that's showing the modifier.

I use this one, modify modify. I use this for the UI. Dot let's add padding. Like I said, the padding let's say the padding is Let me add pardon top. Pardon top should be, equals to, let's say, distin dotdp.

Okay. So this is what we've been able to achieve using the modifier, like we talk about composable function and modify. So we're going to move ahead. What also have a better wait. Does the better way to us to arrange our UI in a more organized way is to use layout. Okay? What is a layout or what are layouts? Layouts are used to do what? To arrange composable elements on the screen. There are several inbuilt layouts in comp Jetpack Compose. We have column. We have row. We have bus, and then there is constraint layout. Okay? And this, what we are trying to achieve to build a list of courses, we're going to use column. Like, if we go back again to the sample of what we are trying to achieve or the app we're trying we're building, you will see on that sample, I have a test.

We've added a test, and I have, a test field, and then I have a what? A button. So now for me to be able to have all this in one place, I'm going to use a column. That is one of the layouts I made mention. Let me, pull that out and then add a column. I have column. Okay. And then the next one, I will add I will add back the test. So in this column, because I have the next thing I need to add is what's called a a an a test view, it's better for me not to have everything jump back together. So I can use, a spacer,

I need that. A spacer, then add modifier to modifier

so I can have a space in between the okay. I use modifier dot, padding. Okay. Let me use padding of, let's say, h d p. Awesome. So the next I have on the

on the the sample I showed us earlier is

test viewed and a button by the side. Okay? So how do I achieve that? They're just on the same line, a horizontal, arrangement. So I can use like, column is used to arrange things vertically. Why I can use row to arrange, I mean, arrange composable function vertically. I can use row to arrange composable function on a horizontal manner. So the next I'm going to do is to add a test feed. I prefer using outline, maybe outline test feed and outline button. So I'm going to grab my outline. Outlined test view.

Okay. And okay. So over here, I'm seeing so I have so I have errors.

What does that means? If you look at the error I have there, you see that the value is showing an error mean meaning that that value needs something. Let's repeat back to, XML where you have a d test. A d test accept input. The same way with test view. Test view accept in, input. So the value is talking of is referring to the input that this test view is expecting to get. Now the next one you can see there is on value change. Now what is what what does that mean? On value change is called whenever the there is a new input in what? In the test field, that's when the on value change is called. The on value change, okay, lender, returns a new value that you can use to update the test field state. Okay? I'm going to say that again.

I said that this on value, change you are seeing there, on value change returns what? A new value that you can use to do or to update the test field state. I just mentioned this, so I'm going to say a little bit about state before we can move on. Now state in an app is what? Is any value that can change over time. Okay? It's any value at all that can change over time in your application. That is the the the state is just a very broad definition. Okay? This is a very broad definition. It compass everything from maybe a room database to a variable a variable in a class. I can say that the state is used to do what?

To store or update the state of a composable element. This is declared using the what? The remember function, which creates a mutable, mutable state object that can update using the set update, as the set state function. So we're going to go back I'm going to, show you how this has been done on the Android status. So over here, like I mentioned,

I'm going to create a value for this

a variable for this value, and I'm going to call that val. Let me say val

test test value.

This test value will be equals to remember, I I said something about remember that we use state. So I'm going to use state at this point. Okay. Save by remember,

this. So I will use mutable state

of mutable state of.

And this is going to have an empty string because, I've seen errors here. We're not afraid of these errors because we see them. When you change this value, you see them.

Let's find out what this error is saying. We're talking about the station. I took it out. Okay. That's it's we don't need that. First, let's use a cursor,

then the error goes away. So I'll then on this value, I'll call the variable that I've just created here over here. Now, I'm still having error here. So over here, I can then add column, column brackets and say, okay. New,

new,

test, okay, test

value.

Then like I told you about the state and the lander will be equals to this test view test value, then equals to the new, the new value. Okay. Okay. Let's see the arguments that that's showing. We're having a few errors that we

are going to fix

without wasting time. K. Let me see what's

going on, why we have the error over there. Uh-huh. Okay. Let me change the variables for this to be

by and then because it's a list.

It's a mutable state. Import that. Get that station, which is not exactly what we need.

At this point, mutable state value. We can change this to mutable state off.

Okay. Mutable set. That's why we're having the the error. This is not right. You chose the wrong thing. This is mutable state

off. And then we have, okay. I'm going to import that, then

check it again and import that. And all the errors expected to go away at this point. Okay. I'm going to add that. So without wasting time, we're going to look at what we

have achieved at this point.

Now I can add some modifiers here to help this, OUI look more awesome. Like, if you can see from my Android Studio from the preview updates, you see let's check update that and see what we've done at this point. Okay. Let's run it on a physical device so you see what we have already achieved here. Just give me some minutes. We run that on this physical device and then see what we've been able to achieve. So but without wasting time without without wasting time, I can add an alignment for the rows so that everything can stay, the way they're supposed to be. And even also add modifiers to the columns so that, the size will cover the screen of the of the that we we we fix very well on the screen, and then I can add them modifiers too.

I told you what modifiers are used for. So I can,

over here, the, I can use a modifier. Alright. I can use

a modifier to add the padding. Modifier.

Okay. I can use,

modify it too. I don't I wonder why that's giving me the error, but that's the right thing to do so. I do this, modify.

I have modifier. I want it to I want the screen to feel the size,

the what I have on this to feel the size of the screen. Modifier dots. I will use few, max size, then I will use 1.

Okay? I can also add, more

I can also add padding,

padding, then, pardon let

me see. Pardon stats. Pardon start, which is, let's say, sys.bp, and I can add the,

end. Okay. Which is, maybe it's also uses, dotdp. Okay. So we'll move ahead to work on this. So we want to

go ahead. The next thing is to add the the button. At this point, I can use a row because you see, they were arranged horizontally. I told you that rows are also used. Yeah. So arrange things. I can put this. I prefer doing it out that way. There are many other ways you can do that. I want to add row. Okay. So in this row, I will add the bird base, then I will add the button. I like outline, so I'm going to use apply. Apply

button. Okay. Here in that line button, I'm going to use a test compose,

a composable element test. So I will be able to add, add. Oh, no. There'll be an error there.

So I say add. Awesome.

So let's check what we have worked on on a physical device to see exactly what we are building, how it will look like on a physical device. But over here on the preview section, you can see exactly what we are trying to achieve. But I'm going to connect a physical device at once. Looking at our time, we can go ahead, connect a physical device also so we can. So if I put down the Android Studio on my slide, I can pull that up again. You will see that the next thing we need to act what we've achieved is this. So we want to achieve I did how

do we add list? Okay. List on on on

on using compose. Now at this point, I would like us to compare adding list using Kotlin and then using, compose. And Compose, it's just very, very simple to do that. If you look at in in Kotlin, you have to use Recyclaview. Okay? RecyclerView and and Jetpack Compose are both tools that can be used to display list in Android application, but they use different approaches to achieve that. That's one thing about they use different approaches, to achieve that. Now let's look at, to achieve this. Okay. Let's look at recycler view. For recycler view is a UI component in Android Studio that is used to display a large dataset in a list or a graph format. Okay? It is a part of what Android, framework, and it's implemented in Java and also in Kotlin. Okay? It's uses, it is used with what? An adapter.

This adapter provides data to be displayed and handled and handled the, handles the creation and then data, view. Now to use recycler view in Kotlin, you would create a recycler view in your, in in layout XML, XML file, and then create another class that's adapter class now that extends the RecyclerView adapter. The the adapter class would define the data that's to be displayed and handle the creation and binding of the views. You would then set the adapter on the recycler view and your Kotlin code, but in Compose, it's just very simple and straight to the point. In Compose, you just have compose provides more concise and intuitive way to build UI compared to the traditional Android layout. Okay? In compose in Jetpack Compose, you know, you would create a composable function that defines the UI for your list and use the lazy column or lazy, row layout to display the list.

Everything you don't need to create another class or anything. Everything can be done in that just one class we created. One file we collected we created. Okay? The lazy column or lazy row layout creates and binds the view as needed, okay, which makes it more efficient and then and then the traditional way of using adapter and recycler view and and the rest of them. If you have time, I'm going to show you exactly how this can be done. Okay? But now let's look at, compo using, recycler view and then using compose. In terms of ease of use and then the development speed, Jetpack Compose is easier and faster to develop compared to RecyclerView. You know? This is because, you know, Jetpack Compose, what it does is that it uses a more concise and intuitive syntax. I've mentioned this before. And it has no decoration and the binding of views auto automatically unlike using, what's it called, using, RecyclerView.

Now when you talk about in terms of performance also, this work compose is also considered to be more efficient compared to RecyclerView. Okay? DecyclerView uses uses more efficient layout system. That's one thing about it. That creates and bind or confuse needed, which reduce memory or use usage and then improve what performance. However, the performance object back composed may depends on the complex that's complexity of the UI and the number of the item you want to list on that UI. So that you're also going to take note into consideration why when you're working on your app. So I'm going to having said that, I'm going to pull out, Andre's today again so we can continue if we still have the time. And don't forget, if you have any question for this session, feel free to drop it on the chat session. I will attend to that if you have the time.

Okay. Now what I'm going to do at this point is to do what is to create a list show you how to create a list using Jetpack Compose. So what we need to do, we want to display the list of courses. Okay? So I'm going to start by doing this. I like using, a card. Okay? So to not have it model up to look nice. So what I just need to do is to create a composable function. I will say compose. This make it faster for me, and I'll call it, course what's card? I prefer using cards so that I have, things neat and more organized on my on my on my UI. So I'm going to use I said earlier, trust me. I like using Outline. I'd be going to use an outline card also here. Okay. All I need on this card is just just the card. That's all I need.

Just the card. That's all I need. I don't need a lot of things on the card. So I just create the card and then make use of it. But then I'm going to have add a parameter to this card, And the parameter, what it's gonna take will be, cost

tight no.

No. Small letter. Cost title. Let's also, cost title. Look at the name convert, conversion when we are building a Android application. And this, cost title is going to be a string. Okay. So over here, I'm going to create to use a test, I mean, a composable element.

Oh, no. I typed the wrong thing. I'm going to use a composable element,

which takes the string I have over there. That string is what? Plus,

title. This is what this is going to take. So the next for me to go about I'm going

to I'm just looking at my time. Is is to what the next thing to do is to use create another composable function, and this composable function would be for, lazy column because we want to display a list. Okay?

Let me send this to a physical device so we can see how it look. I can pull out a physical device.

Okay. This physical device, we can see it here. Put that out again. Until I can see it here. Okay. Okay. The next thing is to use create another composable function for, list I'll call this, lazy, let's say, learn

okay. Learn

cost

lazy a cost list that will help us to okay. So in here now, I'm going to use call my lazy list, lazy I mean, not lazy list, lazy column to display

the list of the items. I don't need this.

Go to here. Awesome.

So the next is, okay, to create the list the list of the item that I need at this point. So how do I do that? I'm going to create what? A variable. A variable. And this variable should be able to accept list. And I'm gonna call that variable. I like creating it up here. Where did I I

created the first one here. I have a variable.

That's not right. Variable val.

Let's call it cost list. Cost list. And this, remember, using the state, remember what I said about state? I because to remember remember, at this point, because this is a list, okay, I'm not just gonna use I'm not I'm not going to use mutable state list at this point.

Now what I'm going to use at this point for to get a exactly what I'm looking for, which is, is mutable state list of, which would take a parameter string. So let's add that over here. We'll have mutable mutable

municipal states. List of

type it. Yes. I'll make sure I got the right one because there's there are a lot of them.

Mutable state list

of Reatable state list of, make sure it accepts accept

the over here, a string parameter.

Okay. Yeah. That is also so we come back to the lazy column, and we're going to add this up. So for us to see what you're working on over here, I'm going to call this lazy list over here in my in the column so that everything is going to be arranged the way we want it. Okay. Here inside here, I add it. Remember, I can use a spacer so everything is normal. Together, use a spacer, and then add some, modifier to give it, a padding. A dot

padding. And then I can say just csdp. Cs.dp. Okay. Then I'm going to call the list the, learn course. Right? Learn course list. That's what I need Over here. Okay. So we complete this. Now we already have a card. We have a cost title, and then we have, we

have created a a variable for, lazy column. So the last thing we need to do is just to add up everything

in the lazy column, and we'll be ready to to go. So the lesser column would take item

that different items we want to see in the list. Okay? So I can use items

items with s. This that can take list. Okay? Then I will pass the cost list variable over here.

I will pass. Okay? I'm using capital letter. Does

admin? And that would take

okay, for 1 list. You know why that's the work? Because

this cost, lend a a cost list doesn't have the parameters I'm trying to pass. That's why when I try to pass the variable that I've already created over here, it didn't work. So I'm going to add that parameter over here. And then this is what I have. Yes. It's a string. So in this item,

I can then pass this over here. Then we're going to get it 1 after the other, okay, each list. So I can say cost as for one cost. Add user lender,

and then I'm now going to call this course card. This course card will help me to get all the courses when it's been added in the test, field. So I'm going to call course card here.

And this is going to take just one course.

I got a pen. Okay.

Okay. It needs it. I'll create this. Okay. Let's fix that. Now what It depends on what I use over here, the cost I use. I'm going to comment that the item the type of the item I I use. If I select the wrong items because there's many of them. What you understand about, Compose is that Compose has a lot of inbuilt functions. When you select the wrong inbuilt function to use, you are automatically going to get error an error. Okay? So if you use the light the right one, you get it right. But another thing again is here. Over here, there's something going on. We are trying to get list of items. But if I should use this, just string for the parameter, that's will cause a lot of errors.

So what I supposed to use here, I supposed to use list to tell

this that what I'm trying to get is a list, and then I'm trying to get list of string at this point. So with that, if I augment this,

everything will just be normal. Awesome. I'm having an error somewhere, so let's find okay. This error is saying that you must pass something over there. And what do you need what do we need to pass over there? It's the list it's the cost list that we are trying to get. So we have cost.

Pause. That's not pause list. So

at this point, you will see that everything is great. Now we're going to show exactly what we have worked on to see if actually this we are done, but trust me, we're not done because we've not added anything for the on click for the button. So that thing, it will be easier for us when you add a value, and it will be, you will immediately see it. But with that coming on, let's just have a look at where we've gotten to at this point. I'm going to run this. I will close this so we have it in the real life, device. Okay. So what are we going to do at this point so we can be able to manage the click action at this place? Okay?

So we're going to tell the test field what we want what we want, and I'm going to use an if statement to tell the test field that if a text value is not that that on the test view, if a test, value is not, empty, that you called what, cost list, and then add a test value. I can also yes. That's exactly what we want to tell the, the click button to do for us.

The button to do for us. Okay? So at this point, we are going to see if, okay, give me some minutes, like,

the Android Studio is running on a fist trying to build on a physical device, but we can't wait for that to finish. So we move ahead. If Okay. That's, like, interrupting what's going on in

the Android Studio. Don't worry. That will be, that will come up soon. Okay?

It's building. The Android Studio takes some time,

to build and to complete its build. That's what is going on here. So it's building with Gradu, but

I wonder why it's taking this time. It's actually faster. Okay. Let's continue and accept this to happen. Okay. So we're going to say the test value

Dot is not is not empty. If it's not empty, we're trying to tell we're trying to tell the we're trying to say that the okay. We say we'll use cost list. We call cost list dot add.

What is it going to add? It's going to add cost. So that's exactly what it's going to add here. We're still holding on on the andress to the complete to complete its, build. It will add the new, new, what, test value. That's exactly what we want it to do. Okay? That has been done. And, yes, we accept the store.

So install, make this big, and we'll wait for the app to be installed.

Okay. Now it is blank. You know why? Because at the main activity, we never call this function over the in

the main activity. See? Is it's open. It's left open in the main activity. So all we need to do is to come back here and call the function learn. Of course. Yeah. And we rerun this app. So at this point, we're going to see what we've been able to achieve in this session. So if you have a question, feel free to, okay, to ask. And

as soon as this is done, we've achieved our aim. It has the would be the end the wrap up for this course. Just a few minutes, the Android Studio. Sometimes take time. I don't know why it's taking time today. Normally, it comes up, very fast. Okay. But be with it. Awesome. This is what we've been able to achieve. So let's see if we can be able to add anything on the test feed. Let's add Android Android cost

1. Let's add and see what happened. Awesome. We have the list. We have Android.

Okay. I'm going to handle that. You notice that when I typed and I was trying to add another one, what happened? Every the first test I typed towards there, still there. So for me to handle that, I'm just going to add I'm just going to add just a simple just a simple

thing to add at this point here. Okay. I just say that this test value should be empty after adding the first typing in in in to give me an empty string after typing in the first one. If you rerun this again, I'm going to get what I'm looking for here.

Now there's a lot of things we still need to do to move modify to make our app,

everything look better. We can modify the text where this text is coming from. This text on over here. You can modify this text here and add a lot of things. I can add padding

around it. Let's say modifier. Can I use a modifier to add to beautify it? Make it fine.

Say, modifier.

Say modifier. Modifier. Got Pardon. Oh, that's Pardon. I can see it. This is it's

it's, DP.

Okay. So if we run this up, we'll get exactly what we are looking for. So thank you so much everyone for joining my session. I'm so glad to have you and your time. Thank you for your patience. Also, I'm going to say thank you again for women makers for, women's tech global conference this 2023 for giving me the opportunity to be able to take this session. Let's, add courses now, see how our final results what we have as final Android

course list 1. I want to get more of that so you can observe. Awesome. Oh, UI. Cost list again. Let me see. Cost list 2.

Exactly. Another one. You see that could join together because I didn't add pattern on the card to separate them. I can also add pardon to separate them so that they are just on their own. So thank you so much for joining my section. My name remains peculiar. If you have any other question after this session or you want have want us to connect after this, session, you can reach out to me on, social media. Connect with me on LinkedIn or on on Twitter or Instagram with this name. Thanks so much for joining my session. Bye, and see you next time. You can also want us to build a project together, available at all time to contribute to any project and walk you through. Thanks so much for joining this session. Bye.