1

00:00:00,300 --> 00:00:02,980

Hello this is Martez or cowardy.



2

00:00:03,180 --> 00:00:09,210

And here are first first of all I want to change this label here of our app inside this toolbar.



3

00:00:09,420 --> 00:00:12,440

Let's go inside these strings that exemplified.



4

00:00:12,660 --> 00:00:21,720

And for the Apennine Let's actually change this my calculator to calculator and if I go into this activity



5

00:00:21,720 --> 00:00:25,930

on there like I created calculator that is in my file you can see this name is changed.



6

00:00:26,400 --> 00:00:28,770

So let's delete this hello world view.



7

00:00:28,950 --> 00:00:32,540

And I don't want to apparently out to be constrained to lay out.



8

00:00:32,610 --> 00:00:41,440

I want to lay out to be actually relatively out or a linearly out but the constraint lay out is actually



9

00:00:41,440 --> 00:00:42,040

new.



10

00:00:42,270 --> 00:00:48,570

We need to know we need to learn how to deal with the constraint lay out because it's a very flexible



11

00:00:48,570 --> 00:00:49,470

layout.



12

00:00:49,800 --> 00:00:51,470

So we can't use it.



13

00:00:51,510 --> 00:01:00,050

We can actually add our relatively to this constraint layouts or we can just drag a linearly out.



14

00:01:00,240 --> 00:01:02,200

So let's see how we can do that.



15

00:01:02,640 --> 00:01:05,930

So first let me show you the Android emulator.



16

00:01:05,970 --> 00:01:12,590

First of all we need to have a text view here at the top that is going to contain the operations.



17

00:01:12,930 --> 00:01:15,040

So let's go on to Android studio.



18

00:01:15,120 --> 00:01:16,870

So let's add a text view here.



19

00:01:18,010 --> 00:01:20,190

Inside is Pallot section.



20

00:01:20,240 --> 00:01:21,790

Could be kind of widgets.



21

00:01:22,420 --> 00:01:28,600

And let's see the context and then let's choose this takes you and as I did here at the top.



22

00:01:30,330 --> 00:01:38,280

So now I want the right edge of this text view to be attached to the right edge of my screen or this



23

00:01:38,310 --> 00:01:44,880

layout constraint there and I want the left edge of this text view to be attached to the left edge of



24

00:01:44,880 --> 00:01:47,440

this constraint layout.



25

00:01:47,460 --> 00:01:55,260

And also this one the top edge of my text view to be attached to the bottom edge of the toolbar.



26

00:01:55,890 --> 00:01:57,590

So let's see how we can do that.



27

00:01:57,660 --> 00:02:02,380

Let's see this little circle at the right edge of the stage through that is pulsating.



28

00:02:02,400 --> 00:02:04,330

This green color here right.



29

00:02:04,590 --> 00:02:12,920

Let's throw back a line or two constrained to the right edge of the left.



30

00:02:13,040 --> 00:02:20,030

Now it is constrained is created and make sure you can see these icons here it is turn off auto connect.



31

00:02:20,030 --> 00:02:26,790

Let's actually turn this feature off because we want to create these constraints manually.



32

00:02:27,200 --> 00:02:33,610

So let's also Dratch a constraint to the left edge of the screen here of this layout.



33

00:02:33,620 --> 00:02:41,030

And here let's also drag a constraint to the body image of this actually.



34

00:02:41,180 --> 00:02:52,450

You can see it is this bottom of the toolbar just create a constraint here right now I want this text



35

00:02:52,450 --> 00:02:54,050

view to be match parent.



36

00:02:54,100 --> 00:02:54,670

I want that.



37

00:02:54,690 --> 00:02:56,340

Which of these takes feet to be much better.



38

00:02:56,360 --> 00:03:04,240

And I want the Viets of these states to take the whole weight of this screen this kind of straitly and



39

00:03:04,740 --> 00:03:08,980

so selectees takes you at the right hand side you can see these attributes.



40

00:03:08,980 --> 00:03:13,930

So here it says we have this play out of it which is actually raw content.



41

00:03:13,930 --> 00:03:16,850

Let's change it to match parent.



42

00:03:16,850 --> 00:03:20,110

Now this takes you takes the whole week here.



43

00:03:20,480 --> 00:03:21,410

Right.



44

00:03:21,470 --> 00:03:22,310

That's it.



45

00:03:22,340 --> 00:03:25,980

If you want to you can add a pad to this text.



46

00:03:27,050 --> 00:03:28,400

But also let's go into this.



47

00:03:28,400 --> 00:03:29,880

If you are attributes.



