Hi everyone.
So in this story we're going to go ahead and create another reproduction of the Android application
called colored app.
So as you can see I actually updated my android Studio 2 version 2.0 three point two.
And let's create an android studio project to just click on this start in your Android studio project
and here for the application and just type in here color app color app and you can specify the company
domain here and the package name and the project's location just carry on next.
So here choose minimum STK AP A16 Android 4.1 did it mean for the phone and tablet.
So just got to connect and here is interactivity next.
So here I don't change anything.
Just click on finish.
So as you can see here our project is created.
So now let's first design the user interface of the application.
So let's go through the activity underlaid minute example here.
So as you can see we just need to open the rest for their layout and then double click on this activity
under Lowman and examen.
So let me double click on this tab here.
Activity on the limited example.
In order to make this area wider so let's select is hello world takes view and then press on delete
key on your keyboard.
So now as you can see we have this constraint play out.
So this is the level that you're going to use inside this application.
So insert is pallete section.
Just click on actually all right here select button and just directly spotted here into this lay out
here.
And as you can see I am actually centering the Spartan center horizontally and I am position according
to these guidelines.
So just put it here.
Here look at these icons.
The first one is what the first one is it's going to actually show us the descriptions height constraints.
So now the constraints is actually on right.
This means that if you actually hover over the spot and you can see these constraints here.
The second option is this one it says turn off water.
So this means now this option is actually turned on.
So this means that when you put a user interface component inside your layout the constraints is going
to be created automatically for that specific user interface component.
So I just put the spot in here as you can see these constraints are actually created a constraint to
the left edge of the screen are constrained to the top edge here to the actually body edge of this part
here and our constraints to the right edge of the screen.
So now let's actually select the spot.
And inside this property section you can these size constraints here.
So I want this button to take the entire Viets of these constraints laid out.
So let's actually to change the size constraint for the beat.
So just click on it and change it to match constraints as you can see there is there is still some actually
space here between the Spartan and leave and the left edge of the screen.
So at the podium just click on text tab and you can see that these are constraints layout.
And here you can see that this is the Viets match parent and the height match parent.
And we have this button here so you can see that the piece is zero DP The height is wrapped content.
We have the margin top which is actually 16 DP We have the text and we have the constraint left to the
left of patent.
So what is the patent.
The patent is constrained to lay out and we have constraints right to the right of patent again patent
refers to the constraints lay out because disporting is inside these constraints they act and we have
constraints top to the top of patent.
So lets actually click on this design tab here again.
So now we have this spot in lets select a spot in and change the idea of this button.
So the idea is going to be between PTEN take a picture take a picture and then press on and tell on
your keyboard.
Let's also change the text of this button so you can select a spot in and for the text attribute here
inside this property section.
I can't just step in here take a picture take a picture and then put it on your keyboard.
So that's it.
Now let's add another button into this constraint layout.
So again inside this palette section click on all and select this button and just drag it here and put
it below this take the picture button here.
Right.
Put it here.
And as you can see these constraints are actually created automatically automatically.
But we need to create a constraint to them actually the bottom edge of this take a picture button.
So as you can see if I hover over these top it of the spot and you can see this little circle pulsating
right.
Or you can create a constraint to the bottom edge of this pick picture button here.
Right.
I just need to create this constraint here and I just need to really see it.
Now I can see that this constraint is created.
So let's increase that top margin of the spot in so select a spot.
And here you can see this margin top here right.
So let's change it to 20 and that person into the keyboard.
So you can see now there is actually a space here between the spot and it's the computer button.
Now again I want this Spartan to take a to actually match constraints and should be able to change the
size constraint.
Right.
So select the spot.
And here inside this property section you can see this size constraint here for the width of this button
right.
Just click on it and change it to match constraints.
So you can see that it is actually almost taking the entire weight of the patent which is this constraint
out.
So select the Spartan and for the idea just they've been here between say Picture BATNA save picture
and then entered on your keyboard and for the text attribute here to step in here to save or save the
picture save the picture and then person enter on your keyboard.
So that's it.
Now it's time to add an image view into our constraint play out here.
First of all let's actually decrease the top margin here.
Let's change this select Save the picture button and change this number two in here for the top margin
and change it to actually number 14 and then percentage on your keyboard.
So not now I think it is good.
Let's add an image view into our constraints.
So inside this palette section just click on images and he'll select this image view right and just
drag it here into this kind of straitly out and below it is see this picture button.
So now when you actually put it there it's going to ask you to select a picture such as this one.
Eissler turnaround.
And then just click on OK.
So now this picture is added to our constraints.
So now it's position here as you can see that lift constraint and the right constraint is actually created
here.
So I can just hover over this top edge here of this image view you can see this circle that is pulsating.
I can't just create a constraint to the bottom edge of this save the picture button.
So just select it and just create a constraint that by then much by the edge of the Save the picture
button.
And now this constraint is created.
So let's change the top margin here of this constraint.
This change is change this value to number 15.
And then President of your keyboard.
Now let's actually assign Let's change the left field and the height to a fixed value.
So select this image view and for the layout fit here inside this property section just type in here.
Number 150 and that person entered on your keyboard.
And again let's select this image view and for the of height just open here 150 and the person and you
on your keyboard.
So it is good right.
We can see that there is a left there is actually a constraint from the left edge of this image to the
left edge of the screen and there is a constraint from the right of this image view to the right edge
of this screen.
So now that the additive image let's assign an ID to this image view.
So for the ID just type in here I m g r m g taken or I m g for two I m g for two.
And that person on your keyboard.