1

00:00:00,420 --> 00:00:01,260

OK everyone.



2

00:00:01,320 --> 00:00:05,260

So now let's track some search bars into our constraints.



3

00:00:05,260 --> 00:00:06,040

Lay out.



4

00:00:06,330 --> 00:00:11,530

So inside this palette section just click on all and then click on search bar here.



5

00:00:11,550 --> 00:00:18,160

So just trying to put into our layout and BIDU this image view and put it here to just put it here.



6

00:00:18,210 --> 00:00:22,470

Now let's try another spot and put it bedewed is each part here.



7

00:00:24,300 --> 00:00:27,870

Let's write another one and put it here with this one.



8

00:00:28,260 --> 00:00:30,410

So now we have three such bars here.



9

00:00:30,420 --> 00:00:31,040

Right.



10

00:00:31,290 --> 00:00:35,570

So let's actually increase the width of this search bar.



11

00:00:35,580 --> 00:00:38,220

Let's change just select the part here.



12

00:00:38,310 --> 00:00:43,940

And for the lay out feet here to assign the value of one hundred and fifty and then person into a new



13

00:00:43,970 --> 00:00:50,520

keyboard let's say 80 seconds each bar and for the layout we assign the value of one hundred and fifty



14

00:00:50,580 --> 00:00:57,420

and then person of keyboard and select the spot again for the layout which assigned a value of one hundred



15

00:00:57,420 --> 00:01:00,010

and fifty and that person and you on your keyboard.



16

00:01:00,360 --> 00:01:09,730

So let's select this first six part and for the ID here just typing in here red See Spot red red color



17

00:01:09,970 --> 00:01:15,100

red color see both and then press on until you on your keyboard.



18

00:01:15,460 --> 00:01:17,440

Let's select the second search bar.



19

00:01:17,740 --> 00:01:24,880

And again for the ID just type in here Green see green colors are green color.



20

00:01:25,040 --> 00:01:28,930

Seek bar and in person it'll change both.



21

00:01:28,990 --> 00:01:37,500

Let's select this first six bar and for the ID just type in here blue colors are blue color See Spot.



22

00:01:39,430 --> 00:01:40,190

And then press on.



23

00:01:40,210 --> 00:01:41,610

It'll keep on your keyboard.



24

00:01:41,860 --> 00:01:46,190

So now that V is specified the IDs for these search bars here.



25

00:01:46,240 --> 00:01:50,860

Let's drag free takes views for these for this search bar.



26

00:01:50,850 --> 00:01:57,160

So inside this palette session select all and then click on text view just like this takes you and put



27

00:01:57,160 --> 00:02:00,370

it here beside this search part here.



28

00:02:00,370 --> 00:02:00,860

Right.



29

00:02:00,880 --> 00:02:05,880

Or you can actually to put it here if you can position on the right hand side of the layout here.



30

00:02:05,980 --> 00:02:08,550

According to these actually dotted lines.



31

00:02:08,590 --> 00:02:09,720

So just put it here.



32

00:02:10,000 --> 00:02:16,930

So now let's try another text view and put it here beside this second search bar.



33

00:02:16,990 --> 00:02:19,360

And below this takes you here.



34

00:02:19,810 --> 00:02:25,360

Let's try it another takes few and put it be besides a failed search bar.



35

00:02:25,390 --> 00:02:29,440

And below these other takes you here.



36

00:02:29,500 --> 00:02:31,110

So now we have this takes us.



37

00:02:31,180 --> 00:02:37,450

So let's select this first taste view and let's pro-white an ID for this text view.



38

00:02:37,450 --> 00:02:46,860

So here you can see it here the read color value color value and then present and take your keyboard.



39

00:02:47,250 --> 00:02:48,740

Let's isolate this second.



40

00:02:48,810 --> 00:02:56,900

Actually takes you this one and for the ID just step in here takes the green color but you use the green



41

