1

00:00:00,160 --> 00:00:05,550

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



2

00:00:05,550 --> 00:00:06,510

So just click on this.



3

00:00:06,510 --> 00:00:08,940

Start any Android studio project.



4

00:00:09,100 --> 00:00:14,220

And for the application name just type in here app 42 boxes.



5

00:00:14,730 --> 00:00:15,600

OK.



6

00:00:16,080 --> 00:00:23,170

And then click on next and here choose a 16 Android 4.1 Jelly Bean for a minimum SDK and then click



7

00:00:23,170 --> 00:00:24,020

on next.



8

00:00:24,510 --> 00:00:27,670

And here is blank activity next.



9

00:00:27,720 --> 00:00:29,820

And here click on finish.



10

00:00:29,820 --> 00:00:35,640

Now let's actually select this hello world takes you here and then present it key on your keyboard and



11

00:00:35,640 --> 00:00:41,250

then double click on the series for the layout activity on the line minute example and select is a floating



12

00:00:41,250 --> 00:00:44,020

action button and then person delete key on your keyboard.



13

00:00:44,040 --> 00:00:44,440

OK.



14

00:00:44,700 --> 00:00:48,840

So now let's actually go back and say it is our content underline main example.



15

00:00:48,990 --> 00:00:53,640

And here we want to actually design the user interface of our application.



16

00:00:53,640 --> 00:00:58,590

So now let me actually show you our demo of the application that we want to actually create in this



17

00:00:58,590 --> 00:00:59,460

tutorial.



18

00:00:59,460 --> 00:01:05,010

So as you can see here we have some checkboxes here as you can see and if we actually click on one of



19

00:01:05,010 --> 00:01:09,870

these checkboxes here as you can see for example this boxing a toast appears and says boxing.



20

00:01:10,010 --> 00:01:10,870

OK.



21

00:01:11,100 --> 00:01:15,540

And if you actually can you can just keep boxing here and as you can see it's his Kickboxing is checked



22

00:01:15,900 --> 00:01:20,300

or if we actually click on this of football here now it says football is checked.



23

00:01:20,430 --> 00:01:21,020

OK.



24

00:01:21,210 --> 00:01:24,330

And if we asked you to check off this check boxes here.



25

00:01:24,330 --> 00:01:27,140

For example this one now nothing appears here OK.



26

00:01:27,210 --> 00:01:29,740

But if we actually check this check box again here.



27

00:01:30,060 --> 00:01:32,400

Now it says football is checked ok.



28

00:01:32,410 --> 00:01:34,550

Or for example swimming is checked.



29

00:01:35,010 --> 00:01:36,780

And we have a six here.



30

00:01:36,780 --> 00:01:37,350

OK.



31

00:01:37,410 --> 00:01:45,350

So this report is actually useful for actually the generating value of any use that actually seeks on



32

00:01:45,350 --> 00:01:45,590

this.



33

00:01:45,600 --> 00:01:48,130

I see people here as you can see here for example here.



34

00:01:48,300 --> 00:01:52,590

Now let's see is started the current value of the secret is five.



35

00:01:52,770 --> 00:01:57,940

And then it's going to give us the values of the sick bar when we use that actually six on this or seat



36

00:01:57,970 --> 00:01:58,980

part here.



37

00:01:59,370 --> 00:02:01,380

And we also have R-rating bar.



38

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

OK.



39

00:02:01,770 --> 00:02:06,930

We can actually use this rating but in order to rate something in our application and effectually scroll



40

00:02:06,930 --> 00:02:13,830

down we have some radio buttons inside the radio pipe radio buttons must be actually inside our radio



41

00:02:13,830 --> 00:02:14,510

group.



42

00:02:14,760 --> 00:02:15,200

OK.



43

00:02:15,330 --> 00:02:22,030

So as you can see here we have radio buttons and these radio buttons buttons must be inside our radio.



44

00:02:22,110 --> 00:02:27,930

And I can an auction only actually a chick only one of these radio buttons so cute for example this



45

00:02:27,930 --> 00:02:31,220

one of us is strict or for example this one.



46

00:02:31,290 --> 00:02:31,780

OK.



47

00:02:31,860 --> 00:02:34,630

I cannot check all of these radio buttons OK.



48

00:02:34,740 --> 00:02:39,460

And here as you can see this Breytenbach we have this reduce the number of stars are two.



49

00:02:39,480 --> 00:02:39,860

