1

00:00:00,730 --> 00:00:07,450

Hello this is what has occurred and it is it's real we are going to add number eight to our horizontal



2

00:00:07,450 --> 00:00:08,820

linearly out here.



3

00:00:09,010 --> 00:00:12,550

So let's go back to the studio and here inside this palace section.



4

00:00:12,550 --> 00:00:19,170

Click on images and let's add an image button here into this video linearly or horizontal and beside



5

00:00:19,180 --> 00:00:21,220

this number 7 here.



6

00:00:21,220 --> 00:00:25,250

So let's search for the number 8 number eight.



7

00:00:25,300 --> 00:00:26,990

So just select it and then press on.



8

00:00:27,010 --> 00:00:28,280

OK.



9

00:00:28,360 --> 00:00:32,680

Now we have this image button here.



10

00:00:32,800 --> 00:00:36,720

But as you can see this number 8 is not appearing here.



11

00:00:37,060 --> 00:00:45,070

So let's select this image button and here for the layout of which you can see literally activate is



12

00:00:45,070 --> 00:00:47,370

number one let's delete this value.



13

00:00:47,970 --> 00:00:52,330

And now with its wrap content.



14

00:00:52,360 --> 00:01:02,450

So let's find the SRT attribute and let's again search for the number 8 key just select number.



15

00:01:02,460 --> 00:01:06,980

This image here and then choose the image.



16

00:01:07,120 --> 00:01:09,420

So it's very important that we actually delete it.



17

00:01:09,460 --> 00:01:12,730

And one more time let me show you what's the error here.



18

00:01:12,730 --> 00:01:14,370

I want to add the image button.



19

00:01:15,360 --> 00:01:21,630

Here inside this Linaria horizontal and I just search for number 8 and because I didn't select number



20

00:01:21,630 --> 00:01:23,910

8 it couldn't find the image.



21

00:01:23,910 --> 00:01:28,240

It's very important that you select the image and then click on OK.



22

00:01:29,150 --> 00:01:34,370

So that the image is here but as you can see again the problem I currently had maybe this is a back.



23

00:01:34,370 --> 00:01:39,920

So again we need to find the RC attribute and then click on this ellipse spotted this search for the



24

00:01:40,250 --> 00:01:41,480

number 8.



25

00:01:41,510 --> 00:01:43,150

So just double click and it's number 8.



26

00:01:43,160 --> 00:01:46,040

And now the image is appearing here.



27

00:01:46,040 --> 00:01:50,670

So again here you can see that the with is raw content.



28

00:01:51,020 --> 00:01:53,130

So the layout vate is number of.



29

00:01:53,130 --> 00:01:58,420

So let's delete number one here and and press on until you on your keyboard again for the number 7.



30

00:01:58,470 --> 00:02:02,550

The layout is there is no value for the lay out weight and there they.



31

00:02:02,570 --> 00:02:05,330

Which is a rough contact right.



32

00:02:05,330 --> 00:02:07,070

So I'll talk more about it later.



33

00:02:07,070 --> 00:02:12,370

For now let's just add the components to our linearly authorities onto.



34

00:02:12,530 --> 00:02:18,790

So let me show you the emulator and let me actually show you this picture.



35

00:02:18,790 --> 00:02:23,510

Here it is the number 7 8 9 and another operator here.



36

00:02:23,650 --> 00:02:25,540

So let's go back to our studio.



37

00:02:25,750 --> 00:02:27,170

Let's at number nine.



38

00:02:27,460 --> 00:02:31,910

So again another let's add another image pattern into the city nearly half horizontally.



39

00:02:32,170 --> 00:02:35,390

Let's force search for that number 9 to select it.



40

00:02:35,620 --> 00:02:36,590

Just double click on it.



41

00:02:37,440 --> 00:02:40,440

Again it couldn't actually find the image.



42

00:02:40,440 --> 00:02:44,590

So then I just click on this button and search for the number line.



43

00:02:45,300 --> 00:02:47,060

And again I was selected.



44

00:02:47,430 --> 00:02:55,620

So now that we have the number 9 here to reactivate let's delete this value and for the last week we



45

00:02:55,620 --> 00:03:01,690

can see the value of our content and finally we need to add an operator.



46

00:03:01,830 --> 00:03:02,450

I want to add.



47

00:03:02,470 --> 00:03:09,980

So here you can see that we have this divide OPERATOR I want to add the plus operator or the ADD operator.



48

00:03:10,030 --> 00:03:12,150

So let's go back to our studio.



49

00:03:12,220 --> 00:03:16,280

Let's add an image button into our Minneola For example here.



50

00:03:16,830 --> 00:03:27,350

Let's say for the ADD operator here or let's search for the plus excuse me the our image is named plus



51

00:03:28,250 --> 00:03:29,390

and then click on.



52

00:03:29,390 --> 00:03:31,610

So just double click on this image.



53

00:03:31,610 --> 00:03:39,510

So again if you need to find it again I don't know maybe this is a park Andrys studio.



54

00:03:40,630 --> 00:03:44,640