48

00:03:30,140 --> 00:03:39,240

And here we have this padding actually be so for the lift let's add 10 or let's add number eight.



49

00:03:39,330 --> 00:03:40,730

I think is good.



50

00:03:41,710 --> 00:03:49,840

So this is our Takes you here to select it and let's specify an idea for this takes fuel let's say the



51

00:03:49,840 --> 00:03:58,760

idea is to use the calculations because they want to show they use the calculations that happen here.



52

00:03:58,810 --> 00:04:04,990

So teach the Cal collations and that person intercranial people so this is the idea.



53

00:04:05,540 --> 00:04:11,630

And for the text attribute it still is this value but let's just put numbers zero here as the text as



54

00:04:11,630 --> 00:04:13,720

the initial takes of this view.



55

00:04:13,800 --> 00:04:15,370

If we can change it later.



56

00:04:16,130 --> 00:04:23,500

But here let me tell you that it is not good to just pro-white hardcoded values for these attributes.



57

00:04:23,630 --> 00:04:29,360

We have these strings that I that exemplify and we can create string resources there.



58

00:04:29,390 --> 00:04:33,320

It is recommended to use that file but here.



59

00:04:33,350 --> 00:04:40,040

Because I already taught you how to use the strings that is in a file of you're not going to cover that



60

00:04:40,070 --> 00:04:44,990

in this application but it's recommended to use that resource file.



61

00:04:44,990 --> 00:04:47,770

So now let me show you the emulator.



62

00:04:47,810 --> 00:04:55,660

Now we need to have this view here right that it's going to contain this text.



63

00:04:56,000 --> 00:05:01,560

So for example the user enters select or taps number 5 6 7.



64

00:05:01,730 --> 00:05:06,230

We want to have this view that is going to contain this text view.



65

00:05:06,230 --> 00:05:16,840

So let's go back to android studio and here we are to at a linearly and two are constrained today out



66

00:05:16,840 --> 00:05:17,230

here.



67

00:05:17,230 --> 00:05:18,830

Below it is text view.



68

00:05:18,940 --> 00:05:23,520

So instead this pallet section let's click on these layouts here.



69

00:05:24,970 --> 00:05:27,790

And click on linearly out vertical.



70

00:05:28,010 --> 00:05:30,670

I just threw it and put it here.



71

00:05:30,790 --> 00:05:32,500

Say this components resection.



72

00:05:32,500 --> 00:05:35,020

Just put it here below these kind of straitly.



73

00:05:35,050 --> 00:05:43,300

As you can see these lines are actually guiding us that we're you actually want to place this linearly



74

00:05:43,300 --> 00:05:50,010

and you want to place it here inside this kind of straitly out and below this DHC calculations takes



75

00:05:50,020 --> 00:05:52,860

you to so just really sit here.



76

00:05:52,870 --> 00:05:56,220

Here it is our linear layout vertical.



77

00:05:56,440 --> 00:06:04,690

So now now because it is actually just a kind of slightly out it is not.



78

00:06:04,750 --> 00:06:11,330

It is actually taking the entire width and height of our constraint.



79

00:06:11,350 --> 00:06:14,360

So we don't want that to happen.



80

00:06:14,470 --> 00:06:18,160

So now let's hear inside these attributes section.



81

00:06:18,180 --> 00:06:24,580

It's click on this one this icon that says View all attributes so that we have our list attributes here



82

00:06:24,610 --> 00:06:27,340

so that we can see these constraints.



83

00:06:27,430 --> 00:06:33,230

And for example the lay out and the lay of height as you can see the lay out is much peril.



84

00:06:33,350 --> 00:06:37,260

So that's good because we want this view.



85

00:06:37,280 --> 00:06:40,120

So let me show you the Android emulator.



86

00:06:40,340 --> 00:06:46,250

We want this view here to take the entire weight of the parents lay out.



87

00:06:46,670 --> 00:06:49,640

So now this is linearly as vertical.



88

00:06:49,810 --> 00:06:51,840

So they have to beat its parent.



89

00:06:52,100 --> 00:06:56,680

Let me actually increase the reach of these attributes section.



90

00:06:56,900 --> 00:07:00,070

So the lay out between my parents for the last time.



91

00:07:00,110 --> 00:07:08,300

Let's add another value let's say that we have for example number one hundred and fifty.



92

00:07:08,320 --> 00:07:10,270

So I think that's good.



93

00:07:10,300 --> 00:07:13,800

One hundred and fifty is good for the height of early in the early hours.



94

00:07:13,810 --> 00:07:21,220