OK.



50

00:02:39,900 --> 00:02:42,640

For example here the number of stars of four.



51

00:02:42,720 --> 00:02:43,680

OK.



52

00:02:43,830 --> 00:02:49,470

So hopefully that makes sense and at least as you can see the background color are actually linearly



53

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

elsewheres.



54

00:02:49,800 --> 00:02:51,640

The call is actually orange.



55

00:02:51,660 --> 00:02:52,140

OK.



56

00:02:52,440 --> 00:02:56,840

So you can actually design or use an interface like this.



57

00:02:56,850 --> 00:03:01,900

So now let's actually go back and say this content underline minute example and now it's actually designed



58

00:03:01,920 --> 00:03:03,860

to use an interface over application.



59

00:03:03,870 --> 00:03:10,260

So first let's actually track a linearly with vertical at the center of this relatively here.



60

00:03:10,320 --> 00:03:10,740

OK.



61

00:03:10,740 --> 00:03:14,440

And now let's actually drag our vertical scroll view.



62

00:03:14,580 --> 00:03:15,120

OK.



63

00:03:15,150 --> 00:03:20,600

This vertical scroll you're into these are linearly and vertical so put it at the center of this linear



64

00:03:20,610 --> 00:03:22,200

layer linearly outwards the card.



65

00:03:22,200 --> 00:03:22,850

OK.



66

00:03:23,160 --> 00:03:28,040

And now let's actually drag a linearly vertical into this scroll view here.



67

00:03:28,130 --> 00:03:34,480

OK so now we can actually put our own user interface components inside this linearly vertical.



68

00:03:34,550 --> 00:03:34,920

OK.



69

00:03:34,950 --> 00:03:42,900

So now inside these widgets folder here as you can see I can actually find the checkbox or component



70

00:03:42,930 --> 00:03:49,350

as you can see this is the checkbox and I can actually select it and put it inside this linearly Ellsworthy



71

00:03:49,350 --> 00:03:50,090

call here.



72

00:03:50,160 --> 00:03:50,700

OK.



73

00:03:50,700 --> 00:03:51,890

So this is our checkbox.



74

00:03:51,900 --> 00:03:52,410

OK.



75

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

And now as you can see we can see these attributes that are actually related to this checkbox.



76

00:03:58,270 --> 00:04:00,240

You have this layout with plenty of height.



77

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

So you want to the layout of this checkbox to be much parent.



78

00:04:03,870 --> 00:04:04,290

OK.



79

00:04:04,440 --> 00:04:06,330

So here as you can see we have these options.



80

00:04:06,340 --> 00:04:10,180

So this one is actually for sit out with too much palette.



81

00:04:10,260 --> 00:04:15,110

So I kind of selected and just click on this button here and now it is a match pennant.



82

00:04:15,120 --> 00:04:17,030

OK the layout is match palette.



83

00:04:17,070 --> 00:04:17,650

OK.



84

00:04:17,940 --> 00:04:26,230

And now for the left gravity Let's actually choose center horizontal OK.



85

00:04:26,750 --> 00:04:32,430

And now let's actually find anti-gravity attributes of this checkbox here as you can see this is our



86

00:04:32,430 --> 00:04:38,730

gravity attribute and take these are Center checkbooks here and now as you can see the center that the



87

00:04:38,910 --> 00:04:42,990

text of this checkbox is actually at the center of the checkbox here.



88

00:04:43,000 --> 00:04:47,960

OK so now let's actually double click on the search box here.



89

00:04:47,970 --> 00:04:48,610

OK.



90

00:04:48,680 --> 00:04:51,410

And for the text just say here boxing.



91

00:04:52,010 --> 00:04:52,510

OK.



92

00:04:52,680 --> 00:04:56,820

And for the ID just typing here checkbooks one.



93

00:04:57,110 --> 00:04:57,510

OK.



94

00:04:57,510 --> 00:05:00,890

Or you can actually change this by another value.



95

00:05:01,030 --> 00:05:05,480

But I prefer to write the idea as this checkbox one.



96

00:05:05,580 --> 00:05:06,330

OK.



97

00:05:06,820 --> 00:05:11,080

And you can actually check these checkbooks ok for example by default.



98

00:05:11,130 --> 00:05:12,070

Check these checkbooks.



99

00:05:12,070 --> 00:05:17,950

OK so now let's actually track another checkbox into this linearly elsewhere the.