So here let's lay out which is actually the number one.



55

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

And then a person on your keyboard that they out with is raw content and the lay at home.



56

00:03:49,450 --> 00:03:51,450

He's also the accountant.



57

00:03:51,610 --> 00:03:56,710

So here you can see these components are actually placed here.



58

00:03:57,040 --> 00:04:06,490

But I want to make sure that these components are always the same always taking the same space that



59

00:04:06,550 --> 00:04:08,260

they require.



60

00:04:08,650 --> 00:04:14,440

So now let's select all of these components inside these components resection.



61

00:04:14,440 --> 00:04:18,880

It's easier to set all of these image buttons if you're using a Mac.



62

00:04:18,910 --> 00:04:22,250

You can just hold down the Comanche and then select all of these image.



63

00:04:22,510 --> 00:04:27,310

And if you are a Windows user you just need to hold down the control key and then select all of these



64

00:04:27,310 --> 00:04:28,280

image buttons.



65

00:04:28,690 --> 00:04:35,830

Now you can see that the layout with all these image buttons is actually the raw content here at the



66

00:04:35,830 --> 00:04:38,530

left and the right hand side at these attributes again.



67

00:04:38,560 --> 00:04:43,100

It is the attributes that are shared with all of these.



68

00:04:43,660 --> 00:04:46,740

Actually with all of these image buttons.



69

00:04:47,050 --> 00:04:54,100

So for the layout Viets we can see that the beat out of it is zero.



70

00:04:54,380 --> 00:04:56,980

But here we have to lay out wait.



71

00:04:57,110 --> 00:05:06,760

Assume that the weight of the linearly out horizontal is actually divided into four parts.



72

00:05:06,980 --> 00:05:07,480

OK.



73

00:05:07,610 --> 00:05:12,280

So we have one part for the number seven one part for the number eight.



74

00:05:12,480 --> 00:05:19,460

One part for the number nine and another part for the plus operator or the operator.



75

00:05:19,460 --> 00:05:25,300

And I want each part to have one image button right.



76

00:05:25,340 --> 00:05:33,630

This means that we can see that the layout made of all of these image buttons should be number one each.



77

00:05:33,650 --> 00:05:35,810

Each of these image buttons should take one part.



78

00:05:35,930 --> 00:05:41,050

So we can say number one as the layout weight of all of these image buttons as you can see.



79

00:05:41,060 --> 00:05:43,880

Now all of them are appearing here.



80

00:05:43,880 --> 00:05:53,160

But for this plus operator here I want to increase the height of this image.



81

00:05:53,340 --> 00:05:59,320

So for the lay out weight height Excuse me but you'll see much parent.



82

00:05:59,430 --> 00:06:05,640

And here you can see that we have this one but I think for this plus uprated it's spitted.



83

00:06:05,670 --> 00:06:10,190

It's better to use an image of you instead of an image bottom.



84

00:06:10,290 --> 00:06:12,720

So let's delete this one.



85

00:06:12,720 --> 00:06:19,140

Let me actually select this one this plus operator here this image and then personality on your keyboard.



86

00:06:19,440 --> 00:06:27,880

And here let's add an image view into our linearly alcoholism and also just put it here as you can see



87

00:06:27,880 --> 00:06:32,300

now and putting it inside is componentry section because it's difficult to put it here.



88

00:06:32,700 --> 00:06:38,740

And so when I put it inside these components resection and these lines are actually guiding me to in



89

00:06:38,740 --> 00:06:43,890

order to specify vid I exactly want to to put this image for you.



90

00:06:44,080 --> 00:06:48,920

So I want to put it inside this linearly and horizontal and below all of these image buttons.



91

00:06:49,000 --> 00:06:51,990

So let's search for the plus sign.



92

00:06:53,120 --> 00:07:06,300

I'm here so we have these actually image of you here so they lay out the height of this actually plus



93

00:07:06,290 --> 00:07:10,910

sign is that content solicits change to match parents so that everything is fine.



94

00:07:11,440 --> 00:07:18,280

As you can see now it's much more beautiful and we can see it better.



95

00:07:18,280 --> 00:07:21,650

We have now we have number 7 8 9 and this is you.



96

00:07:21,730 --> 00:07:27,640

So make sure that they get you that sets the as height of this image to match parents because if you



97

00:07:27,640 --> 00:07:34,750

set it to rap content the layout is going to be changed because this is an image view and other components



98

00:07:34,840 --> 00:07:36,480

are actually the image buttons.



99

00:07:36,820 --> 00:07:44,100

And because we are adding this image view as the last component here is actually the other image buttons



100

00:07:44,170 --> 00:07:48,570

may have actually some changes to the layout height.



101

00:07:48,670 --> 00:07:55,550

So we're going to set the length height of this image to match paired match preferences.



102

00:07:55,690 --> 00:08:02,360

That's the height of this image view to be the same as the height of the linearly or horizontal.



103

00:08:02,500 --> 00:08:06,560

So because for example we have number seven number eight and nine.



104

00:08:06,570 --> 00:08:12,630

