1

00:00:00,330 --> 00:00:06,240

So now let's go back to android studio and let's actually turn off this feature this Autocorrect Feature.



2

00:00:07,100 --> 00:00:12,590

And let's actually clear all the constraints that are created for us.



3

00:00:12,590 --> 00:00:16,610

So just select this image here or we can actually just select it.



4

00:00:16,610 --> 00:00:22,600

It doesn't really matter if you have an icon here it says what Clear constraints this one click.



5

00:00:22,640 --> 00:00:24,350

Clear all constraints.



6

00:00:24,380 --> 00:00:28,660

If I click on it now you can see that the constraints are actually clear.



7

00:00:28,970 --> 00:00:35,420

And if I run the application now you can see that actually the position of the image the icecream image



8

00:00:35,420 --> 00:00:36,510

is actually changed.



9

00:00:36,560 --> 00:00:36,900

Right.



10

00:00:36,920 --> 00:00:38,840

Because there are no constraints here.



11

00:00:39,290 --> 00:00:41,050

So let's go back to androids would you.



12

00:00:41,050 --> 00:00:45,050

And now let's create the constraints here manually.



13

00:00:45,290 --> 00:00:50,350

So just select this image is in Israel and you can see these little circles here.



14

00:00:50,360 --> 00:00:52,210

These empty little circles.



15

00:00:52,220 --> 00:00:59,330

So for example select is the right circle here that is actually pulsating right and right a line here



16

00:00:59,330 --> 00:01:03,470

to the right edge of the view and then release it.



17

00:01:03,950 --> 00:01:10,040

So now it's going to create a constraint to the right edge of the view and you can see the properties



18

00:01:10,040 --> 00:01:12,220

being taught that the constraint is 8.



19

00:01:12,350 --> 00:01:14,690

If you want to I can change you to for example 10.



20

00:01:14,870 --> 00:01:15,880

Right.



21

00:01:15,880 --> 00:01:22,390

Select this image again and this this time selectees left circle here right.



22

00:01:22,680 --> 00:01:27,210

And regular line to the left hand side of the view and then release it.



23

00:01:27,890 --> 00:01:30,860

So now you can see that a constraint is created here.



24

00:01:30,860 --> 00:01:35,340

Now again this is kind of value turn for the left margin.



25

00:01:35,580 --> 00:01:41,760

And now you can see that we have this left margin and again select this little circle here that is actually



26

00:01:41,760 --> 00:01:44,900

pulsating and draggle line to the top of the view.



27

00:01:44,970 --> 00:01:45,470

OK.



28

00:01:45,660 --> 00:01:47,010

And really see it.



29

00:01:47,070 --> 00:01:53,810

So let's assign the value 10 for the top Margene and we can also create a constraint to the Bob Bottom



30

00:01:53,810 --> 00:01:54,280

of the view.



31

00:01:54,290 --> 00:01:57,880

But it's not necessarily because we want to put this image here.



32

00:01:57,920 --> 00:02:00,650

So now let's run an application.



33

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

So here we can see that our ice cream image is position here correctly.



34

00:02:05,150 --> 00:02:06,570

This is what we actually want.



35

00:02:06,590 --> 00:02:07,610

Right.



36

00:02:07,610 --> 00:02:10,670

So now let's go back to android studio.



37

00:02:10,670 --> 00:02:15,080

Let's select this image and now let's actually change these size constraints.



38

00:02:15,080 --> 00:02:15,790

So here.



39

00:02:15,860 --> 00:02:22,560

Select this image view and click on this size constraint here we can see now it is went back to that



40

00:02:22,580 --> 00:02:23,080

content.



41

00:02:23,090 --> 00:02:25,810

Now the Veach is raw content right.



42

00:02:25,850 --> 00:02:30,270

If I click on it again it's going to to change it back to fixed here.



43

00:02:30,370 --> 00:02:34,950

But if I click on it again it's going to change back to match constraints here.



44

00:02:35,170 --> 00:02:40,270

