Welcome back and this video, we are going to create this UI and we're going to set it up, so we're
going to create a function which will set up the UI accordingly, because what we will need to look
at is which values out of those that we get from our API response are the ones that we are going to
require and display in our application.
So first of all, let's build that UI and then afterwards let's create the function which will take
care of setting everything up.
Coming back to our project, we, of course, need to import a lot of different troubles, so many different
images, so to speak, so let's do that real quick.
And you can download the whole project, of course, in the.
And you can, of course, download the project assigned to this lecture.
There you will find all of those drawable.
We're going to use.
So basically, it's just a bunch of vectors here.
For example, let's look at them.
Let's look at the design to close vector done with the cloud vector evening and so forth.
So a bunch of beautiful little icons that we will use for our application.
And if you look at the code, you will see that there are a bunch of paths here with a bunch of data
that then basically creates such a beautiful icon.
The next we will need is, of course, a bunch of colors, strings and so forth, so let's just implement
those as well and I'm just going to add them in here.
So the main screen content background color, which will be this whitish color, not fully white, but
little darker than white than with this dark gray like gray and then this other rather white color.
OK.
Then we will need a bunch of new dimensions, and these are, of course, some that you could define
the way you want, but I just decided to use those values that you can see here.
And as I said, it's really open to your designing skills to create a better design that I have created.
So I'm not a designer.
Right.
So this is something that I, of course, could become better at, but I think it's still a good start.
And if you are not a great designer as I am, then maybe it makes sense for you to sometimes hire a
designer who can at least give you some hints or give you some good advice on how to make a good design.
So these are going to be the dimensions.
You can, of course, also download the dimensions file from the project.
So basically you could have said, OK, just download those files from the start and then we're not
going to take care of that.
But I just wanted to emphasize on the fact that you will need to look into dimensions as well when developing
an application.
But we have seen that multiple times before.
Right.
That it's really important to keep your project clean.
And having a dimension's file where you have everything at one spot is definitely a good start for this.
And then I will add two more strings, which I will require for my application.
So let's go over to String Zimmel and add those here.
All right.
Now let's go to our layout where.
We bring everything together, so here are activity made and currently we only have this text to you,
which is just writing something or saying something like Hello World.
But of course, if we look at the design, we can see that we have a bunch of cartridges.
So we have a card view here and another one, another one.
So we have four cartridges here, which are rather smaller than a bigger card view, which is this one
here.
So we have basically a bunch of linear layouts which put things next to each other and then on top of
each other.
All right.
So I'm going to go over it real quick, but I'm not going to write everything manually.
I think it doesn't really make sense for me to do that.
All right.
So let's look over it real quick.
But as I said, I'm not going to go into details.
So we have our linear layout at the very highest level.
Then it's a vertical one, as you can see.
So things are put on top of each other.
Then we have a linear layout which is horizontal in which we have to cart use.
All right.
So it's this card you here, which is pretty long and then another card view.
All right.
So let's look at the card view first.
And by the way, it's those two here.
So those at the top here.
That are next to each other, so in the cart view, we have a linear layout which is horizontal, so
we put stuff next to each other that we have an image view and then another linear layout where things
are put on top of each other because it's vertical.
All right.
So we have to text use in there.
So it's just what you can see here.
So we have this image, which is next to this other linear layout in which we have a text you on top
of another text you.
And that is the case for the other three.
Cards here as well.
So card views as well, they're pretty much all the same as you can see, we're working with gravity
here.
So we are gravitating something towards the end, so the text use and then the image you were just using,
the ones that we prepared itself from the drawable folder, for example, the snowflake and so forth.
So you can find all of those here, for example, this snowflake here, which is this element.
And then, as you can see, the gravity for the linear layout is center vertically, and that's just
a linear layout inside of the car view.
So this is the linear layout at the top left and top right.
So the top one, then we have the second one, which is second row here with the two card views.
And then we have the final one, which is our bigger card view.
Now, let's look at that real quick.
I can see that in this case.
The weather is going to be much parents, so we're going to take the whole with that is available and
then we have a linear layout within a linear layout here.
So this one is going to be the one that puts elements on top of each other.
So the vertical one.
And then we have a linear layout which puts elements next to each other.
So it's that we have this linear layout that we're currently looking at, which has another linear layout
which contains the whole card view element.
So what we do is we.
Now have this big or linear layout and we have the next linear layout, which is containing this whole
part here, and then we have this.
View, which just draws this line, and then we have another linear layout here where we have two icons
next to each other, so you can see it's, again, a linear layout.
So this part here is also the new layout because we have an icon with a text underneath it.
All right, so if you want to know more about the specific code, check it out.
I think at this point you should be quite familiar with creating your eyes and understanding XML code.
I mean, we have created so many different uses already, and I really want to push forward new features
that you learn new stuff and not just repeat all over and over again the things that you already know.
All right.
Now we need to set up the UI so we have everything set up and the activity mesnick simple.
But we need to give all of those variables that we have here are those views.
We want to give those some meaning, so assign values to them, not to damage you specifically, but
to the text use because they will need to know about the value that they should display.
But even the image you sometimes so in some cases, for example, if you want to display the weather
and it's good weather and we don't want to display a snowflake, so that's something that we would potentially
have to change depending on the weather conditions.
OK, so let's look at that.
Let's create a function at the very bottom here.
Which I'm going to call set up, why so private fund set up?
UI, and it will need to have the weather list, which will be the weather response, so a weather response
object here that we need to pass to set up UI.
And response was, of course, our data class, which contains all of the different information.
Why do we need that?
Well, because we want to use those values that we get from this weather response object in order to
then display the values accordingly.
Right.
So, for example, we want to go through all weather stuff we get.
So for I in weather list thought weather dot indices.
I want to set everything up, so what is this for you?
Why do we need to follow?
Well, let's look at whether you know, the response.
We can see that we get a list here.
So I want to have the weather.
Why do I want to have the weather?
Because here you can see we have a list which gives me information about the idea, the domain, which
is clear, clear sky and.
OK, so these are very important.
So clear is going to say, OK, the weather is, for example, clear.
But this I can hear is going to take care of this playing the right.
I can hear the very top left corner.
So we need to know what kind of icons there are.
And therefore, you can just search for Icon on this page and just let's see if we can find something.
So whether I can ID and it's OK.
List of weather conditions.
So this is what we need.
List of weather condition codes.
Let's open this up and you will find some examples here.
I can tell and we before saw one end, but here you can use different icons depending on the code that
you get.
So here you can see there it is.
I can list.
So for one end, it's going to be the stark image for one or zero two, it's going to be cloudy.
So so basically this is the description that we get and this is the name that we get so that I can name.
So we're not that much interested in the icon itself that they use because we use our own icons, but
we use those codes that we get here.
In order to display the right to build, you saw the right icon that we have so here a few clouds,
scattered clouds, broken clouds, shower clouds and so forth.
So these are some of the code names that we have here.
And what we want to do is we want to use those and display those accordingly.
OK, and said the image that we have prepared according to.
So you can either base it on the I can code or you can base it on the ID, so if you want to be super
precise and you have a ton of different icons that you would like to use, for example, to make specific
information or give specific information about the type of thunderstorm, for example.
So is a thunderstorm with light rain, is it with rain?
Is it with heavy rain?
Is it the light thunderstorm and so forth?
So if you would have or like to have different types of icons for that, then you could use these ideas
that you get here and use those.
But I'm just going to use the icon code, OK?
So I'm just going to keep it simple because then we would have to have very many different situations
to cover.
But I think just using the icon ID is going to make life a lot easier.
OK, so let's just use those.
So let's go back to our main activity and here for every weather that we get and we usually just get
one, but for whatever reason, we could get multiple weather so so they could give us potentially multiple
weather.
So.
Right.
So what we're going to do here is, first of all, lock the weather.
So just to see if we get the right weather.
So this will be a weather name and then weather list that weather to string.
All right.
So here we look at the weather just to see if that gives us useful information.
And now the question is, where would we set up our UI so before we had any further coach here, let's
just figure out where that would be.
And I think it makes sense to set up the UI as soon as we have a response code.
So if the response code is success, then we should display our weather.
OK, so here I'm just going to set up the UI as soon as we have the weather list because we get that
from this weather response.
OK, so let's pass that.
Here is a fancy set setup.
You know, gets a weather list, which is of type weather response, which is exactly what we wanted
to have here.
OK, so before we prepared that and now we can use it to set up our UI.
And first of all, I will just check the weather list and see if I get a log entry.
So the weather is ID 800 Maine clear description, clear sky I can is ickiness 01 and.
All right, so this is something that we can work with, so let's just do that.
So let's start with our TextView main text and set that to whitelist.
At the position of the weather, I.
That.
So what will that be?
Well, if we look at our.
Weather the response here, and we go to whether we can see that we get the Maine, which is this string
here.
OK, so we have just received this information, of course, in order to use demesne, we need to import
that.
So it will set our TV main, which is this text me here, if we look at the design, which is this weather,
so we want to know the weather and it's going to set the weather here.
All right, then the next thing will be, for example, our main description, so we also get the description
right.
So the context will be whether last thought, whether at the position, I thought description.
So if you look a little Lochhead, we get the weather, which is Maine, for example, clear, and then
we have ascription, which is clear sky.
So it's just going to set those two up here.
So it's just going to set in our main activity.
Actually, it's making it's going to be easier this way.
So here is Texasville TV main description, which is going to be this, which currently says condition
is going to be the description, which is clear sky.
Then we can go ahead and set, for example, the TV temp text is equal to whether list dot, main dot,
temp, dot to string.
So where do I get that information from?
Well, if you look at our main, we can see that here we get to double temperature.
And that is the temperature that I want to display here.
So if we go back to our activity main here degree, that's where I want to display the degrees.
All right, so this is going to be this two string and then what I would also like to add here is the
unit of the user's location.
So application resources, that configuration thought.
To string.
So what is this guard unit, this is going to be a function which gives me back the unit.
Of the user's location, so I was going to be Celsius, is it going to be Fahrenheit and thus and so
forth, so private fun get unit where I pass in a value of type string and then I return a string.
And here the idea is that I set the variable value to, for example, degrees Celsius.
And then if the value that is passed is, for example, us.
Or it is a la.
Or it is m so here.
It's going to be a value.
Then I want to add value to Fahrenheit.
And here is an extra sign, this missing and then return value.
So here we get a value pass, which is of type strength.
Now let's look at our configuration, what that will be.
So returns to current configuration that is in effect for this resource return object should be treated
as with only.
So basically, this will return something that will be either us, LRM or something else.
And if it's something else, then it should be Celsius that we want to display.
And if it is one of those and we want to use Fahrenheit for the user.
And by the way, I forgot something here, which is the locals.
So want to have it specifically to the locals of the users.
So where he is, so where he lives pretty much OK.
And then.
This will give us the right value.
And not just as a quick test, let's see if this even works, what we're doing there.
So you see it loaded for a quick moment and then it's as clear as clear sky and temperatures six point
eight degrees Celsius.
All right, so now at this point, you see how we can display data, we can display the information
in our UI in the next video, we're going to see how we can get, for example, the time.
So displaying the sunset and sunrise.
So those two times here that we want to display here at the bottom.
And then I will give you a little challenge where you will need to.
Assign the right values to those different text views so that they will display the right information.
All right.
So see you in the next one.