These image buttons are actually set again at that height is set as match parent.



105

00:08:12,640 --> 00:08:19,690

Here we can see if I say all of these image buttons you can see that they are actually taking some space



106

00:08:19,690 --> 00:08:23,580

here as the height and it's much more visible this way.



107

00:08:23,590 --> 00:08:30,760

If you want to you can specify a heart with a value for example number 50 80 10 100 for example for



108

00:08:30,760 --> 00:08:36,830

the let's select all of these components inside this linearly horizontal number 7 8 9 and this plus



109

00:08:36,830 --> 00:08:37,660

sign.



110

00:08:37,810 --> 00:08:42,890

Let's say for example number 100 That's the height OK.



111

00:08:43,030 --> 00:08:51,430

It doesn't really matter or we can actually set another value for example number 50.



112

00:08:51,640 --> 00:08:54,510

Number of these not good or we can't say number one.



113

00:08:54,700 --> 00:09:00,790

So now that we put all of these components inside our linearly horizontal we can change the background



114

00:09:00,790 --> 00:09:03,920

color of this linearly horizontal to a default value.



115

00:09:04,120 --> 00:09:09,690

So just select this linearly horizontal inside this componentry section and then we can view all attributes



116

00:09:10,090 --> 00:09:15,100

and for the background attribute value here just to the value and press on your keyboard.



117

00:09:17,000 --> 00:09:25,010

So now let's add another linearly and horizontal into our linear area.



118

00:09:25,170 --> 00:09:25,940

We're Tikal here.



119

00:09:25,940 --> 00:09:31,600

So inside this componentry section Let me close this linearly and horizontal and here.



120

00:09:32,120 --> 00:09:34,290

Let's add another linearly and horizontal.



121

00:09:34,290 --> 00:09:42,200

So just click on this layouts here and select this Denia had horizontal and put it here inside this



122

00:09:42,200 --> 00:09:50,840

componentry section inside this nearly as vertical as you can see here actually where to put it inside



123

00:09:50,840 --> 00:09:55,290

is linearly as vertical but below these are linearly or horizontal here.



124

00:09:56,370 --> 00:10:01,090

So not just selected and for the layout height.



125

00:10:01,220 --> 00:10:04,180

Let's change you to wrap content.



126

00:10:05,530 --> 00:10:14,940

And here we can say we need to add some components here so inside this image is here it is Capellas



127

00:10:14,940 --> 00:10:16,270

section just click on images.



128

00:10:16,450 --> 00:10:21,730

Let's add an image button into this linearly horizontal.



129

00:10:21,760 --> 00:10:25,630

So here we need to let me show you the emulator.



130

00:10:26,010 --> 00:10:30,370

So we need to add number four five six and an operator here.



131

00:10:30,400 --> 00:10:34,950

So here we need to search for the number for.



132

00:10:35,010 --> 00:10:38,470

So just double click on it in order to select it.



133

00:10:39,080 --> 00:10:45,610

And here to select this image button and you can see out with it's rap rap content and the height is



134

00:10:45,620 --> 00:10:46,570

raw content.



135

00:10:46,730 --> 00:10:53,930

So let me click on this icon in order to see less attributes here so we can see that the outfeed weight



136

00:10:53,960 --> 00:10:54,920

is number one.



137

00:10:54,980 --> 00:11:01,050

OK so let's delete this value and then press and it'll channel keyboard so that it is placed on a proper



138

00:11:01,290 --> 00:11:01,810

position.



139

00:11:01,810 --> 00:11:04,640

Inside is nearly out horizontal.



140

00:11:04,640 --> 00:11:08,480

Now let's add another image button into our linearly and holds onto it.



141

00:11:08,510 --> 00:11:11,840

Again I want to put it beside this number 4 here.



142

00:11:12,170 --> 00:11:15,970

So put it here and now you want to have number five.



143

00:11:16,340 --> 00:11:22,070

So just double clicking on it in order to select it again it couldn't find it and I need to find it



144

00:11:22,070 --> 00:11:22,660

again.



145

00:11:24,230 --> 00:11:29,660

So we have number five and we need to delete the value of this slowly activate and then precedented



146

00:11:29,780 --> 00:11:31,820

on your keyboard again.



147

00:11:32,150 --> 00:11:34,400

You need to have number six



148

00:11:37,090 --> 00:11:42,800

so numbers and the layout weight is going to be nothing.



149

00:11:43,110 --> 00:11:45,920

And finally we need to have an operator.



150

00:11:46,020 --> 00:11:49,370

So if I were to add the minus operator here.



151

00:11:49,740 --> 00:11:54,910

So I'm going to actually select image view instead of an image button.



152

00:11:54,960 --> 00:12:04,290

So just try this image view here beside this number six your letters for minus or subtract subtract



153

00:12:05,160 --> 00:12:07,270

and then click on OK.



154

00:12:07,290 --> 00:12:11,910

So again it couldn't find it meaning to search it again.



155

00:12:13,460 --> 00:12:22,390

So here it is our minus operator but again we need to change the outwait of all of these components.



156

