Hello this is Martez or cowardy.
And here are first first of all I want to change this label here of our app inside this toolbar.
Let's go inside these strings that exemplified.
And for the Apennine Let's actually change this my calculator to calculator and if I go into this activity
on there like I created calculator that is in my file you can see this name is changed.
So let's delete this hello world view.
And I don't want to apparently out to be constrained to lay out.
I want to lay out to be actually relatively out or a linearly out but the constraint lay out is actually
new.
We need to know we need to learn how to deal with the constraint lay out because it's a very flexible
layout.
So we can't use it.
We can actually add our relatively to this constraint layouts or we can just drag a linearly out.
So let's see how we can do that.
So first let me show you the Android emulator.
First of all we need to have a text view here at the top that is going to contain the operations.
So let's go on to Android studio.
So let's add a text view here.
Inside is Pallot section.
Could be kind of widgets.
And let's see the context and then let's choose this takes you and as I did here at the top.
So now I want the right edge of this text view to be attached to the right edge of my screen or this
layout constraint there and I want the left edge of this text view to be attached to the left edge of
this constraint layout.
And also this one the top edge of my text view to be attached to the bottom edge of the toolbar.
So let's see how we can do that.
Let's see this little circle at the right edge of the stage through that is pulsating.
This green color here right.
Let's throw back a line or two constrained to the right edge of the left.
Now it is constrained is created and make sure you can see these icons here it is turn off auto connect.
Let's actually turn this feature off because we want to create these constraints manually.
So let's also Dratch a constraint to the left edge of the screen here of this layout.
And here let's also drag a constraint to the body image of this actually.
You can see it is this bottom of the toolbar just create a constraint here right now I want this text
view to be match parent.
I want that.
Which of these takes feet to be much better.
And I want the Viets of these states to take the whole weight of this screen this kind of straitly and
so selectees takes you at the right hand side you can see these attributes.
So here it says we have this play out of it which is actually raw content.
Let's change it to match parent.
Now this takes you takes the whole week here.
Right.
That's it.
If you want to you can add a pad to this text.
But also let's go into this.
If you are attributes.
And here we have this padding actually be so for the lift let's add 10 or let's add number eight.
I think is good.
So this is our Takes you here to select it and let's specify an idea for this takes fuel let's say the
idea is to use the calculations because they want to show they use the calculations that happen here.
So teach the Cal collations and that person intercranial people so this is the idea.
And for the text attribute it still is this value but let's just put numbers zero here as the text as
the initial takes of this view.
If we can change it later.
But here let me tell you that it is not good to just pro-white hardcoded values for these attributes.
We have these strings that I that exemplify and we can create string resources there.
It is recommended to use that file but here.
Because I already taught you how to use the strings that is in a file of you're not going to cover that
in this application but it's recommended to use that resource file.
So now let me show you the emulator.
Now we need to have this view here right that it's going to contain this text.
So for example the user enters select or taps number 5 6 7.
We want to have this view that is going to contain this text view.
So let's go back to android studio and here we are to at a linearly and two are constrained today out
here.
Below it is text view.
So instead this pallet section let's click on these layouts here.
And click on linearly out vertical.
I just threw it and put it here.
Say this components resection.
Just put it here below these kind of straitly.
As you can see these lines are actually guiding us that we're you actually want to place this linearly
and you want to place it here inside this kind of straitly out and below this DHC calculations takes
you to so just really sit here.
Here it is our linear layout vertical.
So now now because it is actually just a kind of slightly out it is not.
It is actually taking the entire width and height of our constraint.
So we don't want that to happen.
So now let's hear inside these attributes section.
It's click on this one this icon that says View all attributes so that we have our list attributes here
so that we can see these constraints.
And for example the lay out and the lay of height as you can see the lay out is much peril.
So that's good because we want this view.
So let me show you the Android emulator.
We want this view here to take the entire weight of the parents lay out.
So now this is linearly as vertical.
So they have to beat its parent.
Let me actually increase the reach of these attributes section.
So the lay out between my parents for the last time.
Let's add another value let's say that we have for example number one hundred and fifty.
So I think that's good.
One hundred and fifty is good for the height of early in the early hours.
So now let's also change the background color overlay so that we can see how it is actually affected
how it is positioned inside early or later we can change this color.
So let's click on you all the attributes and here you can see the search.
I can just click on it and search for the background attribute.
So let's change the color to green.
So hash tag for the other red 0 0 for the Green 9 9 and for the blue 0 0 and unprecedented.
So now the background color is green.
Now we can also see that these constraints are not created here for this linearly as vertical.
So let's actually go into this.
Let's see these constraints.
So this linearly as vertical.
Let's create a constraint to the right edge of the screen.
Let's create another constraint for that to the left of the screen a constraint to the edge of our text
view.
So as you can see I cannot create that constraint here it's not actually visible.
So we need to do something else.
We need to say that this linearly at this rate is linearly as vertical here and inside this attribute
section you can see that it's as if I hover over this icon.
It has created connection created connection above.
So if I click on it it is going to connect create a connection to the above.
So let me change the position of this linearly or vertical You can see that a connection is created
to the bottom edge of this toolbar so I don't want that to happen.
So in order to do that or constraint I just need to double click on this little circle you can see that
here it is.
Just click on it.
You don't have to double click you just need to just click on it and you can just change the position
of your linearly at WorldCom and then you can just create a connection to the Pradip edge of your takes
view of the stage here.
But as you can see it's not possible it's not actually allowing me to create a connection to these to
the bottom of the text view.
So in order to solve this problem we can just create a connection to the bottom edge of this tool bar.
So again it is creating a connection above if I click on it.
Now a connection is created to the above.
And here you can see that now a connection is created to the bottom edge of this text view.
So I don't think maybe it is a bug in Android because constantly out is new but it didn't allow me to
manually create is constrained by just clicking on this.
I can here I could create a constraint to the bottom edge of this text view.
So now I can change the place of this linearly Athletica.
And I came up with it here as you can see if you have some margins yet at the left and right between
these margins.
I don't like these margins so just that it is a select isn't nearly as vertical.
And here inside is attributes section here it says the margin for the right is 8.
That is value and put number 0 here.
And for the left margin let's also delete this value and put the number zero here.
And now there is no margin here right.
And the constraint is also created to the left right and the top.
So let's run the app and see that everything works.
As you can see it's going as an error.
And here let's go back to android studio.
Here it says error.
One hundred and fifty is incompatible with attributes and that lay out height dimension.
So there is a problem here that slick slick isn't nearly as vertical as he can see.
One hundred and fifty is not with Vinita with DP here.
Right density pixels and unprecedented on your keyboard.
So here we are putting a hard coded value of one hundred and fifty.
Is it good to do that.
For example are other devices with different heights.
Screens can handle these kinds of layouts.
Yes they can because Android use uses deep dots per inch and it doesn't really matter how you what value
you put here inside.
For example out with all the height of your views and it is going to manage that for you for specific
devices and then you are not going to encounter any other problems because it uses very great technology
that can handle these values.
So here and that's why I told you to read that article about supporting multiple screens.
So now let's run the app
emulator and now the app can run successfully.
So here you can see that we have this text at the top.
We have this linearly as vertical here and everything works fine so far.
Let's go back into its studio.
Let me get this right here.
So you actually close this.
Here's a so now we need to add this takes you to our linearly as vertical.
So let's go back to android studio and here click on text inside his palette section distractors takes
you here and put it inside so you can put it here you can either put it here or you can either with
it are here inside this componentry section so it doesn't really matter.
So here we have this takes you inside is the helipad where go.
And a door in.
And in order to make sure that this view is inside is linearly vertical.
You can see this componentry here you can take this cup through here and you can see that this text
is inside this linearly at vertical or in other words this linearly nearly vertical is the parent of
the state's view.
So now we want.
This takes you to be here at the right hand side and vertically center.
So let me show you the studios up just select estates view and for the layout beat let's choose the
value lab content.
And here I want to put this takes you at the right hand side of this linearly as vertical.
Right.
So let's choose this out gravity attributes.
Let's click on this view all attributes.
And here we can search for gravity.
And here we have these lay out gravity.
Just open it and let's check the box that's right.
Now this it takes you is at the right hand side.
And let's just make it wider.
And here we have this center vertical is also choose this one.
Let me uncheck this right here.
So as you can see and I checked the center vertical is nothing happens here because this attribute is
conflicting with other attributes and that's why it is not affecting the states view.
So let's just choose right.
Let's check the center reticle here.
Now that we said they laid out gravity of this text view to be right you know that what function this
as gravity has right the gravity is going to determine the place of this play out according to the parent.
So we know that it takes is the child of this linearly out and the linearly is the parent of this takes
view.
So when we say text view the lay out gravity of this view to be right this means that according to the
parent which is this one is linearly as vertical IB wants this takes to be at the right hand side.
But then they wanted to change the place of the state's view to be center vertical we couldn't do that
because I'll tell you this atrip it is going to conflate with other attributes.
So what is that other attributes we have this linearly at vertical which is going to be the parents
right.
The parent attributes affect the child views.
So I said is linearly out vertical.
If I get selected here inside its attributes section let's search for the Klav it he attributes the
gravity attribute is going to specify the position of the child views inside the parent.
So the tissue is the height of this linearly as vertical.
So here we have this gravity strip you open it.
Now we can see that this takes a view.
The child wants this child to be centered vertical here.
So let's find this attribute here center vertical and check the history books.
Now you can see that this takes you here is now at the center Retic of this linearly at vertical.
So it is very important to consider other attributes.
For example the parent the child.
All these attributes are going to actually be completed with each other.
If you don't know what you're doing in your exemplified this is very important.
Most of level of hurt is ignored.
Are these attributes and they are going to actually encounter problems with their layouts.
And this is a very this is going to be a very big problem later when you want to create complex layouts.
OK so now that we have this text view here the right position.
Right.
Let me show you the emulator is the position that you want to have the text view.
We can actually change the padding in the inner spacing of this text view.
So let me close this assertion here.
And here we have this padding attributes supporter the right path Pat this at this point in here we
can say for example 20 inside this place we can say 20 or if you want to you can't change this value
but I think 20 is good.
We can also increase the size of this text inside this text view.
So let's search for the text size if you want to.
You can search or you can actually as you can see these attributes are ordered alphabetically.
So if I scroll down here we can find the text size is t here the text size here is that it is the text
size and for the text size and its attributes we should always use s p.
So what's a piece stance for.
It stands for scale independent pixels.
OK.
So because we want to actually specify the text size of text view it's very important to use a speed
scale independent.
It is going to be independent to other screen densities.
OK screen independent pixels and then press enter on your keyboard.
So let's specify the value here let's say that we want to have for example number 80 s p and unprecedented
on your keyboard or or we can change this value to for example 100 espie of 100 is too large a century
to 50 SB to change you to 25 or maybe 50 or 30 Espy is good I think.
So let's change the color of this view so let's say let's change the color of our linearly out that
contains this text view to white or we don't have to specify any color 0 so that the color of this constraint
to lay out is going to actually affect the color of our linearly out here.
So if I did it to this value as the color of this linearly out and unprecedented president keep it so
you can see because you already are selected the that material that light we have already is light colored
here.
Right.
And we have the this view here.
OK that's it.
Let's also specify our text for this just strike this text view.
Let's find the text attributes here.
So we can find it here.
So let's put number zero as the text of this text view.
Now let me show you the emulators so that we can see what we are going to do next.
Now you are going to actually saw this equal what button when you're ready to put it later.
For now we're going to specify these numbers.
These operators this one this see button here that is going to specify the clear.
What if I click on it as you can see aerobraking it clears.
So let's go back to Andrex city.
And here we need to add another linearly and vertical to are constrained to lay out.
Let me show you the emulator here we can see that we don't want to put this equal part in here yet because
first you want to specify these numbers and these operators here and this find this a clear pattern.
So for example if I have something here if I click on this clear button everything clears.
So now let's go back to android studio here inside this palace section.
Click on layouts and then select is linearly at a vertical here and just drag it here.
Inside these constraints lay out make sure that you put it here inside these constraints here and below
is linearly vertical here above.
So selectees linearly at vertical.
Now Vinick we need to add some constraints.
And here at the right hand side if I actually click on this view all attributes here you can see all
the attributes.
And if I click on this icon again.
Now you can see less attributes.
Now we can see all of these constraints so let's click on this one here.
Let's click on this icon that says Create a connection above so that the connection is going to be created.
You have this linearly as vertical.
Let's create a connection to the right and it let's create a connection to the left.
OK.
So another book I haven't actually created these connections because I want to put this equal but in
here between the ceiling nearly as vertical and this fine let's actually increase the top margin of
this article so as you can see it is now 8 percent to 10 and here are for the right margin.
Obviously New Orleans article has changed its value to number zero.
And for the left margin of this linearly out vertical is change the change the value to number 0.
But still you can see that there is some space here at the left and right are in order to solve this
problem just like it's not linearly at vertical and for the layout we choose match parent.
Just click on this little triangle and to match parent and now you can see that there is no space here
at the left and right.
Let's also add a background color to this linearly as vertical sort of selected.
And here it is you can view all attributes and so for the background attribute here.
And for the back of collarless actually testify to threat so hashtag 9 9 0 0 0 0 and unprecedented here
on your keyboard.
Now we're going to add some horizontal linearly outs to these vertical linearly here if I show you the
emulator you can see that we have some rows here and columns.
So in order to create these rows we're going to add some horizontal linearly outs to our lead vertical
linearly out here inside this pallet section to click on layouts.
And this time.
Let's add this one linearly at horizontal to this rate linearly vertical here.
Now let's actually go back to our attributes here.
And let me click on these attributes so that you can see list list attributes here and select linearly
and horizontal and for the layout of its match parent is good.
Don't change the.
But for the layout height.
Let's change it to wrap content.
And here we are going to add some image buttons to are linearly out horizontal.
So inside this palette section here we have this image just just click on it.
And here we have this image bottom image button isn't a button but it's actually an extension of what
we can add images to this button.
So this tract is the latest image button and just throw it here and let's put it here inside this componentry
just put it inside this linearly out horizontal.
So now this window is opened for us.
And we can actually specify an image so let's choose one of these images here or this one I see down
to around as the initial image and then click on OK.
But here are lots of indice linearly or horizontal inside these componentry So like this image button
here.
So first of all let's give a packet on to is linearly horizontal so the selected and let's find the
background attributes it's the background for example of blue hashtag 0 0 0 0 9 9 and then person at
your keyboard.
So here it is the back color of are linearly out horizontal.
And let's also change this image of this image button so just select this image pattern here.
Let's find the RC attribute here inside this attributes section and you can just click on this ellipsis
button free that's And here we can search for our image but we haven't still added our resources to
our application.
So let's actually close this window.
Let me of Indiana review and here if you want to you can actually just right click and destroy bill
folder and then click on it reveal in Finder.
If you're a Windows user or there is another option.
In order to see the contents of this folder.
But now I don't remember that.
But if you cannot find it here you can just find the path of the project inside your computer and then
you can go inside it's restful there and then you will find a suitable folder.
So let me click on this reveal in Finder.
So here we have these folders.
Right now we can add the resources that we've downloaded to this red folder here.
First we have this tribal folder that contains For example this I.S. Lanter background.
So now let me show you the folder of our resources.
So here it is our resources and we have this tribal folder if ify of any Strobel folder.
I'm going to actually just select all of these images and then right click on them click on copy copy
15 items and then I'm going to open this tribal folder of my application and then paste these images
here.
Let's click on back.
Now let me click on by here.
So here we have this enjoyable dash STPI enjoyable dash x x.
Actually these names are very important if you want to create your own folders make sure that you have
these names.
So because of this race follower here doesn't have followers with these names here with the same name
as these names.
I'm going to just copy these folders and paste them here inside the rest of my application.
And now let me close these two folders here and if I actually open these tribal folders you can see
that now it is updated.
And here all of these images are actually added to the tribal folder.
So let me close it.
Now let's select this image button here for the SIRC attribute Just click on this ellipsis button.
So now let me show you the emulator so we are going to put number 7 here as far as the image or image
with button.
So here just search for seven and then just select it and then click on OK key so number seven is added
here but there is a problem here.
This image pattern is taking the entire width of our horizontal linearly out.
So let's select this image pattern.
And here you can see that the layout which is match apparent changes to wrap content.
OK.
So that's it.
Now let's run the app so that actually we can see that everything works fine.
So here it is our button and we have all our views properly placed inside our concern.
So I think that's enough for this story all in the next issue or are going to continue adding components
or widgets to are linearly out of reticle here.
So thank you very much for watching.
And I will look forward to seeing you in the next tutorial.