So now let's also change the background color overlay so that we can see how it is actually affected



95

00:07:21,220 --> 00:07:25,700

how it is positioned inside early or later we can change this color.



96

00:07:25,720 --> 00:07:29,050

So let's click on you all the attributes and here you can see the search.



97

00:07:29,080 --> 00:07:32,990

I can just click on it and search for the background attribute.



98

00:07:33,160 --> 00:07:35,310

So let's change the color to green.



99

00:07:35,320 --> 00:07:44,880

So hash tag for the other red 0 0 for the Green 9 9 and for the blue 0 0 and unprecedented.



100

00:07:44,920 --> 00:07:47,400

So now the background color is green.



101

00:07:47,410 --> 00:07:54,440

Now we can also see that these constraints are not created here for this linearly as vertical.



102

00:07:54,580 --> 00:07:57,490

So let's actually go into this.



103

00:07:57,700 --> 00:07:59,860

Let's see these constraints.



104

00:07:59,980 --> 00:08:02,410

So this linearly as vertical.



105

00:08:02,800 --> 00:08:07,980

Let's create a constraint to the right edge of the screen.



106

00:08:08,160 --> 00:08:16,990

Let's create another constraint for that to the left of the screen a constraint to the edge of our text



107

00:08:16,990 --> 00:08:17,570

view.



108

00:08:17,890 --> 00:08:23,670

So as you can see I cannot create that constraint here it's not actually visible.



109

00:08:23,950 --> 00:08:27,120

So we need to do something else.



110

00:08:27,520 --> 00:08:37,390

We need to say that this linearly at this rate is linearly as vertical here and inside this attribute



111

00:08:37,390 --> 00:08:41,200

section you can see that it's as if I hover over this icon.



112

00:08:41,640 --> 00:08:44,950

It has created connection created connection above.



113

00:08:45,180 --> 00:08:50,070

So if I click on it it is going to connect create a connection to the above.



114

00:08:50,070 --> 00:08:57,060

So let me change the position of this linearly or vertical You can see that a connection is created



115

00:08:57,390 --> 00:09:01,450

to the bottom edge of this toolbar so I don't want that to happen.



116

00:09:01,440 --> 00:09:06,750

So in order to do that or constraint I just need to double click on this little circle you can see that



117

00:09:06,750 --> 00:09:07,850

here it is.



118

00:09:07,860 --> 00:09:09,370

Just click on it.



119

00:09:09,510 --> 00:09:14,670

You don't have to double click you just need to just click on it and you can just change the position



120

00:09:14,670 --> 00:09:22,260

of your linearly at WorldCom and then you can just create a connection to the Pradip edge of your takes



121

00:09:22,260 --> 00:09:23,320

view of the stage here.



122

00:09:23,320 --> 00:09:30,610

But as you can see it's not possible it's not actually allowing me to create a connection to these to



123

00:09:30,620 --> 00:09:32,710

the bottom of the text view.



124

00:09:32,820 --> 00:09:39,690

So in order to solve this problem we can just create a connection to the bottom edge of this tool bar.



125

00:09:39,690 --> 00:09:43,000

So again it is creating a connection above if I click on it.



126

00:09:43,020 --> 00:09:45,200

Now a connection is created to the above.



127

00:09:45,570 --> 00:09:54,650

And here you can see that now a connection is created to the bottom edge of this text view.



128

00:09:54,670 --> 00:10:01,840

So I don't think maybe it is a bug in Android because constantly out is new but it didn't allow me to



129

00:10:01,840 --> 00:10:05,070

manually create is constrained by just clicking on this.



130

00:10:05,350 --> 00:10:09,840

I can here I could create a constraint to the bottom edge of this text view.



131

00:10:09,880 --> 00:10:13,640

So now I can change the place of this linearly Athletica.



132

00:10:13,810 --> 00:10:19,110

And I came up with it here as you can see if you have some margins yet at the left and right between



133

00:10:19,450 --> 00:10:20,110

these margins.



134

00:10:20,110 --> 00:10:24,290

I don't like these margins so just that it is a select isn't nearly as vertical.



135

00:10:24,400 --> 00:10:29,540

And here inside is attributes section here it says the margin for the right is 8.



136

00:10:29,630 --> 00:10:31,830

That is value and put number 0 here.



137

00:10:32,000 --> 00:10:36,930

And for the left margin let's also delete this value and put the number zero here.



138

00:10:37,480 --> 00:10:39,920

And now there is no margin here right.



139

00:10:39,970 --> 00:10:45,250

And the constraint is also created to the left right and the top.



140

00:10:45,250 --> 00:10:49,540

