1

00:00:00,420 --> 00:00:06,000

Let's drag an edit text into our lay out now let's instead this palette section.



2

00:00:06,000 --> 00:00:11,590

Just click on text and let's select the plain text and just strike it here.



3

00:00:13,020 --> 00:00:17,950

So we need to actually selected and drag it here and put it wherever you want.



4

00:00:18,090 --> 00:00:19,330

For example here is good.



5

00:00:19,380 --> 00:00:20,020

Right.



6

00:00:20,520 --> 00:00:29,070

And this actually the slate is added text and for the size constraints here I want to change it to match



7

00:00:29,070 --> 00:00:34,010

constraints so here inside this little square inside the properties window.



8

00:00:34,020 --> 00:00:35,120

Just click on this.



9

00:00:35,460 --> 00:00:39,390

So it's kind of strange here in order to change it to match constraint.



10

00:00:39,600 --> 00:00:42,960

Now let's create a constraint to the right of the view.



11

00:00:43,130 --> 00:00:43,530

OK.



12

00:00:43,560 --> 00:00:46,280

So just select is a right square here.



13

00:00:46,320 --> 00:00:53,570

This right square on the right edge of this text and then draw a line up.



14

00:00:53,610 --> 00:01:00,120

Actually a constraint create a constraint to the right edge of the view here and then release it.



15

00:01:00,150 --> 00:01:02,770

So now you can see that this constraint is created.



16

00:01:03,060 --> 00:01:07,170

So let's actually change it to for example 5.



17

00:01:07,640 --> 00:01:14,730

This right margin 5 and then present until January but now let's create a constraint to actually write



18

00:01:14,780 --> 00:01:15,020

it.



19

00:01:15,060 --> 00:01:16,980

Of these price takes few.



20

00:01:17,310 --> 00:01:24,790

So just actually selectees left that the circle is on the edge of the left edge of this it takes.



21

00:01:24,810 --> 00:01:28,500

And that just creates a constraint to the right edge of this.



22

00:01:28,520 --> 00:01:31,110

Price takes view and then release it.



23

00:01:31,110 --> 00:01:34,830

So now you can see that this constraint is actually created here.



24

00:01:34,830 --> 00:01:35,730

Right.



25

00:01:35,820 --> 00:01:42,510

So now I want to actually increase their top margin of this price takes you here because I want to align



26

00:01:42,510 --> 00:01:46,030

the text of this text view with the text of this text.



27

00:01:46,170 --> 00:01:48,960

So just select this price it takes.



28

00:01:49,130 --> 00:01:54,590

And now let's increase the top margin of this tissue to change it to.



29

00:01:54,930 --> 00:02:01,360

For example 30s with I think or I finished 20s with let's change it back to 20.



30

00:02:01,470 --> 00:02:02,460

Now it's good.



31

00:02:02,530 --> 00:02:09,980

Now let's select this edit text here and you can see this little scroll here that you can that there



32

00:02:09,980 --> 00:02:13,100

are actually the letters AB is here right inside it.



33

00:02:13,260 --> 00:02:18,610

Just click on it and now it's going to allow you to select this baseline constraint.



34

00:02:18,840 --> 00:02:22,780

And I actually tried your constraint to this price.



35

00:02:22,810 --> 00:02:29,670

I turned to the baseline constraint of this price and then just release it and I can see that the taste



36

00:02:29,670 --> 00:02:34,530

of the sex is actually in alignment horizontally actually with that name.



37

00:02:34,530 --> 00:02:37,550

To me they actually have the text of this edit text right.



38

00:02:37,800 --> 00:02:39,590

So you can see all these constraints here.



39

00:02:39,600 --> 00:02:40,270

Right.



40

00:02:40,350 --> 00:02:46,010

If you want to I can hide these constraints at the top and you just click on these height constraints.



41

00:02:46,110 --> 00:02:49,030

And now we can see that the constants are actually hidden.



42

00:02:49,050 --> 00:02:54,420

If I click on it again now the constraints are going to be actually shown to the user.



43

00:02:54,750 --> 00:02:59,520

But now I want to actually show you the inferred option here.



44

00:02:59,520 --> 00:03:02,310

This one it says inferred constraints.



45

00:03:02,430 --> 00:03:06,040

So let's selectees it it takes and this process takes a view.



46

00:03:06,450 --> 00:03:07,640

Let's go back to designing tablets.



47

00:03:07,660 --> 00:03:13,270

Select this as it takes just hold down the shift key on your keyboard and then select this price takes



48

00:03:13,310 --> 00:03:13,820

view.



49

00:03:14,010 --> 00:03:20,460

And now you want to actually delete the constraints of these two components so you can see it is actually



50

00:03:20,760 --> 00:03:27,870

button here that you that actually the letter X is actually inside this box button inside this little



51

00:03:27,870 --> 00:03:28,330

square.



52

00:03:28,470 --> 00:03:35,820

If you click on it it's going to actually clear the constraint for a specific component and just click



53

00:03:35,820 --> 00:03:37,240

on these two here.



54

00:03:37,250 --> 00:03:39,240

Let's click on this one here also.



55

00:03:39,360 --> 00:03:44,280

So in other constraints of these two user interface components but actually deleted.



56

00:03:44,640 --> 00:03:49,290