00:02:58,440 --> 00:03:06,580

color value and that person interaction your keyboard and select is second takes you here.



42

00:03:06,930 --> 00:03:09,750

So you can see this is actually artistic in color of text.



43

00:03:09,780 --> 00:03:17,730

And now let's select this first takes you so far the idea just came in here takes the takes the blue



44

00:03:17,730 --> 00:03:23,640

color blue color value and then presentation if you will.



45

00:03:23,670 --> 00:03:27,980

So we provided these ideas for this takes us right now.



46

00:03:27,990 --> 00:03:34,110

Finally we need to specify the constraints for these are truly components that we added here.



47

00:03:34,110 --> 00:03:41,640

So for example this sick part here we have only a constraint from the left edge of this symbol to the



48

00:03:41,640 --> 00:03:50,100

left of the screen but we need to actually add another constraint to the from the top edge of the switchboard



49

00:03:50,370 --> 00:03:57,390

to the bottom edge of this image view so you can see this this little circle that is pulsating on the



50

00:03:57,390 --> 00:03:59,550

right on the top edge of the seat.



51

00:03:59,850 --> 00:04:06,060

So just create a constraint to the bottom edge to this little circle that is pulsating on the bottom



52

00:04:06,300 --> 00:04:07,970

of this image for you.



53

00:04:08,100 --> 00:04:14,950

So now you can see that we have this constraint here so let's increase the top margin of this see.



54

00:04:15,080 --> 00:04:17,510

So currently it is now actually eight.



55

00:04:17,520 --> 00:04:21,090

Let's change it to 15 and then personated change your keyboard.



56

00:04:21,240 --> 00:04:23,350

Or we can actually change it to 20.



57

00:04:23,550 --> 00:04:25,290

So I think that's good.



58

00:04:25,290 --> 00:04:31,140

Now let's actually create a constraint for this sick part here.



59

00:04:31,230 --> 00:04:38,250

Now let's actually just add on that top edge of this sequence and see this little circle that is pulsating



60

00:04:38,250 --> 00:04:42,080

so just create a constraint to the bottom edge of this Popsie.



61

00:04:42,090 --> 00:04:43,330

But here to the CBer.



62

00:04:43,350 --> 00:04:44,060

Right.



63

00:04:44,070 --> 00:04:45,580

So just really see it.



64

00:04:45,720 --> 00:04:49,380

Now we have a actually we have a constraint here.



65

00:04:49,590 --> 00:04:57,300

So let's increase the top margin of this part here let's change this value to 20 and then person entheogenic



66

00:04:57,420 --> 00:05:01,410

keyboard or we can actually change it to 15.



67

00:05:01,570 --> 00:05:06,740

I think it is now called Let's create a constraint for this search bar here.



68

00:05:07,050 --> 00:05:09,530

Now you can see that on the top edge of the seat.



69

00:05:09,540 --> 00:05:12,250

But we have this little circle that is pulsating.



70

00:05:12,330 --> 00:05:16,080

I can create a constraint to the bottom edge of this part here.



71

00:05:16,170 --> 00:05:24,690

So just release it here and again for the top edge for the top are actually for the top Margene of this



72

00:05:24,890 --> 00:05:25,810

sick bar.



73

00:05:26,010 --> 00:05:31,730

Let's just assign the value any or 15.



74

00:05:31,910 --> 00:05:32,870

And now it is good.



75

00:05:32,890 --> 00:05:33,440

Right.



76

00:05:33,520 --> 00:05:38,600

So now it's time to create a constraint for these takes views.



77

00:05:38,740 --> 00:05:39,230

Right.



78

00:05:39,250 --> 00:05:45,520

So here I can just as you can see on the top edge of this takes you we have this little circle that



79

00:05:45,520 --> 00:05:47,130

is pulsating right.



80

00:05:47,320 --> 00:05:54,670