So it's going to actually match the kind of screen and it can fill up the constraints for us for the



45

00:02:40,270 --> 00:02:43,930

Wii actually and we have also the height.



46

00:02:43,930 --> 00:02:49,170

If I click on it again here we can see that it's going to match the constraints for us if I run my application



47

00:02:49,170 --> 00:02:49,670

now.



48

00:02:49,780 --> 00:02:51,320

Let me show you the emulator.



49

00:02:51,400 --> 00:02:58,050

Now you can see that our image view is actually taking the entire video and the entire height of our



50

00:02:58,060 --> 00:02:59,250

view right.



51

00:02:59,260 --> 00:03:04,900

That's because I actually changed the size constraint here to match constraints for the feet and for



52

00:03:04,900 --> 00:03:06,140

the height.



53

00:03:06,310 --> 00:03:06,860

Right.



54

00:03:07,150 --> 00:03:10,300

And let's go back to our Android studio salicylic this image.



55

00:03:10,360 --> 00:03:14,470

And for the height let's just change it back to fix.



56

00:03:14,560 --> 00:03:17,190

I think now this is good.



57

00:03:17,200 --> 00:03:21,640

Now let's for example track and other some other features.



58

00:03:21,640 --> 00:03:29,030

Just click on vitiates and he at this time let's throw a text view into our constraint play out here.



59

00:03:30,310 --> 00:03:31,660

I can here is good.



60

00:03:31,980 --> 00:03:38,330

And now let's add some constraints to this takes you if you want to you can actually turn on the auto



61

00:03:38,330 --> 00:03:43,670

connect you can actually position your user interface component inside the screen and then you can just



62

00:03:43,820 --> 00:03:50,060

for example if there are two conect if the feature of every city is actually turned on it's going up



63

00:03:50,120 --> 00:03:52,000

automatically at the constraints for you.



64

00:03:52,220 --> 00:03:58,620

But if you want to add the constraints autem manually Actually you need to selectees takes you here.



65

00:03:58,820 --> 00:04:05,700

And let's actually first let's add the constraints to the left hand side of the view just select this



66

00:04:06,080 --> 00:04:11,540

little circle that is actually pulsating and regular line to the left hand side to the left edge of



67

00:04:11,540 --> 00:04:13,140

the view and then release it.



68

00:04:14,560 --> 00:04:18,550

Now you can see that it created a constraint to the left of the view.



69

00:04:18,630 --> 00:04:23,370

And here we can actually specify a value for the left margin.



70

00:04:23,380 --> 00:04:31,430

So for example 20 right and we can actually create a constraint to the to this image.



71

00:04:31,450 --> 00:04:39,130

You actually saw just select pop a little circle of this text view and just track your line to this



72

00:04:39,350 --> 00:04:46,450

word to this bottom little circle here to the bottom of the circle of this ice cream image and then



73

00:04:46,450 --> 00:04:47,880

release it.



74

00:04:47,950 --> 00:04:54,730

So it's going to Crumb's can create a constraint to this but that the circle here you can see that the



75

00:04:54,730 --> 00:04:55,690

margin is eight.



76

00:04:55,720 --> 00:04:58,760

I can change the margin to for example 50.



77

00:04:58,820 --> 00:05:05,740

Now you can see that at the margin here is 50 and there is a constraint from this to that from the top



78

00:05:05,740 --> 00:05:10,050

of the takes you to the bottom of this actually the ice cream image.



79

00:05:10,660 --> 00:05:13,670

Now we can add right for example.



80

00:05:14,120 --> 00:05:17,260

And another lay out another component for it.



81

00:05:17,300 --> 00:05:27,190

Let's actually select this text and here I can select for example this email right and drag it here.



82

00:05:27,190 --> 00:05:34,160

This is actually an added text that actually accepts emails and let's select it and put it here.



83

00:05:35,570 --> 00:05:41,770

Make sure to position your user interface component where ever you want and then add the constraint.



84

00:05:41,780 --> 00:05:42,110

OK.



85

00:05:42,140 --> 00:05:45,050