00:12:22,420 --> 00:12:27,740

So inside these components through section to select all of these components we can hold up the shift



157

00:12:27,750 --> 00:12:33,080

key and then select select all of them and for the lay of it let's add number one here.



158

00:12:34,170 --> 00:12:46,740

So here for this image view I'm going to set the height to change the height of one of these components



159

00:12:46,740 --> 00:12:50,190

to 100.



160

00:12:50,280 --> 00:12:59,220

So let's say that we have 100 as the layer of height but we forgot to do another feinting we need to



161

00:12:59,220 --> 00:13:03,980

set the layout of all of these components to zero.



162

00:13:04,050 --> 00:13:05,400

So all of them.



163

00:13:05,400 --> 00:13:08,160

And then for the lay out with ST-W 0 here.



164

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

OK.



165

00:13:08,850 --> 00:13:12,450

The same as the image buttons and the image above.



166

00:13:12,540 --> 00:13:14,410

So not everything works fine.



167

00:13:14,880 --> 00:13:20,550

Right now we need to actually let me show you the emulator.



168

00:13:20,550 --> 00:13:25,360

So we need to have number one to free and then another operator.



169

00:13:25,410 --> 00:13:29,080

So let me close these two linearly or horizontal.



170

00:13:29,080 --> 00:13:33,360

So here you can see these layouts inside this componentry section.



171

00:13:33,360 --> 00:13:39,930

So inside this pallet section just click on layouts and you need to have another linearly out horizontal.



172

00:13:39,930 --> 00:13:41,140

So just put it here.



173

00:13:41,250 --> 00:13:46,860

I want to put it inside it's linearly as vertical but below these are there linearly or horizontal so



174

00:13:47,040 --> 00:13:53,160

I need to actually just play with it a little bit so that it can find where I exactly want to put it



175

00:13:53,160 --> 00:13:53,670

here.



176

00:13:53,780 --> 00:14:00,500

Or if you want to you can just put it here but it's it's really hard to just put it inside this lay



177

00:14:00,500 --> 00:14:05,110

out by using the screen.



178

00:14:05,280 --> 00:14:10,890

So I'm going to actually put use this componentry and then put it here.



179

00:14:11,040 --> 00:14:17,620

So let's select this linearly horizontal and for the layout height it's changed to raw content.



180

00:14:19,970 --> 00:14:24,680

And here are let's add an image button to this linearly as horizontal.



181

00:14:24,680 --> 00:14:31,790

So let's find the images and then click on image pattern and drag an image into all the nearly out horizontally.



182

00:14:32,060 --> 00:14:35,620

So now if you need to add number one.



183

00:14:36,170 --> 00:14:40,810

So let's search for the number one.



184

00:14:40,820 --> 00:14:42,500

So here is the number 1.



185

00:14:42,790 --> 00:14:53,290

And for the layout vate Duffin and you can to have another image in here beside this number one number



186

00:14:53,290 --> 00:14:53,710

two



187

00:14:56,490 --> 00:15:01,930

against select is number two and for the left vate not just this value.



188

00:15:02,890 --> 00:15:06,890

And another image in here beside this number two here.



189

00:15:07,070 --> 00:15:10,420

So many times have number of free.



190

00:15:10,490 --> 00:15:13,220

So again you could why it couldn't find it.



191

00:15:13,230 --> 00:15:14,570

I need to select it again.



192

00:15:16,950 --> 00:15:18,870

And again for the Left wait.



193

00:15:19,130 --> 00:15:20,800

Just delete this value.



194

00:15:21,200 --> 00:15:29,960

And here I'm going to actually just let me show you the emulator so here we have a plus minus.



195

00:15:29,960 --> 00:15:33,540

And for the operator I'm going to use the multiply operator.



196

00:15:33,860 --> 00:15:36,690

So here let's add an image view.



197

00:15:36,740 --> 00:15:45,350

So just drag an image into our linearly or horizontal besides number three search for the multiply operator



198

00:15:46,310 --> 00:15:46,930

and select it.



199

00:15:46,930 --> 00:15:53,800

So again it couldn't find it multiply.



200

00:15:54,010 --> 00:15:55,840

Here for the.



201

00:15:55,850 --> 00:15:59,740

So now I'm going to select all of these are.



202

00:16:00,130 --> 00:16:04,260

Let's go back to the design I want all of these components.



203

00:16:04,260 --> 00:16:05,200

Number two.



204

00:16:05,220 --> 00:16:09,750

Number one number two number three and this multiply operator here inside this componentry section.



205

00:16:09,990 --> 00:16:17,920

So I'm going to set the out to zero and the layout vate to number one OK.



206

00:16:18,320 --> 00:16:25,740

I'm going to set the height of all of these components to 100 OK.



207

00:16:26,010 --> 00:16:34,740

So now that's nice but you can see that we cannot have an adult for example and either linearly a horizontal



208

00:16:34,740 --> 00:16:42,390

here we could add it inside linearly or horizontal and it can actually create a scroll view automatically



209

00:16:42,390 --> 00:16:47,930

