OK everyone.
So now let's track some search bars into our constraints.
Lay out.
So inside this palette section just click on all and then click on search bar here.
So just trying to put into our layout and BIDU this image view and put it here to just put it here.
Now let's try another spot and put it bedewed is each part here.
Let's write another one and put it here with this one.
So now we have three such bars here.
Right.
So let's actually increase the width of this search bar.
Let's change just select the part here.
And for the lay out feet here to assign the value of one hundred and fifty and then person into a new
keyboard let's say 80 seconds each bar and for the layout we assign the value of one hundred and fifty
and then person of keyboard and select the spot again for the layout which assigned a value of one hundred
and fifty and that person and you on your keyboard.
So let's select this first six part and for the ID here just typing in here red See Spot red red color
red color see both and then press on until you on your keyboard.
Let's select the second search bar.
And again for the ID just type in here Green see green colors are green color.
Seek bar and in person it'll change both.
Let's select this first six bar and for the ID just type in here blue colors are blue color See Spot.
And then press on.
It'll keep on your keyboard.
So now that V is specified the IDs for these search bars here.
Let's drag free takes views for these for this search bar.
So inside this palette session select all and then click on text view just like this takes you and put
it here beside this search part here.
Right.
Or you can actually to put it here if you can position on the right hand side of the layout here.
According to these actually dotted lines.
So just put it here.
So now let's try another text view and put it here beside this second search bar.
And below this takes you here.
Let's try it another takes few and put it be besides a failed search bar.
And below these other takes you here.
So now we have this takes us.
So let's select this first taste view and let's pro-white an ID for this text view.
So here you can see it here the read color value color value and then present and take your keyboard.
Let's isolate this second.
Actually takes you this one and for the ID just step in here takes the green color but you use the green
color value and that person interaction your keyboard and select is second takes you here.
So you can see this is actually artistic in color of text.
And now let's select this first takes you so far the idea just came in here takes the takes the blue
color blue color value and then presentation if you will.
So we provided these ideas for this takes us right now.
Finally we need to specify the constraints for these are truly components that we added here.
So for example this sick part here we have only a constraint from the left edge of this symbol to the
left of the screen but we need to actually add another constraint to the from the top edge of the switchboard
to the bottom edge of this image view so you can see this this little circle that is pulsating on the
right on the top edge of the seat.
So just create a constraint to the bottom edge to this little circle that is pulsating on the bottom
of this image for you.
So now you can see that we have this constraint here so let's increase the top margin of this see.
So currently it is now actually eight.
Let's change it to 15 and then personated change your keyboard.
Or we can actually change it to 20.
So I think that's good.
Now let's actually create a constraint for this sick part here.
Now let's actually just add on that top edge of this sequence and see this little circle that is pulsating
so just create a constraint to the bottom edge of this Popsie.
But here to the CBer.
Right.
So just really see it.
Now we have a actually we have a constraint here.
So let's increase the top margin of this part here let's change this value to 20 and then person entheogenic
keyboard or we can actually change it to 15.
I think it is now called Let's create a constraint for this search bar here.
Now you can see that on the top edge of the seat.
But we have this little circle that is pulsating.
I can create a constraint to the bottom edge of this part here.
So just release it here and again for the top edge for the top are actually for the top Margene of this
sick bar.
Let's just assign the value any or 15.
And now it is good.
Right.
So now it's time to create a constraint for these takes views.
Right.
So here I can just as you can see on the top edge of this takes you we have this little circle that
is pulsating right.
So I can create a constraint to the bottom edge of this image view here we can see this little circle
that is pulsating again.
I can't just release it here.
So let's just increase the top margin of the state's view.
So for the top margin I can actually see a 20.
And the personnel on your keyboard.
So I think it is good.
Let's actually select this search it takes you here.
Let's create a constraint to the bottom edge of this takes you here.
So on the top edge of the stakes we have this little circle that is pulsating to create a constraint
to the bottom edge of the stakes and just release it.
Now let's just specify the top margin of the stakes.
So just select it takes you.
And for the top margin assigned the value of 15.
And now you can see that it is good.
So let's selectees first takes you on the top edge of these takes you can see that this little circle
is pulsating.
Let's create a constraint to the bottom edge of this that takes you here and just release it.
So for the top margin assigned a value of 15 and then percentage on your keyboard.
So now everything is fine right.
But we must actually first run an application in order to see that everything is working fine.
OK.
It's better to do that.
You don't have to test your application here but it's better to actually see whether the design is working
or not that the constraints are actually working or not.
So let's just call to come down here at the top.
So now we need to specify an emulator in order to run our applications which so just that I just want
and then press on.
OK.
So here you can see that our application is actually running on this emulator here and everything works
fine.
Right.
So let's provide a default value for these takes views.
So let's select the state's view here and for the text attribute here.
Just type in here.
Zero point zero zero point zero and then present to on your keyboard.
Let's provide a default value for this takes few here zero point zero and then present I could give
you a keyboard and select this.
And for the text attribute just typing here zero point zero and in and keyboard.
So now everything works fine.
And now it's time to code the application.
So thank you very much for watching.
And in the next tutorial we're going to continue building this application.