So let's change it to whatever I want here.



86

00:05:45,350 --> 00:05:48,410

And then I can really sit here and now I can at the constraints.



87

00:05:48,650 --> 00:05:54,050

So first of all I want to create a constraint to that right edge of the view.



88

00:05:54,200 --> 00:05:59,240

So let's select this little circle here of the right circle.



89

00:05:59,240 --> 00:06:06,470

This actually takes and track a constraint that I had lined to the right edge of the view and reseat.



90

00:06:06,890 --> 00:06:11,510

So it actually created a constraint to the right of the view and here in the properties view you can



91

00:06:11,510 --> 00:06:17,550

see this constraint if you want to I can actually create a Margene here for example 20.



92

00:06:17,820 --> 00:06:24,230

And now let's create a constraint to the right edge to the right of these takes view.



93

00:06:24,440 --> 00:06:31,180

So just it let the circle of this that is actually on the left hand side of this it it takes and strike



94

00:06:31,180 --> 00:06:34,860

your constraint to the right edge of this actually right.



95

00:06:34,880 --> 00:06:38,390

This takes you to this little circle and then release it.



96

00:06:38,670 --> 00:06:41,540

So now a constraint is created here right.



97

00:06:41,540 --> 00:06:45,860

So just like this it takes and you can see that the left margin is 8.



98

00:06:45,980 --> 00:06:49,470

If you want to I can actually assign the values zero here.



99

00:06:50,780 --> 00:06:58,160

And now you can see that the left margin is 8 0 and if I select this it takes you here.



100

00:06:58,520 --> 00:07:05,900

I can actually select this right circle and direct line to the left circle of this X and release it



101

00:07:06,590 --> 00:07:09,200

and you can see that the constraint is not going to be created.



102

00:07:09,200 --> 00:07:09,750

Why.



103

00:07:09,950 --> 00:07:17,150

Because we already created a constraint to the right hand side of this takes you from the left hand



104

00:07:17,150 --> 00:07:18,400

side of this eddy text.



105

00:07:18,500 --> 00:07:24,320

So you cannot actually create a constraint from the right hand side of this takes you to the left hand



106

00:07:24,320 --> 00:07:27,560

side of this takes the right so that's it.



107

00:07:27,560 --> 00:07:32,150

And now let's actually create some size constraints for this.



108

00:07:32,180 --> 00:07:34,380

It takes just select this or it takes and hit.



109

00:07:34,390 --> 00:07:37,210

Inside this little piece it is actually Square.



110

00:07:37,310 --> 00:07:44,890

We can see it this size constraint and this height all you want to change this with slight constraint.



111

00:07:44,890 --> 00:07:47,380

Just click on it and it is now fixed.



112

00:07:47,380 --> 00:07:51,910

And if Actually can I take it now it is actually match constraints right.



113

00:07:52,450 --> 00:07:54,330

So let's assign a value.



114

00:07:54,340 --> 00:08:00,340

This gives a hint or let's say for example is assigned a text that is actually a detail.



115

00:08:00,340 --> 00:08:12,060

For example I can say this is a great Ice-Cream.



116

00:08:12,460 --> 00:08:20,260

And now we can actually assign a base line constraint the baseline constraint is going to actually align



117

00:08:20,590 --> 00:08:25,940

our texts of the text view and that it takes in actually in a horizontal manner.



118

00:08:26,080 --> 00:08:33,220

So let's first select this editor X and here we can see these inside this little square.



119

00:08:33,220 --> 00:08:34,120

It says A B.



120

00:08:34,120 --> 00:08:40,920

If I click on it it's going to actually give us this actually this baseline constraint.



121

00:08:40,960 --> 00:08:47,870

If I hover over it it's going to actually pulsate and I can actually create a constraint here from this.



122

00:08:47,870 --> 00:08:50,260

It takes two this takes view here.



123

00:08:51,510 --> 00:08:56,520

And you can see it is actually this baseline concerned that is actually the pulsating.



124

00:08:56,520 --> 00:08:58,170

