1

00:00:00,180 --> 00:00:05,830

Hi everyone in this year Tauriel we're going to go ahead and create another Android application.



2

00:00:05,850 --> 00:00:11,450

So just click on this start in your Android studio project and for the application name just typing



3

00:00:11,490 --> 00:00:15,050

here app 50 and then click on next.



4

00:00:15,450 --> 00:00:21,120

And then here choose AP A16 Android 4.1 Jelly Bean for the minimum STK.



5

00:00:21,180 --> 00:00:24,510

Next here choose plant activity next.



6

00:00:24,810 --> 00:00:26,670

And then here click on finish.



7

00:00:26,910 --> 00:00:27,460

OK.



8

00:00:27,660 --> 00:00:33,450

Now let's actually select this hell over takes you here and then person delete key on your keyboard



9

00:00:34,230 --> 00:00:36,600

and then double click on this red folder.



10

00:00:36,700 --> 00:00:43,190

Lay out activity underline that example and that here choose this Flosi an action button here.



11

00:00:43,200 --> 00:00:45,540

And then our present delete key on your keyboard.



12

00:00:45,900 --> 00:00:50,850

So now let's actually go back and say this content underline minute example and here you want to actually



13

00:00:50,850 --> 00:00:53,790

design the user interface of our application.



14

00:00:54,030 --> 00:00:57,780

So first of all it's actually like a linearly out vertical.



15

00:00:57,810 --> 00:00:58,480

OK.



16

00:00:58,500 --> 00:01:00,850

At the center of this are relatively out here.



17

00:01:00,930 --> 00:01:01,690

OK.



18

00:01:02,160 --> 00:01:06,740

And now as you can see there are some paddings here as you can see.



19

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

So this actually to go in so is it takes tap here.



20

00:01:09,840 --> 00:01:12,760

And here you can see these are padding values here.



21

00:01:12,790 --> 00:01:17,430

OK padding bottom padding actually left right on top.



22

00:01:17,550 --> 00:01:20,480

So these attributes are for these.



23

00:01:20,510 --> 00:01:21,670

They're relatively out.



24

00:01:21,780 --> 00:01:22,120

OK.



25

00:01:22,170 --> 00:01:28,260

And this linearly as you can see that you actually drag into these relatively healthy here as you can



26

00:01:28,260 --> 00:01:28,740

see.



27

00:01:28,920 --> 00:01:29,570

This is here.



28

00:01:29,610 --> 00:01:30,140

OK.



29

00:01:30,300 --> 00:01:31,800

Orientation vertical.



30

00:01:31,800 --> 00:01:33,660

Lay out each match parent.



31

00:01:33,740 --> 00:01:35,560

Lay out how much parent.



32

00:01:35,610 --> 00:01:36,240

And here it is again.



33

00:01:36,250 --> 00:01:37,170

See it says.



34

00:01:37,380 --> 00:01:39,440

Lay out our center resti called through.



35

00:01:39,570 --> 00:01:39,850

OK.



36

00:01:39,870 --> 00:01:43,670

So this is actually the center of this relatively.



37

00:01:43,740 --> 00:01:44,520

OK.



38

00:01:45,000 --> 00:01:48,120

And here it says lay out Center horizontally through.



39

00:01:48,120 --> 00:01:50,510

So again as you can see it is at the center.



40

00:01:50,700 --> 00:01:51,420

OK.



41

00:01:51,780 --> 00:01:53,690

So hopefully that makes sense.



42

00:01:53,850 --> 00:01:57,230

And now let's actually drag a large takes view.



43

00:01:57,390 --> 00:01:57,820

OK.



44

00:01:57,930 --> 00:01:59,650

Into this linearly outwards the call.



45

00:01:59,710 --> 00:02:06,180

So put it at the center of these linearly aesthetical and double click on it.



46

00:02:06,560 --> 00:02:07,120

OK.



47

00:02:07,320 --> 00:02:15,070

And for the text just typing in here this is our first activity.



48

00:02:16,960 --> 00:02:17,650