So let's run the app and see that everything works.



141

00:10:49,600 --> 00:10:52,870

As you can see it's going as an error.



142

00:10:53,070 --> 00:10:55,710

And here let's go back to android studio.



143

00:10:55,720 --> 00:10:56,850

Here it says error.



144

00:10:56,880 --> 00:11:02,840

One hundred and fifty is incompatible with attributes and that lay out height dimension.



145

00:11:02,860 --> 00:11:07,390

So there is a problem here that slick slick isn't nearly as vertical as he can see.



146

00:11:07,520 --> 00:11:11,590

One hundred and fifty is not with Vinita with DP here.



147

00:11:11,830 --> 00:11:15,700

Right density pixels and unprecedented on your keyboard.



148

00:11:15,700 --> 00:11:21,220

So here we are putting a hard coded value of one hundred and fifty.



149

00:11:21,280 --> 00:11:22,820

Is it good to do that.



150

00:11:23,080 --> 00:11:27,330

For example are other devices with different heights.



151

00:11:27,460 --> 00:11:31,320

Screens can handle these kinds of layouts.



152

00:11:31,330 --> 00:11:40,890

Yes they can because Android use uses deep dots per inch and it doesn't really matter how you what value



153

00:11:40,900 --> 00:11:42,450

you put here inside.



154

00:11:42,470 --> 00:11:49,030

For example out with all the height of your views and it is going to manage that for you for specific



155

00:11:49,030 --> 00:11:57,160

devices and then you are not going to encounter any other problems because it uses very great technology



156

00:11:57,310 --> 00:11:59,460

that can handle these values.



157

00:11:59,590 --> 00:12:06,950

So here and that's why I told you to read that article about supporting multiple screens.



158

00:12:07,270 --> 00:12:08,800

So now let's run the app



159

00:12:12,140 --> 00:12:16,460

emulator and now the app can run successfully.



160

00:12:16,460 --> 00:12:19,260

So here you can see that we have this text at the top.



161

00:12:19,280 --> 00:12:24,170

We have this linearly as vertical here and everything works fine so far.



162

00:12:24,290 --> 00:12:26,830

Let's go back into its studio.



163

00:12:27,110 --> 00:12:29,300

Let me get this right here.



164

00:12:29,720 --> 00:12:32,190

So you actually close this.



165

00:12:32,240 --> 00:12:39,630

Here's a so now we need to add this takes you to our linearly as vertical.



166

00:12:39,630 --> 00:12:45,750

So let's go back to android studio and here click on text inside his palette section distractors takes



167

00:12:45,820 --> 00:12:51,420

you here and put it inside so you can put it here you can either put it here or you can either with



168

00:12:51,420 --> 00:12:56,770

it are here inside this componentry section so it doesn't really matter.



169

00:12:57,120 --> 00:13:00,920

So here we have this takes you inside is the helipad where go.



170

00:13:01,460 --> 00:13:02,070

And a door in.



171

00:13:02,090 --> 00:13:06,340

And in order to make sure that this view is inside is linearly vertical.



172

00:13:06,540 --> 00:13:12,310

You can see this componentry here you can take this cup through here and you can see that this text



173

00:13:12,530 --> 00:13:18,390

is inside this linearly at vertical or in other words this linearly nearly vertical is the parent of



174

00:13:18,390 --> 00:13:19,450

the state's view.



175

00:13:19,860 --> 00:13:21,900

So now we want.



176

00:13:21,900 --> 00:13:28,090

This takes you to be here at the right hand side and vertically center.



177

00:13:28,500 --> 00:13:35,850

So let me show you the studios up just select estates view and for the layout beat let's choose the



178

00:13:35,850 --> 00:13:38,000

value lab content.



179

00:13:39,250 --> 00:13:45,160

And here I want to put this takes you at the right hand side of this linearly as vertical.



180

00:13:45,220 --> 00:13:45,950

Right.



181

00:13:46,000 --> 00:13:50,290

So let's choose this out gravity attributes.



182

00:13:50,320 --> 00:13:52,160

Let's click on this view all attributes.



183

00:13:52,510 --> 00:13:55,330

And here we can search for gravity.



184

00:13:55,420 --> 00:13:57,260

And here we have these lay out gravity.



185

00:13:57,260 --> 00:14:01,190

Just open it and let's check the box that's right.



186

00:14:01,890 --> 00:14:05,400

Now this it takes you is at the right hand side.



187

00:14:06,060 --> 00:14:09,990

And let's just make it wider.



188

00:14:10,290 --> 00:14:13,710

And here we have this center vertical is also choose this one.