I just need to really sit here.



125

00:08:58,350 --> 00:09:06,910

Now we can see that the text of the it takes is actually is aligned with the takes of this takes you.



126

00:09:07,050 --> 00:09:09,350

So this this is actually the text line.



127

00:09:09,390 --> 00:09:11,560

This is actually a baseline constraint.



128

00:09:11,760 --> 00:09:17,760

And now our let's select it it takes and let's assign the value.



129

00:09:18,030 --> 00:09:22,090

For example 5 for the right Margene.



130

00:09:22,310 --> 00:09:24,610

And now I think that's good.



131

00:09:25,100 --> 00:09:26,410

And here everything is fine.



132

00:09:26,430 --> 00:09:30,240

But let's actually create.



133

00:09:30,410 --> 00:09:32,440

Let's create a left margin.



134

00:09:32,450 --> 00:09:35,170

Let's assign a value for the left margin of this edit text.



135

00:09:35,330 --> 00:09:40,220

So just select it it takes and for the left margin is assigned a value of 5 and that person into your



136

00:09:40,220 --> 00:09:46,570

keyboard so that there is actually a little space between this text view and this text right.



137

00:09:46,700 --> 00:09:55,680

So let's select this text view and for the text chip you just say in here name and then call and then



138

00:09:55,700 --> 00:09:57,100

present three general.



139

00:09:57,350 --> 00:09:59,590

Let's run an application now.



140

00:09:59,600 --> 00:10:06,740

So here you can see that our takes you and odd as it takes are actually these two components are positioned



141

00:10:07,580 --> 00:10:08,930

inside our layout.



142

00:10:09,060 --> 00:10:10,410

They ve wanted.



143

00:10:10,430 --> 00:10:11,180

Right.



144

00:10:11,240 --> 00:10:15,200

We added the constraints and these are actually positioned the way we wanted here.



145

00:10:15,560 --> 00:10:17,030

So let's go back to Andrew in the studio.



146

00:10:17,060 --> 00:10:21,450

And this time I want to actually introduce you to the inferred constraints.



147

00:10:21,470 --> 00:10:22,790

I can look at this one here.



148

00:10:22,790 --> 00:10:24,360

It is in full constraints.



149

00:10:24,650 --> 00:10:29,660

So let's actually drag and other takes you here from this pallet section.



150

00:10:29,660 --> 00:10:36,060

So just click on visits and let's say like this takes view and let's put it here



151

00:10:38,850 --> 00:10:41,350

let's position it wherever we want.



152

00:10:41,350 --> 00:10:44,630

And now it's time to add the constraints to this view.



153

00:10:44,740 --> 00:10:47,320

So just select this lift.



154

00:10:47,470 --> 00:10:52,750

Actually this left little circle of this takes view and track it constrained to the left hand side to



155

00:10:52,750 --> 00:10:58,190

the left edge of this view actually and now you can see that the constraint is created.



156

00:10:58,210 --> 00:11:05,260

So for the margin I can assign the value 10 and you can see the change to number 20.



157

00:11:06,720 --> 00:11:11,750

Let's select this takes view and for the text attribute here.



158

00:11:11,910 --> 00:11:14,080

Let's assign the value price.



159

00:11:14,190 --> 00:11:16,820

Call it and then person enter on your keyboard.



160

00:11:17,190 --> 00:11:24,930

So let's just select it let the circle at the top of the top edge of this place take that view and tragic



161

00:11:25,070 --> 00:11:27,460

actually line to the left Bodom.



162

00:11:27,480 --> 00:11:34,950

Here it was actually the bottom of this name takes you here right just create a constraint to the bottom



163

00:11:35,040 --> 00:11:38,070

edge of this text view and then release it.



164

00:11:38,520 --> 00:11:41,290

So now we can see that a constraint is created here.



165

00:11:41,490 --> 00:11:46,900

So let's select this process and increase the margin a little bit to change it to 15.



166

00:11:46,920 --> 00:11:48,510

And that person will show you keyboard.