OK.



49

00:02:18,020 --> 00:02:20,530

And then our press Enter key on your keyboard.



50

00:02:20,870 --> 00:02:25,580

Now let's actually go inside this takes tab here as you can see.



51

00:02:25,580 --> 00:02:28,300

And now as you can see our text is here.



52

00:02:28,520 --> 00:02:29,630

OK.



53

00:02:29,630 --> 00:02:30,900

Now you can see this.



54

00:02:30,900 --> 00:02:37,910

It says play out with wrap Content-Length hide wrap content takes appearance takes text appearance large.



55

00:02:37,940 --> 00:02:38,430

OK.



56

00:02:38,630 --> 00:02:41,640

And the text is this is our first activity.



57

00:02:41,870 --> 00:02:42,420

OK.



58

00:02:42,650 --> 00:02:44,100

And the idea is this.



59

00:02:44,120 --> 00:02:44,850

OK.



60

00:02:45,350 --> 00:02:51,220

And the left gravities is actually the center horizontal so I can actually add another attribute here.



61

00:02:51,330 --> 00:02:54,160

I can say just a text size.



62

00:02:54,470 --> 00:03:02,470

OK and for the text size I can just type in for example number 6 the DP So it stands for density pixels.



63

00:03:02,480 --> 00:03:06,920

OK so now let's actually go back and say this design top here as you can see.



64

00:03:07,280 --> 00:03:13,820

And here you can see now our text is now much larger the size of our takes is much larger.



65

00:03:13,820 --> 00:03:21,290

Now let's actually track a button into this linearly outwards and below this takes few here and let's



66

00:03:21,290 --> 00:03:24,680

actually double click on it and for the text just typing here.



67

00:03:24,690 --> 00:03:33,050

Let's go to second activity second activity.



68

00:03:33,670 --> 00:03:34,250

OK.



69

00:03:34,490 --> 00:03:41,300

And for the ID just type in here between second activity.



70

00:03:42,310 --> 00:03:43,050

OK.



71

00:03:43,370 --> 00:03:48,350

And then a person enter key on your keyboard.



72

00:03:48,860 --> 00:03:52,930

So now let's actually go inside this a text tab here again.



73

00:03:53,120 --> 00:03:55,660

And now you can see our button is here.



74

00:03:55,730 --> 00:03:56,580

OK.



75

00:03:56,720 --> 00:03:59,640

It says lay out Viets is Lappe content right.



76

00:03:59,640 --> 00:04:00,400

Lay out height.



77

00:04:00,420 --> 00:04:03,840

Is that content again as you can see the text is.



78

00:04:03,860 --> 00:04:06,390

Let's go to a second activity.



79

00:04:06,680 --> 00:04:07,370

OK.



80

00:04:07,700 --> 00:04:13,910

And as you can see the idea is Beati and the second activity and the lay out gravity is center horizontal.



81

00:04:14,080 --> 00:04:14,700

OK.



82

00:04:15,020 --> 00:04:17,710

And I can actually add other attributes for it.



83

00:04:17,710 --> 00:04:19,290

For example paddings.



84

00:04:19,700 --> 00:04:20,350

OK.



85

00:04:20,420 --> 00:04:21,540

And for the padding.



86

00:04:21,670 --> 00:04:24,800

I can just assign the value for example 50.



87

00:04:25,430 --> 00:04:26,270

So.



88

00:04:26,410 --> 00:04:27,510

DP OK.



89

00:04:27,810 --> 00:04:29,820

Now let's actually go back and say this is on top.



90

00:04:29,930 --> 00:04:34,450

And now as you can see the padding is actually much bigger.



91

00:04:34,490 --> 00:04:34,930

OK.



92

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

So let's actually go back and say this takes top here again.



93

00:04:38,570 --> 00:04:43,950

Now I can actually add other values for example Margene Margene.



94

00:04:44,380 --> 00:04:44,700

OK.



95

00:04:44,720 --> 00:04:49,080

At the margin again I can just assign a value for DP.



96