189

00:14:13,710 --> 00:14:16,580

Let me uncheck this right here.



190

00:14:16,650 --> 00:14:23,580

So as you can see and I checked the center vertical is nothing happens here because this attribute is



191

00:14:23,580 --> 00:14:28,800

conflicting with other attributes and that's why it is not affecting the states view.



192

00:14:28,860 --> 00:14:30,790

So let's just choose right.



193

00:14:31,110 --> 00:14:33,590

Let's check the center reticle here.



194

00:14:33,750 --> 00:14:42,380

Now that we said they laid out gravity of this text view to be right you know that what function this



195

00:14:42,730 --> 00:14:50,820

as gravity has right the gravity is going to determine the place of this play out according to the parent.



196

00:14:50,880 --> 00:14:57,200

So we know that it takes is the child of this linearly out and the linearly is the parent of this takes



197

00:14:57,220 --> 00:14:57,930

view.



198

00:14:58,350 --> 00:15:04,920

So when we say text view the lay out gravity of this view to be right this means that according to the



199

00:15:05,440 --> 00:15:11,470

parent which is this one is linearly as vertical IB wants this takes to be at the right hand side.



200

00:15:11,670 --> 00:15:19,860

But then they wanted to change the place of the state's view to be center vertical we couldn't do that



201

00:15:19,950 --> 00:15:25,240

because I'll tell you this atrip it is going to conflate with other attributes.



202

00:15:25,260 --> 00:15:32,070

So what is that other attributes we have this linearly at vertical which is going to be the parents



203

00:15:32,070 --> 00:15:32,910

right.



204

00:15:33,150 --> 00:15:38,760

The parent attributes affect the child views.



205

00:15:38,770 --> 00:15:41,410

So I said is linearly out vertical.



206

00:15:41,430 --> 00:15:49,290

If I get selected here inside its attributes section let's search for the Klav it he attributes the



207

00:15:49,290 --> 00:15:57,030

gravity attribute is going to specify the position of the child views inside the parent.



208

00:15:57,030 --> 00:16:00,570

So the tissue is the height of this linearly as vertical.



209

00:16:00,570 --> 00:16:04,160

So here we have this gravity strip you open it.



210

00:16:04,170 --> 00:16:09,140

Now we can see that this takes a view.



211

00:16:09,170 --> 00:16:13,580

The child wants this child to be centered vertical here.



212

00:16:13,590 --> 00:16:18,890

So let's find this attribute here center vertical and check the history books.



213

00:16:18,900 --> 00:16:26,110

Now you can see that this takes you here is now at the center Retic of this linearly at vertical.



214

00:16:26,490 --> 00:16:30,180

So it is very important to consider other attributes.



215

00:16:30,180 --> 00:16:33,930

For example the parent the child.



216

00:16:34,080 --> 00:16:37,170

All these attributes are going to actually be completed with each other.



217

00:16:37,170 --> 00:16:42,230

If you don't know what you're doing in your exemplified this is very important.



218

00:16:42,240 --> 00:16:44,590

Most of level of hurt is ignored.



219

00:16:44,680 --> 00:16:51,180

Are these attributes and they are going to actually encounter problems with their layouts.



220

00:16:51,180 --> 00:16:58,090

And this is a very this is going to be a very big problem later when you want to create complex layouts.



221

00:16:58,310 --> 00:17:03,460

OK so now that we have this text view here the right position.



222

00:17:03,510 --> 00:17:03,990

Right.



223

00:17:03,990 --> 00:17:08,100

Let me show you the emulator is the position that you want to have the text view.



224

00:17:08,330 --> 00:17:13,710

We can actually change the padding in the inner spacing of this text view.



225

00:17:13,980 --> 00:17:17,600

So let me close this assertion here.



226

00:17:17,820 --> 00:17:22,590

And here we have this padding attributes supporter the right path Pat this at this point in here we



227

00:17:22,590 --> 00:17:28,980

can say for example 20 inside this place we can say 20 or if you want to you can't change this value



228

00:17:29,010 --> 00:17:30,840

but I think 20 is good.



229

00:17:31,020 --> 00:17:35,760

We can also increase the size of this text inside this text view.



230

00:17:36,210 --> 00:17:39,440

So let's search for the text size if you want to.



231

00:17:39,570 --> 00:17:46,330

You can search or you can actually as you can see these attributes are ordered alphabetically.



232

00:17:46,450 --> 00:17:54,070

So if I scroll down here we can find the text size is t here the text size here is that it is the text



233

00:17:54,070 --> 00:18:00,050

size and for the text size and its attributes we should always use s p.