for us for the user actually but I want to see all of them here in one place.



210

00:16:47,940 --> 00:16:51,200

I don't want to I don't want the user to scroll.



211

00:16:51,280 --> 00:16:54,690

So we need to do something else.



212

00:16:55,020 --> 00:17:01,620

We need to actually decrease the height of our image patterns and our image views.



213

00:17:01,890 --> 00:17:09,340

So we can do that because if I select this linear horizontal horizontally can see that the height is



214

00:17:09,340 --> 00:17:10,490

the content.



215

00:17:10,540 --> 00:17:14,230

So height of all of this linearly it's ratcheted up content.



216

00:17:14,250 --> 00:17:17,750

And also these aren't nearly as vertical.



217

00:17:17,900 --> 00:17:24,280

Height is hard coded for this linearly and vertical that contains all of this linearly out horizontal.



218

00:17:24,390 --> 00:17:32,430

So we can actually set the lineal height of this linearly and vertical to for example number 200



219

00:17:35,060 --> 00:17:37,400

or maybe 300



220

00:17:40,580 --> 00:17:45,770

but I think it's good to be 200 or 250



221

00:17:48,690 --> 00:17:50,160

not 200.



222

00:17:50,640 --> 00:18:02,370

So now as you can see nothing is actually other components for example image patent for the number one



223

00:18:02,370 --> 00:18:05,830

to free and the multiply operator of you cannot see them.



224

00:18:06,210 --> 00:18:09,130

So you need to do something else.



225

00:18:09,210 --> 00:18:17,450

We need to say that this one is linearly as vertical to the left hand to be wrapped content right.



226

00:18:17,790 --> 00:18:23,310

And we can actually select all of these image buttons and his image views.



227

00:18:23,370 --> 00:18:30,210

So here this is really important to make sure that you only select these image buttons and these image



228

00:18:30,210 --> 00:18:33,000

views not any other linear layouts.



229

00:18:33,060 --> 00:18:35,100

So we have this one image with a number 7.



230

00:18:35,100 --> 00:18:40,490

So only select the image buttons and the image views do not select any other.



231

00:18:40,490 --> 00:18:44,840

For example layouts like me said all of them



232

00:18:51,890 --> 00:18:55,560

are here for their layout height.



233

00:18:55,650 --> 00:19:02,750

We can say number 80 to be no height or we can actually change it to number 70.



234

00:19:05,030 --> 00:19:09,510

75 this 75 is good.



235

00:19:09,510 --> 00:19:15,380

So now we can add another linearly or horizontal into early nearly vertical.



236

00:19:15,570 --> 00:19:19,280

So let me just close all of this linearly out here.



237

00:19:19,680 --> 00:19:27,000

Now inside is pallete section just click on these layouts and let's add another linearly or horizontal



238

00:19:27,000 --> 00:19:28,490

into our linearly as vertical.



239

00:19:28,500 --> 00:19:29,250

And below it.



240

00:19:29,290 --> 00:19:32,970

These other linearly outs.



241

00:19:33,030 --> 00:19:41,270

So just with it here and a selected and for the lay out height the select graphed content.



242

00:19:41,280 --> 00:19:47,370

Now let's add an image pattern into hardly any reason to select this image pattern and this added here



243

00:19:47,370 --> 00:19:50,580

into these linearly out horizontal.



244

00:19:51,120 --> 00:19:52,780

So let me show you the emulator.



245

00:19:53,130 --> 00:19:55,510

So we need to add a number.



246

00:19:55,550 --> 00:19:58,390

We need to have this clear button.



247

00:19:58,440 --> 00:19:59,490

This is zero.



248

00:19:59,910 --> 00:20:08,480

And another operator here so we can actually say we can't search for that clear.



249

00:20:08,480 --> 00:20:18,930

I think we don't have the clear image but in so we don't have to have an image view but we can actually



250

00:20:18,940 --> 00:20:20,800

find.



251

00:20:20,940 --> 00:20:23,120

No we don't have to have an image pattern here.



252

00:20:23,160 --> 00:20:29,420

So let's click on council and let's add an add a button into a linearly or horizontal to INSIDE POLITICS



253

00:20:29,420 --> 00:20:34,480

and click on all and then select this button and put it inside is linearly horizontal.



254

00:20:34,890 --> 00:20:41,930

So now let's select this spot in here and let's delete this value of the Outhwaite and then personated



255

00:20:42,260 --> 00:20:43,110

keyboard.



256

00:20:43,110 --> 00:20:47,090

So we consider the lay out Viets and nearly as height about what about an ace wrap content.



257

00:20:47,100 --> 00:20:47,920

Right.



258

00:20:48,240 --> 00:20:52,920

So now let's change the text of this pattern to.



259

00:20:52,980 --> 00:20:59,940

For example see if you're going to increase the size of this part of the text of this pattern later.



260

00:21:00,350 --> 00:21:07,060

And here we are going to add an image pattern for the number 0.



261

00:21:07,060 --> 00:21:15,850

So inside this palette section click on images image button and then just put it here beside this linearly.



262