00:04:49,100 --> 00:04:53,920

Now let's actually go back and say this design top here you can see now there is a Margene here.



97

00:04:53,960 --> 00:04:55,000

OK.



98

00:04:55,190 --> 00:05:02,270

So as you can see here because I just only referred to padding or just referred to Margene and not other



99

00:05:02,600 --> 00:05:07,400

for example specific attributes such as padding left or padding right.



100

00:05:07,410 --> 00:05:10,780

I was going to actually assign this value to all of those directions.



101

00:05:10,790 --> 00:05:17,030

OK padding left padding right padding top and padding bottom a key or here as you can see disvalue is



102

00:05:17,030 --> 00:05:21,240

for a margin top margin bottom margin lift and margin right.



103

00:05:21,380 --> 00:05:22,180

OK.



104

00:05:22,520 --> 00:05:24,170

So hopefully that makes sense.



105

00:05:24,170 --> 00:05:26,570

Let's actually go back inside this design up here.



106

00:05:26,570 --> 00:05:30,510

Now as you can see the design of this layout is actually finished.



107

00:05:30,590 --> 00:05:35,010

Now I want to actually create another layer called second activity.



108

00:05:35,120 --> 00:05:41,160

So let's actually click on this view here tool windows and then click on Project OK.



109

00:05:41,660 --> 00:05:45,310

And now it's actually selectees lay out a folder here.



110

00:05:45,350 --> 00:05:45,950

OK.



111

00:05:45,950 --> 00:05:52,070

Right click on it new and then click here as you can see we have this example here.



112

00:05:52,070 --> 00:05:55,940

OK here's just select this layout exemplified.



113

00:05:56,240 --> 00:05:56,740

OK.



114

00:05:56,900 --> 00:06:00,630

And for the layout file name just type in here.



115

00:06:01,130 --> 00:06:02,270

Second activity.



116

00:06:02,390 --> 00:06:08,180

So remember that for the name of the layout for the name of your exemplified you need to actually start



117

00:06:08,180 --> 00:06:11,650

your XML file name with a lower case letter.



118

00:06:11,720 --> 00:06:12,360

OK.



119

00:06:12,380 --> 00:06:14,740

So for example here can just take a second.



120

00:06:14,820 --> 00:06:21,800

And here in order to separate two words here for them I out name I can't just put in an underline character



121

00:06:21,860 --> 00:06:25,920

or key activity OK.



122

00:06:26,770 --> 00:06:28,320

So hopefully that makes sense.



123

00:06:28,360 --> 00:06:30,380

And here for the root tag here.



124

00:06:30,410 --> 00:06:37,900

Just type in here relative lay out and make sure that you actually write this name correctly.



125

00:06:37,900 --> 00:06:38,380

OK.



126

00:06:38,490 --> 00:06:43,140

As the same name here relatively out and click on finish.



127

00:06:43,150 --> 00:06:46,260

So as you can see here we have our lay out here.



128

00:06:46,270 --> 00:06:48,780

This is our second activity that exemplify.



129

00:06:48,930 --> 00:06:55,090

And if we actually go back and say it inside this takes top here as you can see it says relatively OK.



130

00:06:55,270 --> 00:07:01,560

So if you are right this name incorrect incorrectly it's going to actually show you an error in this



131

00:07:01,560 --> 00:07:02,120

design.



132

00:07:02,170 --> 00:07:02,510

OK.



133

00:07:02,560 --> 00:07:06,990

So make sure that you actually write this read it relatively to name it correctly.



134

00:07:07,050 --> 00:07:07,690

OK.



135

00:07:07,930 --> 00:07:14,170

So if I actually put an s here and if I go back and say this design to it says the following classes



136

00:07:14,170 --> 00:07:15,120

could not be found.



137

00:07:15,130 --> 00:07:15,880

OK.



138

00:07:16,240 --> 00:07:20,370

So if I go back and say this text tab now I can just delete it.



139

00:07:20,380 --> 00:07:23,210

This is here and now the error is gone.



140

