Hello this is what has occurred and it is it's real we are going to add number eight to our horizontal
linearly out here.
So let's go back to the studio and here inside this palace section.
Click on images and let's add an image button here into this video linearly or horizontal and beside
this number 7 here.
So let's search for the number 8 number eight.
So just select it and then press on.
OK.
Now we have this image button here.
But as you can see this number 8 is not appearing here.
So let's select this image button and here for the layout of which you can see literally activate is
number one let's delete this value.
And now with its wrap content.
So let's find the SRT attribute and let's again search for the number 8 key just select number.
This image here and then choose the image.
So it's very important that we actually delete it.
And one more time let me show you what's the error here.
I want to add the image button.
Here inside this Linaria horizontal and I just search for number 8 and because I didn't select number
8 it couldn't find the image.
It's very important that you select the image and then click on OK.
So that the image is here but as you can see again the problem I currently had maybe this is a back.
So again we need to find the RC attribute and then click on this ellipse spotted this search for the
number 8.
So just double click and it's number 8.
And now the image is appearing here.
So again here you can see that the with is raw content.
So the layout vate is number of.
So let's delete number one here and and press on until you on your keyboard again for the number 7.
The layout is there is no value for the lay out weight and there they.
Which is a rough contact right.
So I'll talk more about it later.
For now let's just add the components to our linearly authorities onto.
So let me show you the emulator and let me actually show you this picture.
Here it is the number 7 8 9 and another operator here.
So let's go back to our studio.
Let's at number nine.
So again another let's add another image pattern into the city nearly half horizontally.
Let's force search for that number 9 to select it.
Just double click on it.
Again it couldn't actually find the image.
So then I just click on this button and search for the number line.
And again I was selected.
So now that we have the number 9 here to reactivate let's delete this value and for the last week we
can see the value of our content and finally we need to add an operator.
I want to add.
So here you can see that we have this divide OPERATOR I want to add the plus operator or the ADD operator.
So let's go back to our studio.
Let's add an image button into our Minneola For example here.
Let's say for the ADD operator here or let's search for the plus excuse me the our image is named plus
and then click on.
So just double click on this image.
So again if you need to find it again I don't know maybe this is a park Andrys studio.
So here let's lay out which is actually the number one.
And then a person on your keyboard that they out with is raw content and the lay at home.
He's also the accountant.
So here you can see these components are actually placed here.
But I want to make sure that these components are always the same always taking the same space that
they require.
So now let's select all of these components inside these components resection.
It's easier to set all of these image buttons if you're using a Mac.
You can just hold down the Comanche and then select all of these image.
And if you are a Windows user you just need to hold down the control key and then select all of these
image buttons.
Now you can see that the layout with all these image buttons is actually the raw content here at the
left and the right hand side at these attributes again.
It is the attributes that are shared with all of these.
Actually with all of these image buttons.
So for the layout Viets we can see that the beat out of it is zero.
But here we have to lay out wait.
Assume that the weight of the linearly out horizontal is actually divided into four parts.
OK.
So we have one part for the number seven one part for the number eight.
One part for the number nine and another part for the plus operator or the operator.
And I want each part to have one image button right.
This means that we can see that the layout made of all of these image buttons should be number one each.
Each of these image buttons should take one part.
So we can say number one as the layout weight of all of these image buttons as you can see.
Now all of them are appearing here.
But for this plus operator here I want to increase the height of this image.
So for the lay out weight height Excuse me but you'll see much parent.
And here you can see that we have this one but I think for this plus uprated it's spitted.
It's better to use an image of you instead of an image bottom.
So let's delete this one.
Let me actually select this one this plus operator here this image and then personality on your keyboard.
And here let's add an image view into our linearly alcoholism and also just put it here as you can see
now and putting it inside is componentry section because it's difficult to put it here.
And so when I put it inside these components resection and these lines are actually guiding me to in
order to specify vid I exactly want to to put this image for you.
So I want to put it inside this linearly and horizontal and below all of these image buttons.
So let's search for the plus sign.
I'm here so we have these actually image of you here so they lay out the height of this actually plus
sign is that content solicits change to match parents so that everything is fine.
As you can see now it's much more beautiful and we can see it better.
We have now we have number 7 8 9 and this is you.
So make sure that they get you that sets the as height of this image to match parents because if you
set it to rap content the layout is going to be changed because this is an image view and other components
are actually the image buttons.
And because we are adding this image view as the last component here is actually the other image buttons
may have actually some changes to the layout height.
So we're going to set the length height of this image to match paired match preferences.
That's the height of this image view to be the same as the height of the linearly or horizontal.
So because for example we have number seven number eight and nine.
These image buttons are actually set again at that height is set as match parent.
Here we can see if I say all of these image buttons you can see that they are actually taking some space
here as the height and it's much more visible this way.
If you want to you can specify a heart with a value for example number 50 80 10 100 for example for
the let's select all of these components inside this linearly horizontal number 7 8 9 and this plus
sign.
Let's say for example number 100 That's the height OK.
It doesn't really matter or we can actually set another value for example number 50.
Number of these not good or we can't say number one.
So now that we put all of these components inside our linearly horizontal we can change the background
color of this linearly horizontal to a default value.
So just select this linearly horizontal inside this componentry section and then we can view all attributes
and for the background attribute value here just to the value and press on your keyboard.
So now let's add another linearly and horizontal into our linear area.
We're Tikal here.
So inside this componentry section Let me close this linearly and horizontal and here.
Let's add another linearly and horizontal.
So just click on this layouts here and select this Denia had horizontal and put it here inside this
componentry section inside this nearly as vertical as you can see here actually where to put it inside
is linearly as vertical but below these are linearly or horizontal here.
So not just selected and for the layout height.
Let's change you to wrap content.
And here we can say we need to add some components here so inside this image is here it is Capellas
section just click on images.
Let's add an image button into this linearly horizontal.
So here we need to let me show you the emulator.
So we need to add number four five six and an operator here.
So here we need to search for the number for.
So just double click on it in order to select it.
And here to select this image button and you can see out with it's rap rap content and the height is
raw content.
So let me click on this icon in order to see less attributes here so we can see that the outfeed weight
is number one.
OK so let's delete this value and then press and it'll channel keyboard so that it is placed on a proper
position.
Inside is nearly out horizontal.
Now let's add another image button into our linearly and holds onto it.
Again I want to put it beside this number 4 here.
So put it here and now you want to have number five.
So just double clicking on it in order to select it again it couldn't find it and I need to find it
again.
So we have number five and we need to delete the value of this slowly activate and then precedented
on your keyboard again.
You need to have number six
so numbers and the layout weight is going to be nothing.
And finally we need to have an operator.
So if I were to add the minus operator here.
So I'm going to actually select image view instead of an image button.
So just try this image view here beside this number six your letters for minus or subtract subtract
and then click on OK.
So again it couldn't find it meaning to search it again.
So here it is our minus operator but again we need to change the outwait of all of these components.
So inside these components through section to select all of these components we can hold up the shift
key and then select select all of them and for the lay of it let's add number one here.
So here for this image view I'm going to set the height to change the height of one of these components
to 100.
So let's say that we have 100 as the layer of height but we forgot to do another feinting we need to
set the layout of all of these components to zero.
So all of them.
And then for the lay out with ST-W 0 here.
OK.
The same as the image buttons and the image above.
So not everything works fine.
Right now we need to actually let me show you the emulator.
So we need to have number one to free and then another operator.
So let me close these two linearly or horizontal.
So here you can see these layouts inside this componentry section.
So inside this pallet section just click on layouts and you need to have another linearly out horizontal.
So just put it here.
I want to put it inside it's linearly as vertical but below these are there linearly or horizontal so
I need to actually just play with it a little bit so that it can find where I exactly want to put it
here.
Or if you want to you can just put it here but it's it's really hard to just put it inside this lay
out by using the screen.
So I'm going to actually put use this componentry and then put it here.
So let's select this linearly horizontal and for the layout height it's changed to raw content.
And here are let's add an image button to this linearly as horizontal.
So let's find the images and then click on image pattern and drag an image into all the nearly out horizontally.
So now if you need to add number one.
So let's search for the number one.
So here is the number 1.
And for the layout vate Duffin and you can to have another image in here beside this number one number
two
against select is number two and for the left vate not just this value.
And another image in here beside this number two here.
So many times have number of free.
So again you could why it couldn't find it.
I need to select it again.
And again for the Left wait.
Just delete this value.
And here I'm going to actually just let me show you the emulator so here we have a plus minus.
And for the operator I'm going to use the multiply operator.
So here let's add an image view.
So just drag an image into our linearly or horizontal besides number three search for the multiply operator
and select it.
So again it couldn't find it multiply.
Here for the.
So now I'm going to select all of these are.
Let's go back to the design I want all of these components.
Number two.
Number one number two number three and this multiply operator here inside this componentry section.
So I'm going to set the out to zero and the layout vate to number one OK.
I'm going to set the height of all of these components to 100 OK.
So now that's nice but you can see that we cannot have an adult for example and either linearly a horizontal
here we could add it inside linearly or horizontal and it can actually create a scroll view automatically
for us for the user actually but I want to see all of them here in one place.
I don't want to I don't want the user to scroll.
So we need to do something else.
We need to actually decrease the height of our image patterns and our image views.
So we can do that because if I select this linear horizontal horizontally can see that the height is
the content.
So height of all of this linearly it's ratcheted up content.
And also these aren't nearly as vertical.
Height is hard coded for this linearly and vertical that contains all of this linearly out horizontal.
So we can actually set the lineal height of this linearly and vertical to for example number 200
or maybe 300
but I think it's good to be 200 or 250
not 200.
So now as you can see nothing is actually other components for example image patent for the number one
to free and the multiply operator of you cannot see them.
So you need to do something else.
We need to say that this one is linearly as vertical to the left hand to be wrapped content right.
And we can actually select all of these image buttons and his image views.
So here this is really important to make sure that you only select these image buttons and these image
views not any other linear layouts.
So we have this one image with a number 7.
So only select the image buttons and the image views do not select any other.
For example layouts like me said all of them
are here for their layout height.
We can say number 80 to be no height or we can actually change it to number 70.
75 this 75 is good.
So now we can add another linearly or horizontal into early nearly vertical.
So let me just close all of this linearly out here.
Now inside is pallete section just click on these layouts and let's add another linearly or horizontal
into our linearly as vertical.
And below it.
These other linearly outs.
So just with it here and a selected and for the lay out height the select graphed content.
Now let's add an image pattern into hardly any reason to select this image pattern and this added here
into these linearly out horizontal.
So let me show you the emulator.
So we need to add a number.
We need to have this clear button.
This is zero.
And another operator here so we can actually say we can't search for that clear.
I think we don't have the clear image but in so we don't have to have an image view but we can actually
find.
No we don't have to have an image pattern here.
So let's click on council and let's add an add a button into a linearly or horizontal to INSIDE POLITICS
and click on all and then select this button and put it inside is linearly horizontal.
So now let's select this spot in here and let's delete this value of the Outhwaite and then personated
keyboard.
So we consider the lay out Viets and nearly as height about what about an ace wrap content.
Right.
So now let's change the text of this pattern to.
For example see if you're going to increase the size of this part of the text of this pattern later.
And here we are going to add an image pattern for the number 0.
So inside this palette section click on images image button and then just put it here beside this linearly.
So it is see a clear pattern and inside linearly authorities.
So let me make sure that I actually put it in the proper positions.
Here let me search for the number zero so it couldn't find it.
And I'm going to search again so now we have this number zero here.
And for the L.A. outwait I'm going to delete this value
so right.
And the email button.
So let's change the layout height of this image within 275 or maybe let's see what is the height of
these other image.
And so it's going to be weeks later for now let's just put it this way.
And then we need to have another operator right here to have the device operator.
So we are going to add an image for you here.
So the search for the right operator
here let's do the display out.
Wait we can see that the left feet and the layer of hightest wrap around.
So that's good.
OK.
So now I'm going to actually say that I'm going to specify the lay out weight of these components inside
this linearly authorities.
But we have only three components not four.
So one component should take two parts.
OK.
We have four parts but we only have three components but only one of them.
One of these components can take two parts and it must actually because that is going to be disorganized.
So we can see that the spot in this clear pattern.
Let's change the height of the sclera went into 1775 first.
Now we can say that the data out of this clear pattern is going to be zero.
But still the height is going to be to AK and selectees 0.10.
So for the lay out of this actually assigning the value 0 for this 0.10 But what to lay out wait we
can say number one and for this divide in his view for the lay out for the outside let's say that it
is 75 and out of which it is zero.
But the lay out of 8 is number one now we can see that everything is working fine and you can see that
the lay out weight of this pattern is to it is taking two parts.
OK I told you that is so that the layout of our A'Lelia isn't all always going to be actually is going
to be a four parts is going to contain four parts and we have here we have three components.
So one of them should take two parts and the others can take one part each.
So now let's make this clear.
But then let's increase the text size of this clear and so that we can view all attributes and searches
for the text size attributes here.
So here is the take size and we can say for example number 50 or we could actually change it to number
70 or maybe number 40.
Or maybe number 45.
I think number 45 is good.
OK.
So that's it.
This is our layout and now we can change the background color of our linearly as we're vertical that
contains all of these nearly outs here horizontal.
So let's select this linearly as vertical that contains these linearly outs here horizontal horizontal
linearly outs and for the back enormous tribute to this value and unprecedented on our keyboard.
So I think that's beautiful but we could also change the background color of our image patterns.
So for example let's see that
let's say that for example I wanted an uncle out of this number seven even image button to be f f f
white.
I think it's good.
It's beautiful.
Let's actually set the background color of all of these image patterns to be white.
So select all of them.
So here let me point out that you should only or in other words you must only select these image patterns.
OK.
Because we want to only change the background color of this image patterns and this pattern so select
this image pattern here.
So we all it changed depending on color of these numbers.
And so I'm going to select number 8 and this font so I'm going to select this I'm going to open this
linearly out horizontal.
And number four five six and this one number one two three.
And we have this button and this zero OK.
And here let's actually for the back in and attribute this hash tag F F F and unprecedented on your
keyboard.
So I think it's now good OK for these image views.
For example let's select this plus button here.
This plus sign.
Let's say that I want to pack in uncolored to be void it changed to select select all of these interviews
also.
So here select them inside this layout if you want to select all of them I should only select hold down
the shift key on my keyboard in order to select them because if I hold down the Comanche is going to
switch to that.
So it takes that and for the packet of attributes here we can't say hashtag I think it's now much more
beautiful.
So let's run tiap and let's see that everything works fine.
So it's good.
And here we could add the plus side.
So let's go back to Andrew video.
And here inside is componentry section.
So just select this linearly out vertical that contains all of these buttons and these operators.
So I'm going to increase the top margin.
So let's see less attributes here and that's change number 10 to number 15.
If I run the app.
Now let's see what happens.
So I think that skewed so finally you're are going to add the equal image to our lay out here.
So inside this palette section just click on images and then we have this image of you just drag it
here into our lay out here just put it here.
You can see this space here.
That's why I created this top margin for this nearly as vertical.
Just put it inside this empty space.
Let's select this equal image.
OK.
So here because this is actually a constraint lay out.
Remember remember I told you that it turned this auto connect feature off because you wanted to add
the constraints manually manually.
But here for these equal image we want to get help from this auto connect feature the auto correct feature
is going to help us.
In other words it's going to it's going up automatically create constraints for our specific component
according to how we want to position it inside out.
So just turn on this feature now and select this image this equal image and for the layout we assign
there are 50 and for the length height inside the body and about 50 that unprecedented your keyboard.
So now let's just change the place of this equipment.
So I want this image to be between number eight and number nine just here.
So now as you can see some constraints automatically created for this image here.
Right.
The left constraint and the right goes straight.
So now I'm going to run the app just run the app and then click on OK.
Let's let me shoot the emulator.
As you can see it's going to actually show it as an error and it says that number 50 alone is not allowed
so you need to change it to DP before it actually puts these DP for us automatically but now we need
to actually put it manually.
So here you can see that our image is equal images is now at the top because we only created the left
constraint and the left constraint and the right constraint.
So we need to have also the top constraints.
Just click on this little circle here at the top.
This little circle that is pulsating.
And I'm going to create a constraint to the bottom edge of this linear layout vertical that contains
this text view that it's going to show us the result.
So I'm going to just create a constraint.
I'm going to just throw a constraint to the bottom edge of this as you can see it's kind of tricky but
if you can actually dislike it here to the bottom edge of this linearly as vertical.
Now you can see that it is actually red.
I'm going to just really sit here and I can straight is the top edge of this image this equal image
is actually connected to the bottom edge of these are linearly alphabetical.
So now this bottom edge of this image and way to connect this image to the top edge of this linearly
and vertical that contains these numbers and these operators.
So you can see this little circle that is pulsating just selected and just right your connection to
the bottom edge of this.
So it's kind of tricky but we need to do it here.
To the top edge of these linearly out vertical here so you can see this collection is now created at
this border at its top edge.
This by the image left and right.
So here we can change because we already just turned on this iconic feature.
We can't change the place of this image here.
Or we can actually just let's just put it a little bit to the right the selected.
And then let's put it here.
Or we can just put it here.
It is.
It doesn't really matter very petite but you can just change it if you want.
I think that's good.
Now let's run the app.
Let me show you the emulator.
So now again it's showing us an error and that's because maybe or.
We need to put the DP here again for the layout of it and that the height.
So when I run the Afghan It may have to erase and also the emulator is actually restarted.
I don't know why
so I was against it the app is running on the simulator and everything works fine.
We have this image this equal image here and we successfully created the layouts that lay out of our
calculator application.
So that's enough for this tutorial and it's really we're going to code the app.
Thank you very much for watching.
If you have any questions about these concepts that you've learned so far please watch the discussion
in Nichol's and I will do my best to answer all of your questions.
Thank you very much for watching again.
And I look forward to seeing you in the next tutorial.