So I can create a constraint to the bottom edge of this image view here we can see this little circle



81

00:05:54,670 --> 00:05:55,770

that is pulsating again.



82

00:05:55,840 --> 00:05:57,480

I can't just release it here.



83

00:05:57,910 --> 00:06:02,600

So let's just increase the top margin of the state's view.



84

00:06:02,740 --> 00:06:06,150

So for the top margin I can actually see a 20.



85

00:06:06,400 --> 00:06:08,630

And the personnel on your keyboard.



86

00:06:08,770 --> 00:06:10,190

So I think it is good.



87

00:06:10,600 --> 00:06:13,880

Let's actually select this search it takes you here.



88

00:06:14,200 --> 00:06:18,550

Let's create a constraint to the bottom edge of this takes you here.



89

00:06:18,550 --> 00:06:23,590

So on the top edge of the stakes we have this little circle that is pulsating to create a constraint



90

00:06:23,650 --> 00:06:27,570

to the bottom edge of the stakes and just release it.



91

00:06:27,580 --> 00:06:30,920

Now let's just specify the top margin of the stakes.



92

00:06:30,950 --> 00:06:32,410

So just select it takes you.



93

00:06:32,590 --> 00:06:36,250

And for the top margin assigned the value of 15.



94

00:06:36,450 --> 00:06:38,320

And now you can see that it is good.



95

00:06:38,490 --> 00:06:44,730

So let's selectees first takes you on the top edge of these takes you can see that this little circle



96

00:06:44,820 --> 00:06:45,660

is pulsating.



97

00:06:45,810 --> 00:06:52,070

Let's create a constraint to the bottom edge of this that takes you here and just release it.



98

00:06:52,080 --> 00:06:56,610

So for the top margin assigned a value of 15 and then percentage on your keyboard.



99

00:06:57,060 --> 00:06:58,730

So now everything is fine right.



100

00:06:58,740 --> 00:07:05,070

But we must actually first run an application in order to see that everything is working fine.



101

00:07:05,100 --> 00:07:05,500

OK.



102

00:07:05,580 --> 00:07:06,570

It's better to do that.



103

00:07:06,570 --> 00:07:12,780

You don't have to test your application here but it's better to actually see whether the design is working



104

00:07:12,780 --> 00:07:15,990

or not that the constraints are actually working or not.



105

00:07:15,990 --> 00:07:18,660

So let's just call to come down here at the top.



106

00:07:18,960 --> 00:07:23,940

So now we need to specify an emulator in order to run our applications which so just that I just want



107

00:07:23,940 --> 00:07:24,640

and then press on.



108

00:07:24,660 --> 00:07:25,400

OK.



109

00:07:25,590 --> 00:07:32,100

So here you can see that our application is actually running on this emulator here and everything works



110

00:07:32,100 --> 00:07:32,570

fine.



111

00:07:32,640 --> 00:07:33,250

Right.



112

00:07:33,270 --> 00:07:36,280

So let's provide a default value for these takes views.



113

00:07:36,360 --> 00:07:40,310

So let's select the state's view here and for the text attribute here.



114

00:07:40,390 --> 00:07:41,100

Just type in here.



115

00:07:41,100 --> 00:07:45,970

Zero point zero zero point zero and then present to on your keyboard.



116

00:07:45,990 --> 00:07:51,100

Let's provide a default value for this takes few here zero point zero and then present I could give



117

00:07:51,100 --> 00:07:53,090

you a keyboard and select this.



118

00:07:53,190 --> 00:07:57,790

And for the text attribute just typing here zero point zero and in and keyboard.



119

00:07:57,900 --> 00:07:59,540

So now everything works fine.



120

00:07:59,880 --> 00:08:03,170

And now it's time to code the application.



121

00:08:03,180 --> 00:08:04,350

So thank you very much for watching.



122

00:08:04,350 --> 00:08:07,380

And in the next tutorial we're going to continue building this application.