100

00:05:17,950 --> 00:05:24,300

So as you can see here we have this check box here just like it and put it inside these linearly alphabetical



101

00:05:24,370 --> 00:05:24,830

here.



102

00:05:24,850 --> 00:05:25,700

OK.



103

00:05:25,770 --> 00:05:31,200

And we should be matra parent and now as you can see we have the gravity attributes.



104

00:05:31,210 --> 00:05:31,830

OK.



105

00:05:31,840 --> 00:05:38,170

So just check these centers take walks here and now as you can see our tick box as you can see that



106

00:05:38,170 --> 00:05:40,750

takes the boxes at the center of the box.



107

00:05:40,770 --> 00:05:41,500

OK.



108

00:05:41,560 --> 00:05:46,520

Or we can actually for the layouts gravity we can actually choose center center horizontal.



109

00:05:46,630 --> 00:05:47,310

OK.



110

00:05:47,440 --> 00:05:52,860

Let's actually drag another checkbox into these linearly as vertical.



111

00:05:53,020 --> 00:05:59,240

But before that let me actually explain to you that this lay out vertical does this actually lay out



112

00:05:59,290 --> 00:06:02,550

gravity actually refers to this lay out OK.



113

00:06:02,630 --> 00:06:04,790

These are checkbooks lay out OK.



114

00:06:04,840 --> 00:06:10,400

And it actually determines the position of the checkbox inside its parent.



115

00:06:10,420 --> 00:06:10,850

OK.



116

00:06:10,960 --> 00:06:14,980

So the Pallant of this trick box is linear linearly outwards.



117

00:06:15,040 --> 00:06:21,110

OK so now as you can see it is at the center horizontal of this linearly Westcote OK.



118

00:06:21,640 --> 00:06:23,590

So hopefully that makes sense.



119

00:06:23,600 --> 00:06:31,190

And now is actually double click on these checkbooks here and it takes just they've been here kick boxing.



120

00:06:31,860 --> 00:06:32,330

OK.



121

00:06:32,440 --> 00:06:36,490

And for the idea just typing here checkbox number two.



122

00:06:36,670 --> 00:06:37,240

OK.



123

00:06:37,240 --> 00:06:39,350

And then press on Enter key on your keyboard.



124

00:06:39,430 --> 00:06:42,770

So now let's actually do like another checkbox here.



125

00:06:42,790 --> 00:06:47,310

I just need to select the checkbox and put it inside this linearly Ellsworthy call here.



126

00:06:47,320 --> 00:06:47,970

OK.



127

00:06:48,250 --> 00:06:52,420

And for the layout feet of tools match parent here as you can see.



128

00:06:52,420 --> 00:06:56,490

And here we can actually find that gravity attribute of this checkbox here.



129

00:06:56,500 --> 00:06:58,930

And as you can see this is this is the class with the attributes.



130

00:06:59,050 --> 00:07:02,090

And here I checked the center checkbox.



131

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

As you can see.



132

00:07:02,710 --> 00:07:04,020

Check this checkbox.



133

00:07:04,390 --> 00:07:08,230

And now as you can see the text is at the center of this checkbox.



134

00:07:08,230 --> 00:07:09,340

OK.



135

00:07:09,730 --> 00:07:14,620

Now let's actually track let's actually double click on this checkbox here.



136

00:07:14,870 --> 00:07:17,660

And for the text just say in here to do.



137

00:07:18,040 --> 00:07:18,690

OK.



138

00:07:18,820 --> 00:07:23,760

And of for the idea just typing here checkbox free checkbox number three.



139

00:07:24,190 --> 00:07:30,210

And now let's actually write another checkbox into this linearly out vertical here.



140

00:07:30,280 --> 00:07:31,040

OK.



141

00:07:31,390 --> 00:07:38,870

And for the lay out we just match parent and for the gravity check this center check box here.



142

00:07:39,040 --> 00:07:43,690

Double click on it and for the text just typing here I can do.



143

00:07:44,200 --> 00:07:44,810

OK.



144

00:07:44,950 --> 00:07:45,520

OK.



145

00:07:45,730 --> 00:07:48,840

And for the ID just type in here checkbox number four.



146

00:07:49,110 --> 00:07:49,750

OK.



147

00:07:49,760 --> 00:07:54,830

And now let's actually drag another checkbox into this linearly aesthetical.



148

00:07:54,880 --> 00:08:00,190