00:21:15,970 --> 00:21:21,170

So it is see a clear pattern and inside linearly authorities.



263

00:21:21,650 --> 00:21:26,650

So let me make sure that I actually put it in the proper positions.



264

00:21:26,820 --> 00:21:34,130

Here let me search for the number zero so it couldn't find it.



265

00:21:34,440 --> 00:21:41,190

And I'm going to search again so now we have this number zero here.



266

00:21:41,680 --> 00:21:45,930

And for the L.A. outwait I'm going to delete this value



267

00:21:48,920 --> 00:21:53,000

so right.



268

00:21:53,200 --> 00:21:55,400

And the email button.



269

00:21:55,510 --> 00:22:06,900

So let's change the layout height of this image within 275 or maybe let's see what is the height of



270

00:22:06,930 --> 00:22:09,810

these other image.



271

00:22:09,820 --> 00:22:15,800

And so it's going to be weeks later for now let's just put it this way.



272

00:22:16,280 --> 00:22:23,250

And then we need to have another operator right here to have the device operator.



273

00:22:23,450 --> 00:22:26,250

So we are going to add an image for you here.



274

00:22:29,290 --> 00:22:32,260

So the search for the right operator



275

00:22:34,940 --> 00:22:36,960

here let's do the display out.



276

00:22:37,020 --> 00:22:40,810

Wait we can see that the left feet and the layer of hightest wrap around.



277

00:22:41,210 --> 00:22:43,910

So that's good.



278

00:22:44,010 --> 00:22:44,470

OK.



279

00:22:44,650 --> 00:22:54,450

So now I'm going to actually say that I'm going to specify the lay out weight of these components inside



280

00:22:54,450 --> 00:22:55,930

this linearly authorities.



281

00:22:56,310 --> 00:22:59,680

But we have only three components not four.



282

00:23:00,030 --> 00:23:02,900

So one component should take two parts.



283

00:23:03,180 --> 00:23:03,780

OK.



284

00:23:03,780 --> 00:23:08,920

We have four parts but we only have three components but only one of them.



285

00:23:08,940 --> 00:23:15,430

One of these components can take two parts and it must actually because that is going to be disorganized.



286

00:23:15,750 --> 00:23:19,960

So we can see that the spot in this clear pattern.



287

00:23:20,490 --> 00:23:25,560

Let's change the height of the sclera went into 1775 first.



288

00:23:25,560 --> 00:23:33,600

Now we can say that the data out of this clear pattern is going to be zero.



289

00:23:34,520 --> 00:23:43,040

But still the height is going to be to AK and selectees 0.10.



290

00:23:43,090 --> 00:23:50,960

So for the lay out of this actually assigning the value 0 for this 0.10 But what to lay out wait we



291

00:23:50,990 --> 00:24:00,400

can say number one and for this divide in his view for the lay out for the outside let's say that it



292

00:24:00,400 --> 00:24:05,580

is 75 and out of which it is zero.



293

00:24:06,030 --> 00:24:14,630

But the lay out of 8 is number one now we can see that everything is working fine and you can see that



294

00:24:14,640 --> 00:24:18,650

the lay out weight of this pattern is to it is taking two parts.



295

00:24:19,090 --> 00:24:27,710

OK I told you that is so that the layout of our A'Lelia isn't all always going to be actually is going



296

00:24:27,710 --> 00:24:34,870

to be a four parts is going to contain four parts and we have here we have three components.



297

00:24:34,880 --> 00:24:39,830

So one of them should take two parts and the others can take one part each.



298

00:24:39,830 --> 00:24:41,580

So now let's make this clear.



299

00:24:41,590 --> 00:24:49,100

But then let's increase the text size of this clear and so that we can view all attributes and searches



300

00:24:49,330 --> 00:24:53,060

for the text size attributes here.



301

00:24:53,240 --> 00:25:01,310

So here is the take size and we can say for example number 50 or we could actually change it to number



302

00:25:01,400 --> 00:25:05,650

70 or maybe number 40.



303

00:25:08,190 --> 00:25:10,720

Or maybe number 45.



304

00:25:11,970 --> 00:25:14,500

I think number 45 is good.



305

00:25:14,840 --> 00:25:15,560

OK.



306

00:25:16,630 --> 00:25:17,450

So that's it.



307

00:25:17,500 --> 00:25:22,480

This is our layout and now we can change the background color of our linearly as we're vertical that



308

00:25:22,480 --> 00:25:26,050

contains all of these nearly outs here horizontal.



309

00:25:26,140 --> 00:25:33,110

So let's select this linearly as vertical that contains these linearly outs here horizontal horizontal



310

00:25:33,140 --> 00:25:39,170

linearly outs and for the back enormous tribute to this value and unprecedented on our keyboard.



311

00:25:39,550 --> 00:25:48,790

So I think that's beautiful but we could also change the background color of our image patterns.



312

00:25:48,820 --> 00:25:53,950

So for example let's see that



313

00:25:57,120 --> 00:26:03,130

let's say that for example I wanted an uncle out of this number seven even image button to be f f f



314