234

00:18:00,490 --> 00:18:04,030

So what's a piece stance for.



235

00:18:04,190 --> 00:18:08,940

It stands for scale independent pixels.



236

00:18:09,290 --> 00:18:09,790

OK.



237

00:18:09,890 --> 00:18:17,690

So because we want to actually specify the text size of text view it's very important to use a speed



238

00:18:17,750 --> 00:18:19,240

scale independent.



239

00:18:19,340 --> 00:18:23,980

It is going to be independent to other screen densities.



240

00:18:24,140 --> 00:18:28,840

OK screen independent pixels and then press enter on your keyboard.



241

00:18:28,850 --> 00:18:36,710

So let's specify the value here let's say that we want to have for example number 80 s p and unprecedented



242

00:18:36,810 --> 00:18:45,890

on your keyboard or or we can change this value to for example 100 espie of 100 is too large a century



243

00:18:45,920 --> 00:18:55,360

to 50 SB to change you to 25 or maybe 50 or 30 Espy is good I think.



244

00:18:55,370 --> 00:19:03,320

So let's change the color of this view so let's say let's change the color of our linearly out that



245

00:19:03,320 --> 00:19:11,940

contains this text view to white or we don't have to specify any color 0 so that the color of this constraint



246

00:19:11,940 --> 00:19:15,680

to lay out is going to actually affect the color of our linearly out here.



247

00:19:15,680 --> 00:19:21,470

So if I did it to this value as the color of this linearly out and unprecedented president keep it so



248

00:19:21,470 --> 00:19:29,690

you can see because you already are selected the that material that light we have already is light colored



249

00:19:29,690 --> 00:19:30,250

here.



250

00:19:30,410 --> 00:19:30,800

Right.



251

00:19:30,950 --> 00:19:32,480

And we have the this view here.



252

00:19:32,830 --> 00:19:34,330

OK that's it.



253

00:19:34,340 --> 00:19:39,380

Let's also specify our text for this just strike this text view.



254

00:19:39,770 --> 00:19:42,510

Let's find the text attributes here.



255

00:19:43,880 --> 00:19:45,280

So we can find it here.



256

00:19:45,470 --> 00:19:50,320

So let's put number zero as the text of this text view.



257

00:19:50,390 --> 00:19:55,220

Now let me show you the emulators so that we can see what we are going to do next.



258

00:19:55,220 --> 00:20:01,770

Now you are going to actually saw this equal what button when you're ready to put it later.



259

00:20:01,790 --> 00:20:05,420

For now we're going to specify these numbers.



260

00:20:05,420 --> 00:20:11,190

These operators this one this see button here that is going to specify the clear.



261

00:20:11,210 --> 00:20:15,240

What if I click on it as you can see aerobraking it clears.



262

00:20:15,260 --> 00:20:17,720

So let's go back to Andrex city.



263

00:20:17,870 --> 00:20:22,670

And here we need to add another linearly and vertical to are constrained to lay out.



264

00:20:22,670 --> 00:20:28,640

Let me show you the emulator here we can see that we don't want to put this equal part in here yet because



265

00:20:29,000 --> 00:20:35,420

first you want to specify these numbers and these operators here and this find this a clear pattern.



266

00:20:35,450 --> 00:20:40,560

So for example if I have something here if I click on this clear button everything clears.



267

00:20:40,970 --> 00:20:45,680

So now let's go back to android studio here inside this palace section.



268

00:20:45,680 --> 00:20:51,180

Click on layouts and then select is linearly at a vertical here and just drag it here.



269

00:20:51,360 --> 00:20:58,200

Inside these constraints lay out make sure that you put it here inside these constraints here and below



270

00:20:58,350 --> 00:21:00,930

is linearly vertical here above.



271

00:21:01,190 --> 00:21:04,250

So selectees linearly at vertical.



272

00:21:04,310 --> 00:21:07,030

Now Vinick we need to add some constraints.



273

00:21:07,370 --> 00:21:12,470

And here at the right hand side if I actually click on this view all attributes here you can see all



274

00:21:12,470 --> 00:21:13,030

the attributes.



275

00:21:13,040 --> 00:21:15,930

And if I click on this icon again.



276

00:21:16,070 --> 00:21:18,020

Now you can see less attributes.



277

00:21:18,020 --> 00:21:21,180

Now we can see all of these constraints so let's click on this one here.



278

00:21:21,380 --> 00:21:28,270

Let's click on this icon that says Create a connection above so that the connection is going to be created.



279

00:21:28,300 --> 00:21:31,880

You have this linearly as vertical.