00:07:23,410 --> 00:07:24,440

OK.



141

00:07:24,700 --> 00:07:26,820

So hopefully that makes sense.



142

00:07:26,860 --> 00:07:30,960

And now let's actually designed this of lay out here.



143

00:07:30,970 --> 00:07:34,870

OK so just double click on this second underline activity that.



144

00:07:35,020 --> 00:07:42,110

Example here in order to make this area wider and now you want to actually the design does layout.



145

00:07:42,130 --> 00:07:48,530

So here again just putting up a linearly out vertical is relatively healthy.



146

00:07:48,550 --> 00:07:48,990

OK.



147

00:07:49,090 --> 00:07:54,640

So just put it at the center of this relatively out and as you can see there are not headings here.



148

00:07:54,640 --> 00:07:55,170

OK.



149

00:07:55,300 --> 00:08:01,500

So if we go back inside this takes type here as you can see we cannot see the padding attributes here.



150

00:08:01,660 --> 00:08:05,990

So I can just add value at that attribute Hiroki at that value here.



151

00:08:06,100 --> 00:08:07,770

So I can't just take in padding.



152

00:08:08,070 --> 00:08:08,560

OK.



153

00:08:08,770 --> 00:08:14,560

And if I press Enter key on my keyboard now I can assign a value for the padding so I can just assign



154

00:08:14,560 --> 00:08:17,290

the value 16 for the padding here.



155

00:08:17,290 --> 00:08:23,330

OK 16 DP and if I go back and say this design top now you can see these are paddings here.



156

00:08:23,350 --> 00:08:24,080

OK.



157

00:08:24,340 --> 00:08:30,630

So now let's actually do a large takes of you at the center of this linearly out of vertical double



158

00:08:30,640 --> 00:08:34,560

click on it and here for the text just typing here.



159

00:08:34,750 --> 00:08:37,810

This is our second



160

00:08:40,300 --> 00:08:41,190

activity.



161

00:08:42,690 --> 00:08:46,460

OK and then press enter key on your keyboard.



162

00:08:46,660 --> 00:08:51,410

Now let's actually go back and say this takes up actually the text top here.



163

00:08:51,490 --> 00:08:52,420

OK.



164

00:08:52,420 --> 00:08:56,570

And now I can actually add another attribute here.



165

00:08:56,650 --> 00:08:59,710

Text size.



166

00:08:59,890 --> 00:09:07,330

And for the text size I can just put it in the value for example 70 OK 70 DP and if I go back and say



167

00:09:07,330 --> 00:09:08,360

this design tab.



168

00:09:08,650 --> 00:09:11,090

Now we can see this value here.



169

00:09:11,110 --> 00:09:11,780

OK.



170

00:09:11,990 --> 00:09:14,500

And I can actually change that value here again.



171

00:09:14,590 --> 00:09:17,450

For example number 90.



172

00:09:17,770 --> 00:09:18,720

OK.



173

00:09:18,740 --> 00:09:22,470

And if I go back and say this design to now you can see this value here.



174

00:09:22,480 --> 00:09:23,100

OK.



175

00:09:23,440 --> 00:09:28,510

And again just putting an exclamation mark at the end of this text here.



176

00:09:28,600 --> 00:09:29,320

OK.



177

00:09:29,710 --> 00:09:31,130

And the inside is designed.



178

00:09:31,150 --> 00:09:33,730

Now you can't see this exclamation mark here.



179

00:09:33,940 --> 00:09:34,660

OK.



180

00:09:35,050 --> 00:09:37,430

So hopefully that makes sense.



181

00:09:37,660 --> 00:09:43,120

Now let's actually go back and say this main activity that double file here and here let's actually



182

00:09:43,320 --> 00:09:46,820

delete these lines of code that are actually related to the options menu.



183

00:09:47,120 --> 00:09:47,750

OK.



184

00:09:47,860 --> 00:09:53,200

And then delete these lines of code that are related to the fluking action button.



185

00:09:53,500 --> 00:09:57,840

And here let's actually create a button object here.