00:26:03,390 --> 00:26:05,330

white.



315

00:26:05,450 --> 00:26:06,380

I think it's good.



316

00:26:06,380 --> 00:26:07,240

It's beautiful.



317

00:26:07,370 --> 00:26:12,710

Let's actually set the background color of all of these image patterns to be white.



318

00:26:12,780 --> 00:26:14,280

So select all of them.



319

00:26:14,300 --> 00:26:20,630

So here let me point out that you should only or in other words you must only select these image patterns.



320

00:26:20,690 --> 00:26:21,110

OK.



321

00:26:21,140 --> 00:26:27,410

Because we want to only change the background color of this image patterns and this pattern so select



322

00:26:27,410 --> 00:26:28,570

this image pattern here.



323

00:26:28,580 --> 00:26:31,790

So we all it changed depending on color of these numbers.



324

00:26:31,790 --> 00:26:38,300

And so I'm going to select number 8 and this font so I'm going to select this I'm going to open this



325

00:26:38,300 --> 00:26:39,740

linearly out horizontal.



326

00:26:40,020 --> 00:26:48,140

And number four five six and this one number one two three.



327

00:26:48,680 --> 00:26:52,350

And we have this button and this zero OK.



328

00:26:52,820 --> 00:27:00,050

And here let's actually for the back in and attribute this hash tag F F F and unprecedented on your



329

00:27:00,050 --> 00:27:00,650

keyboard.



330

00:27:02,150 --> 00:27:09,050

So I think it's now good OK for these image views.



331

00:27:09,050 --> 00:27:11,930

For example let's select this plus button here.



332

00:27:11,930 --> 00:27:13,910

This plus sign.



333

00:27:13,970 --> 00:27:20,720

Let's say that I want to pack in uncolored to be void it changed to select select all of these interviews



334

00:27:20,780 --> 00:27:21,440

also.



335

00:27:22,410 --> 00:27:30,480

So here select them inside this layout if you want to select all of them I should only select hold down



336

00:27:30,510 --> 00:27:35,570

the shift key on my keyboard in order to select them because if I hold down the Comanche is going to



337

00:27:35,570 --> 00:27:36,360

switch to that.



338

00:27:36,540 --> 00:27:46,920

So it takes that and for the packet of attributes here we can't say hashtag I think it's now much more



339

00:27:47,010 --> 00:27:47,890

beautiful.



340

00:27:48,120 --> 00:27:54,480

So let's run tiap and let's see that everything works fine.



341

00:27:55,610 --> 00:27:57,080

So it's good.



342

00:27:57,440 --> 00:28:01,910

And here we could add the plus side.



343

00:28:02,190 --> 00:28:04,520

So let's go back to Andrew video.



344

00:28:05,340 --> 00:28:08,490

And here inside is componentry section.



345

00:28:08,520 --> 00:28:14,600

So just select this linearly out vertical that contains all of these buttons and these operators.



346

00:28:14,970 --> 00:28:18,350

So I'm going to increase the top margin.



347

00:28:18,540 --> 00:28:24,400

So let's see less attributes here and that's change number 10 to number 15.



348

00:28:26,110 --> 00:28:27,190

If I run the app.



349

00:28:27,220 --> 00:28:29,040

Now let's see what happens.



350

00:28:29,050 --> 00:28:37,440

So I think that skewed so finally you're are going to add the equal image to our lay out here.



351

00:28:37,800 --> 00:28:44,340

So inside this palette section just click on images and then we have this image of you just drag it



352

00:28:44,340 --> 00:28:47,860

here into our lay out here just put it here.



353

00:28:47,950 --> 00:28:49,070

You can see this space here.



354

00:28:49,080 --> 00:28:52,940

That's why I created this top margin for this nearly as vertical.



355

00:28:52,980 --> 00:28:55,740

Just put it inside this empty space.



356

00:28:55,990 --> 00:28:58,680

Let's select this equal image.



357

00:28:59,040 --> 00:28:59,710

OK.



358

00:29:00,210 --> 00:29:03,390

So here because this is actually a constraint lay out.



359

00:29:03,410 --> 00:29:10,530

Remember remember I told you that it turned this auto connect feature off because you wanted to add



360

00:29:10,650 --> 00:29:13,510

the constraints manually manually.



361

00:29:13,530 --> 00:29:22,290

But here for these equal image we want to get help from this auto connect feature the auto correct feature



362

00:29:22,290 --> 00:29:24,310

is going to help us.



363

00:29:24,540 --> 00:29:31,230

In other words it's going to it's going up automatically create constraints for our specific component



364

00:29:32,130 --> 00:29:36,340

according to how we want to position it inside out.



365

00:29:36,360 --> 00:29:44,970

So just turn on this feature now and select this image this equal image and for the layout we assign



366

00:29:45,050 --> 00:29:51,510

there are 50 and for the length height inside the body and about 50 that unprecedented your keyboard.



367

00:29:51,510 --> 00:29:56,690

So now let's just change the place of this equipment.



368

00:29:56,690 --> 00:30:01,730