280

00:21:32,000 --> 00:21:37,440

Let's create a connection to the right and it let's create a connection to the left.



281

00:21:37,710 --> 00:21:38,260

OK.



282

00:21:39,160 --> 00:21:44,810

So another book I haven't actually created these connections because I want to put this equal but in



283

00:21:44,810 --> 00:21:52,100

here between the ceiling nearly as vertical and this fine let's actually increase the top margin of



284

00:21:52,100 --> 00:22:01,440

this article so as you can see it is now 8 percent to 10 and here are for the right margin.



285

00:22:01,460 --> 00:22:04,860

Obviously New Orleans article has changed its value to number zero.



286

00:22:05,640 --> 00:22:11,790

And for the left margin of this linearly out vertical is change the change the value to number 0.



287

00:22:11,940 --> 00:22:17,280

But still you can see that there is some space here at the left and right are in order to solve this



288

00:22:17,280 --> 00:22:23,290

problem just like it's not linearly at vertical and for the layout we choose match parent.



289

00:22:23,340 --> 00:22:29,310

Just click on this little triangle and to match parent and now you can see that there is no space here



290

00:22:30,210 --> 00:22:31,440

at the left and right.



291

00:22:31,450 --> 00:22:37,390

Let's also add a background color to this linearly as vertical sort of selected.



292

00:22:37,600 --> 00:22:43,990

And here it is you can view all attributes and so for the background attribute here.



293

00:22:44,160 --> 00:22:52,710

And for the back of collarless actually testify to threat so hashtag 9 9 0 0 0 0 and unprecedented here



294

00:22:52,740 --> 00:22:53,930

on your keyboard.



295

00:22:54,400 --> 00:23:03,960

Now we're going to add some horizontal linearly outs to these vertical linearly here if I show you the



296

00:23:03,960 --> 00:23:09,080

emulator you can see that we have some rows here and columns.



297

00:23:09,390 --> 00:23:17,400

So in order to create these rows we're going to add some horizontal linearly outs to our lead vertical



298

00:23:17,400 --> 00:23:22,330

linearly out here inside this pallet section to click on layouts.



299

00:23:22,590 --> 00:23:23,780

And this time.



300

00:23:23,820 --> 00:23:30,790

Let's add this one linearly at horizontal to this rate linearly vertical here.



301

00:23:30,810 --> 00:23:34,160

Now let's actually go back to our attributes here.



302

00:23:34,520 --> 00:23:41,340

And let me click on these attributes so that you can see list list attributes here and select linearly



303

00:23:41,340 --> 00:23:49,160

and horizontal and for the layout of its match parent is good.



304

00:23:49,160 --> 00:23:50,580

Don't change the.



305

00:23:50,780 --> 00:23:52,080

But for the layout height.



306

00:23:52,250 --> 00:23:54,620

Let's change it to wrap content.



307

00:23:56,980 --> 00:24:04,120

And here we are going to add some image buttons to are linearly out horizontal.



308

00:24:04,120 --> 00:24:08,870

So inside this palette section here we have this image just just click on it.



309

00:24:08,890 --> 00:24:16,040

And here we have this image bottom image button isn't a button but it's actually an extension of what



310

00:24:16,150 --> 00:24:18,370

we can add images to this button.



311

00:24:18,640 --> 00:24:24,580

So this tract is the latest image button and just throw it here and let's put it here inside this componentry



312

00:24:24,850 --> 00:24:28,130

just put it inside this linearly out horizontal.



313

00:24:28,450 --> 00:24:30,900

So now this window is opened for us.



314

00:24:31,720 --> 00:24:37,410

And we can actually specify an image so let's choose one of these images here or this one I see down



315

00:24:37,410 --> 00:24:41,370

to around as the initial image and then click on OK.



316

00:24:42,290 --> 00:24:48,330

But here are lots of indice linearly or horizontal inside these componentry So like this image button



317

00:24:48,350 --> 00:24:48,880

here.



318

00:24:49,070 --> 00:24:55,900

So first of all let's give a packet on to is linearly horizontal so the selected and let's find the



319

00:24:56,070 --> 00:25:06,530

background attributes it's the background for example of blue hashtag 0 0 0 0 9 9 and then person at



320

00:25:06,770 --> 00:25:07,720

your keyboard.



321

00:25:08,150 --> 00:25:12,630

So here it is the back color of are linearly out horizontal.



322

00:25:12,890 --> 00:25:19,950

And let's also change this image of this image button so just select this image pattern here.



323

00:25:20,240 --> 00:25:26,870

Let's find the RC attribute here inside this attributes section and you can just click on this ellipsis