So just select this checkbox here and put it inside these linearly out vertical here.



149

00:08:00,220 --> 00:08:00,810

OK.



150

00:08:01,000 --> 00:08:03,250

And lay out we should be matra parent.



151

00:08:03,260 --> 00:08:07,800

So just a click on the spots in here as you can see an ad for the gravity.



152

00:08:07,830 --> 00:08:14,140

Check this center check box here and double click on this checkbox and for the text just type in here



153

00:08:14,140 --> 00:08:20,590

football and the ID just type in here checkbox number five.



154

00:08:20,930 --> 00:08:21,680

OK.



155

00:08:21,970 --> 00:08:28,710

And now let's actually drag another checkbox into this linearly outworker and just put it here.



156

00:08:28,870 --> 00:08:29,520

OK.



157

00:08:29,740 --> 00:08:33,010

And for the layout we choose these match parent here.



158

00:08:33,040 --> 00:08:39,030

As you can see and for the gravity check the centers take a box here and double click on it.



159

00:08:39,280 --> 00:08:42,480

And of for the text just typed in here.



160

00:08:42,580 --> 00:08:44,330

I'll take one though.



161

00:08:45,220 --> 00:08:46,040

OK.



162

00:08:46,870 --> 00:08:50,660

And for the idea just open here checkbox number six.



163

00:08:51,280 --> 00:08:57,010

OK so now let's actually drag another checkbox into this linearly out article here.



164

00:08:57,010 --> 00:08:57,740

OK.



165

00:08:57,790 --> 00:09:00,460

And they lay out with should be a match parent.



166

00:09:00,520 --> 00:09:01,030

OK.



167

00:09:01,300 --> 00:09:06,900

And that gravity should be center as you can see here and double click on it for the text just typing



168

00:09:06,910 --> 00:09:14,570

here wrestling wrestling and for the checkbox ID as you can see assign the value checkbox number 7.



169

00:09:14,680 --> 00:09:15,310

OK.



170

00:09:15,550 --> 00:09:18,340

And then a person enter key on your keyboard.



171

00:09:18,340 --> 00:09:23,330

So now let's actually track another checkbox into this linearly outworker called.



172

00:09:23,500 --> 00:09:25,790

So just select is a checkbox here.



173

00:09:25,840 --> 00:09:26,360

OK.



174

00:09:26,590 --> 00:09:29,460

And put it inside linear linearly alphabetical here.



175

00:09:29,470 --> 00:09:30,040

OK.



176

00:09:30,250 --> 00:09:37,020

And then let's actually make this the layout with this checkbox should be match parent.



177

00:09:37,140 --> 00:09:37,910

OK.



178

00:09:37,960 --> 00:09:44,030

And for the gravity again check center check box here and double click on it for the text just type



179

00:09:44,030 --> 00:09:45,620

in here screaming.



180

00:09:46,300 --> 00:09:46,790

OK.



181

00:09:46,930 --> 00:09:52,800

And the ID assign the value checkbox number 8 and then press on Enter key on your keyboard.



182

00:09:52,810 --> 00:09:53,510

OK.



183

00:09:53,890 --> 00:09:59,220

So now let's actually track our search bar into this it's vertical.



184

00:09:59,220 --> 00:10:02,800

So inside these widgets folder if you have these search bar here.



185

00:10:02,820 --> 00:10:03,360

OK.



186

00:10:03,570 --> 00:10:07,710

So just select it and put it inside these linear layouts vertical.



187

00:10:07,900 --> 00:10:08,620

OK.



188

00:10:08,670 --> 00:10:12,020

And for the layout we assigned a value match appendant.



189

00:10:12,150 --> 00:10:14,930

So just select this button here click on it.



190

00:10:15,180 --> 00:10:19,310

And now as you can see the layout of this sweet spot is much apparent.



191

00:10:19,320 --> 00:10:20,420

OK.



192

00:10:20,670 --> 00:10:23,840

Now let's actually double click on it.



193

00:10:23,850 --> 00:10:27,860

And as you can see here we can actually provide some values for the max to progress.



194

00:10:28,140 --> 00:10:34,330

But for this application we don't want to actually manipulate these these values these attributes.



195

00:10:34,450 --> 00:10:37,350

But as you can see the idea sexy.



196

00:10:37,440 --> 00:10:38,250

OK.



197

00:10:38,380 --> 00:10:40,710

And that's enough for this application.