So I want this image to be between number eight and number nine just here.



369

00:30:02,620 --> 00:30:07,930

So now as you can see some constraints automatically created for this image here.



370

00:30:07,950 --> 00:30:08,300

Right.



371

00:30:08,320 --> 00:30:11,540

The left constraint and the right goes straight.



372

00:30:11,900 --> 00:30:16,070

So now I'm going to run the app just run the app and then click on OK.



373

00:30:16,520 --> 00:30:18,690

Let's let me shoot the emulator.



374

00:30:19,130 --> 00:30:25,180

As you can see it's going to actually show it as an error and it says that number 50 alone is not allowed



375

00:30:25,190 --> 00:30:35,040

so you need to change it to DP before it actually puts these DP for us automatically but now we need



376

00:30:35,030 --> 00:30:39,880

to actually put it manually.



377

00:30:39,880 --> 00:30:47,680

So here you can see that our image is equal images is now at the top because we only created the left



378

00:30:47,740 --> 00:30:52,620

constraint and the left constraint and the right constraint.



379

00:30:52,630 --> 00:30:55,840

So we need to have also the top constraints.



380

00:30:56,200 --> 00:30:59,470

Just click on this little circle here at the top.



381

00:30:59,470 --> 00:31:01,550

This little circle that is pulsating.



382

00:31:01,960 --> 00:31:09,730

And I'm going to create a constraint to the bottom edge of this linear layout vertical that contains



383

00:31:09,730 --> 00:31:12,320

this text view that it's going to show us the result.



384

00:31:12,760 --> 00:31:15,060

So I'm going to just create a constraint.



385

00:31:15,070 --> 00:31:21,700

I'm going to just throw a constraint to the bottom edge of this as you can see it's kind of tricky but



386

00:31:21,790 --> 00:31:27,280

if you can actually dislike it here to the bottom edge of this linearly as vertical.



387

00:31:27,280 --> 00:31:29,050

Now you can see that it is actually red.



388

00:31:29,260 --> 00:31:36,940

I'm going to just really sit here and I can straight is the top edge of this image this equal image



389

00:31:37,000 --> 00:31:41,060

is actually connected to the bottom edge of these are linearly alphabetical.



390

00:31:41,170 --> 00:31:48,900

So now this bottom edge of this image and way to connect this image to the top edge of this linearly



391

00:31:48,900 --> 00:31:52,310

and vertical that contains these numbers and these operators.



392

00:31:52,450 --> 00:31:58,900

So you can see this little circle that is pulsating just selected and just right your connection to



393

00:31:58,900 --> 00:32:02,160

the bottom edge of this.



394

00:32:02,250 --> 00:32:06,240

So it's kind of tricky but we need to do it here.



395

00:32:07,180 --> 00:32:16,250

To the top edge of these linearly out vertical here so you can see this collection is now created at



396

00:32:16,260 --> 00:32:18,690

this border at its top edge.



397

00:32:18,690 --> 00:32:22,580

This by the image left and right.



398

00:32:22,680 --> 00:32:29,700

So here we can change because we already just turned on this iconic feature.



399

00:32:29,790 --> 00:32:33,730

We can't change the place of this image here.



400

00:32:37,060 --> 00:32:42,280

Or we can actually just let's just put it a little bit to the right the selected.



401

00:32:42,610 --> 00:32:44,870

And then let's put it here.



402

00:32:45,850 --> 00:32:48,020

Or we can just put it here.



403

00:32:51,020 --> 00:32:51,240

It is.



404

00:32:51,280 --> 00:32:56,600

It doesn't really matter very petite but you can just change it if you want.



405

00:32:56,610 --> 00:32:57,390

I think that's good.



406

00:32:57,390 --> 00:32:59,970

Now let's run the app.



407

00:33:00,420 --> 00:33:02,450

Let me show you the emulator.



408

00:33:03,210 --> 00:33:09,520

So now again it's showing us an error and that's because maybe or.



409

00:33:10,370 --> 00:33:14,840

We need to put the DP here again for the layout of it and that the height.



410

00:33:14,880 --> 00:33:25,130

So when I run the Afghan It may have to erase and also the emulator is actually restarted.



411

00:33:25,270 --> 00:33:25,850

I don't know why



412

00:33:28,650 --> 00:33:33,340

so I was against it the app is running on the simulator and everything works fine.



413

00:33:33,340 --> 00:33:42,340

We have this image this equal image here and we successfully created the layouts that lay out of our



414

00:33:42,430 --> 00:33:44,190

calculator application.



415

00:33:44,560 --> 00:33:49,320

So that's enough for this tutorial and it's really we're going to code the app.



416

00:33:49,630 --> 00:33:50,980

Thank you very much for watching.



417

00:33:50,980 --> 00:33:56,410

If you have any questions about these concepts that you've learned so far please watch the discussion



418

00:33:56,410 --> 00:33:59,750

in Nichol's and I will do my best to answer all of your questions.



419

00:33:59,890 --> 00:34:01,700

Thank you very much for watching again.



420

00:34:01,960 --> 00:34:04,980

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