324

00:25:26,870 --> 00:25:36,840

button free that's And here we can search for our image but we haven't still added our resources to



325

00:25:36,840 --> 00:25:38,310

our application.



326

00:25:39,610 --> 00:25:42,290

So let's actually close this window.



327

00:25:42,490 --> 00:25:51,100

Let me of Indiana review and here if you want to you can actually just right click and destroy bill



328

00:25:51,140 --> 00:25:54,250

folder and then click on it reveal in Finder.



329

00:25:54,410 --> 00:25:58,090

If you're a Windows user or there is another option.



330

00:25:58,100 --> 00:26:02,520

In order to see the contents of this folder.



331

00:26:02,720 --> 00:26:05,270

But now I don't remember that.



332

00:26:05,780 --> 00:26:12,710

But if you cannot find it here you can just find the path of the project inside your computer and then



333

00:26:12,710 --> 00:26:17,910

you can go inside it's restful there and then you will find a suitable folder.



334

00:26:18,080 --> 00:26:21,010

So let me click on this reveal in Finder.



335

00:26:21,230 --> 00:26:22,570

So here we have these folders.



336

00:26:22,620 --> 00:26:30,100

Right now we can add the resources that we've downloaded to this red folder here.



337

00:26:30,140 --> 00:26:35,180

First we have this tribal folder that contains For example this I.S. Lanter background.



338

00:26:35,180 --> 00:26:39,920

So now let me show you the folder of our resources.



339

00:26:40,280 --> 00:26:45,920

So here it is our resources and we have this tribal folder if ify of any Strobel folder.



340

00:26:45,940 --> 00:26:54,560

I'm going to actually just select all of these images and then right click on them click on copy copy



341

00:26:54,560 --> 00:27:00,710

15 items and then I'm going to open this tribal folder of my application and then paste these images



342

00:27:00,710 --> 00:27:01,490

here.



343

00:27:01,850 --> 00:27:03,210

Let's click on back.



344

00:27:03,470 --> 00:27:05,540

Now let me click on by here.



345

00:27:05,540 --> 00:27:10,190

So here we have this enjoyable dash STPI enjoyable dash x x.



346

00:27:10,190 --> 00:27:15,830

Actually these names are very important if you want to create your own folders make sure that you have



347

00:27:16,070 --> 00:27:17,030

these names.



348

00:27:17,060 --> 00:27:23,570

So because of this race follower here doesn't have followers with these names here with the same name



349

00:27:23,570 --> 00:27:24,900

as these names.



350

00:27:24,940 --> 00:27:31,420

I'm going to just copy these folders and paste them here inside the rest of my application.



351

00:27:31,930 --> 00:27:37,880

And now let me close these two folders here and if I actually open these tribal folders you can see



352

00:27:38,120 --> 00:27:39,900

that now it is updated.



353

00:27:40,100 --> 00:27:45,500

And here all of these images are actually added to the tribal folder.



354

00:27:45,530 --> 00:27:46,960

So let me close it.



355

00:27:47,090 --> 00:27:53,420

Now let's select this image button here for the SIRC attribute Just click on this ellipsis button.



356

00:27:53,430 --> 00:28:01,670

So now let me show you the emulator so we are going to put number 7 here as far as the image or image



357

00:28:01,670 --> 00:28:02,180

with button.



358

00:28:02,190 --> 00:28:11,320

So here just search for seven and then just select it and then click on OK key so number seven is added



359

00:28:11,320 --> 00:28:14,360

here but there is a problem here.



360

00:28:14,530 --> 00:28:19,960

This image pattern is taking the entire width of our horizontal linearly out.



361

00:28:20,020 --> 00:28:21,850

So let's select this image pattern.



362

00:28:22,090 --> 00:28:27,830

And here you can see that the layout which is match apparent changes to wrap content.



363

00:28:28,180 --> 00:28:29,260

OK.



364

00:28:29,740 --> 00:28:30,850

So that's it.



365

00:28:30,850 --> 00:28:35,810

Now let's run the app so that actually we can see that everything works fine.



366

00:28:35,920 --> 00:28:42,840

So here it is our button and we have all our views properly placed inside our concern.



367

00:28:42,860 --> 00:28:49,360

So I think that's enough for this story all in the next issue or are going to continue adding components



368

00:28:49,390 --> 00:28:53,100

or widgets to are linearly out of reticle here.



369

00:28:53,320 --> 00:28:54,810

So thank you very much for watching.



370

00:28:54,940 --> 00:28:57,770

And I will look forward to seeing you in the next tutorial.