So now you want to allow the Android studio to create those constraints for me.



57

00:03:49,300 --> 00:03:53,920

How just select Do these to use an interface components.



58

00:03:54,030 --> 00:03:55,470

And here we have this option.



59

00:03:55,470 --> 00:03:57,150

It says infer constraints.



60

00:03:57,180 --> 00:03:57,570

Right.



61

00:03:57,660 --> 00:03:58,610

Let's click on it.



62

00:03:59,800 --> 00:04:06,580

And as you can see the constraints are actually added here for me but I need to add some more constraints



63

00:04:06,580 --> 00:04:07,140

here.



64

00:04:07,360 --> 00:04:15,580

So for example I need to actually select this editor here and I need to actually just select the right



65

00:04:15,830 --> 00:04:21,640

lead or circle on the right edge of this text and just create a constraint to the right edge of the



66

00:04:21,640 --> 00:04:22,500

view.



67

00:04:22,990 --> 00:04:26,350

So this is how Android studio created constraints for us.



68

00:04:26,380 --> 00:04:26,830

OK.



69

00:04:26,920 --> 00:04:31,420

If you want to allow Android studio to create the constraints for you you can just click on this in



70

00:04:31,840 --> 00:04:33,920

our constraints right.



71

00:04:33,950 --> 00:04:36,590

You can actually select all these constraints here.



72

00:04:36,610 --> 00:04:42,670

I can select So inside this componentry section just select all these user interface components here



73

00:04:43,180 --> 00:04:48,700

and then click on a clear constraints and you can see that all the concerns are clear clear.



74

00:04:48,700 --> 00:04:49,480

Right.



75

00:04:49,510 --> 00:04:55,050

And here again I can actually select all these here.



76

00:04:55,060 --> 00:04:57,130

All these user interface components.



77

00:04:57,220 --> 00:04:59,730

And now I can cut in further constraints.



78

00:04:59,930 --> 00:05:00,610

Right.



79

00:05:00,700 --> 00:05:07,060

This is how Andrew it's actually designed the user interface for me by adding to constraints.



80

00:05:07,060 --> 00:05:13,030

So if you don't like that these constraints that are actually created for you you need to create the



81

00:05:13,030 --> 00:05:13,960

constraints.



82

00:05:14,290 --> 00:05:16,660

Actually manually right.



83

00:05:16,780 --> 00:05:17,350

So that's it.



84

00:05:17,380 --> 00:05:21,870

I think now you know all about creating constraints in Android.



85

00:05:21,970 --> 00:05:26,050

So for example this entry to add a button to our constantly.



86

00:05:26,230 --> 00:05:31,150

So inside this widget section here is just to select the spot in and just drag it here.



87

00:05:32,080 --> 00:05:37,000

And for example I can put it here right if I want to I can click on in further constraints.



88

00:05:37,000 --> 00:05:42,310

So now the constants are created for me or I can actually clear the constraints of the spot by just



89

00:05:42,310 --> 00:05:44,150

clicking on this little button here.



90

00:05:45,150 --> 00:05:47,800

And then I can create the constraints here.



91

00:05:48,120 --> 00:05:53,760

So for example I can select this light circle here at the right edge of this pattern and that I get



92

00:05:54,030 --> 00:06:01,860

as a constraint I can't draw a line or I can say to the right of the view actually it's actually really



93

00:06:01,890 --> 00:06:02,350

sweet.



94

00:06:02,430 --> 00:06:04,580

And again actually to select this.



95

00:06:04,580 --> 00:06:08,610

Let's circle the red circle at the left hand side of the spot.



96

00:06:08,880 --> 00:06:14,320

And create a constraint to the left of their view and really see it.



97

00:06:14,790 --> 00:06:22,830

Or you can actually select these top circle of that is actually on the top edge of this button and drag



98

00:06:22,860 --> 00:06:30,450

a line that I get actually constrained to the circle that is actually on the bottom of this it takes



99

00:06:30,480 --> 00:06:31,600

and release it.



100

00:06:31,980 --> 00:06:32,550

Right.



101

00:06:32,820 --> 00:06:39,260

So here I actually created the constraints for this button so I can also change the exercise constraints



102

00:06:39,260 --> 00:06:45,090

of this button salicylic disputant And inside these properties window inside this square I can click



103

00:06:45,090 --> 00:06:52,350

on this a size constraint and I can change it to actually match constraints so that you can see that



104

00:06:52,650 --> 00:06:57,810

it's going to take the entire width and it's also it also going to actually consider the margins.



105

00:06:57,810 --> 00:06:58,720

Right.



106

00:06:58,860 --> 00:07:00,810

We have the right margin and the left margin.



107

00:07:01,790 --> 00:07:05,720

And if you run the application Now let me show you the emulator.



108

00:07:05,720 --> 00:07:09,790

You can see that all these user interface components are actually position here.



109

00:07:09,920 --> 00:07:10,900

Here for you.



110

00:07:11,300 --> 00:07:11,860

So that's it.



111

00:07:11,870 --> 00:07:16,940

If you have any questions about these concepts that they taught you in this lesson please post the discussion



112

00:07:16,940 --> 00:07:19,840

in the course and then I do my best to answer all of your questions.



113

00:07:19,970 --> 00:07:22,630

Thank you very much for watching and see the next tutorial.