1

00:00:00,450 --> 00:00:02,280

Hello I'm Martez that quote.



2

00:00:02,310 --> 00:00:09,440

And in this literally all we are going to create a specific calculator in Android.



3

00:00:09,450 --> 00:00:17,130

So here because the Course is being updated and we want to add tutorials about Android 8 audio to the



4

00:00:17,140 --> 00:00:23,850

calls this application that you're going to build is going to be compatible with the newest Android



5

00:00:23,850 --> 00:00:26,460

version which is going to be Android 8.



6

00:00:26,730 --> 00:00:34,690

So let's create an android studio project and he had the application name is going to be the calculator.



7

00:00:34,740 --> 00:00:37,650

So the name is going to be the calculator.



8

00:00:37,740 --> 00:00:41,900

And here again is specifically the company domain package name and project location.



9

00:00:41,910 --> 00:00:49,680

So just click on X and here for the minimum STK choose a 16 Android 4.1 million for phone and tablet



10

00:00:50,060 --> 00:00:50,840

next.



11

00:00:50,850 --> 00:00:56,580

So here choose basic Actually you can see this Pluton action button here to this one this template and



12

00:00:56,580 --> 00:00:58,090

then click next.



13

00:00:58,200 --> 00:01:00,050

And here we can specify the activity name.



14

00:01:00,060 --> 00:01:05,100

So the activity name here is going to be main activity and domain activity is going to be the starting



15

00:01:05,100 --> 00:01:08,130

point of our application here.



16

00:01:08,220 --> 00:01:14,770

We can specify the lay out name title and resource names so you're going to learn all about these lay



17

00:01:14,950 --> 00:01:16,740

outs and activities later in this course.



18

00:01:16,860 --> 00:01:21,180

But for now just this let's actually leave them as default and just click on finish.



19

00:01:21,180 --> 00:01:30,740

So here now the project is created and now here you can see this is the layout the main layout actually.



20

00:01:31,140 --> 00:01:38,610

And here on the left hand side you can see the structure of the project the project files and resources.



21

00:01:38,760 --> 00:01:40,240

And here you can see the palette.



22

00:01:40,350 --> 00:01:45,860

So here we can actually add specific components to our layout.



23

00:01:45,930 --> 00:01:48,100

We have actually the properties.



24

00:01:48,120 --> 00:01:55,670

So I'll talk more about this later but for now let me show you the activity underlying minute and here.



25

00:01:55,770 --> 00:01:59,460

So on the left hand side you can see these files here.



26

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

This is actually Android view if it is not Android.



27

00:02:02,370 --> 00:02:07,990

You need to actually change you to Android by clicking on these are these two little triangles here.



28

00:02:08,340 --> 00:02:09,490

And then click on Android.



29

00:02:09,510 --> 00:02:11,440

So here it is the android view.



30

00:02:11,670 --> 00:02:14,140

And if this view is actually collapsed here.



31

00:02:14,160 --> 00:02:19,500

So for example if I click on this if I double click on this content I mean it is in here.



32

00:02:19,530 --> 00:02:24,690

Now you can see that the structure of the project is actually the collapse and you cannot see those



33

00:02:24,690 --> 00:02:26,550

files and resources.



34

00:02:26,550 --> 00:02:32,400

So if it is collapsed you can actually click on this project here this button here on the left hand



35

00:02:32,640 --> 00:02:33,230

side.



36

00:02:33,360 --> 00:02:35,810

It says project in order to expand it.



37

00:02:35,880 --> 00:02:38,120

And now we can see these files here.



38

00:02:38,160 --> 00:02:42,940

So now let's doubleclick on this activity underlayment addicts in here.



39

00:02:43,290 --> 00:02:49,560

So here you can see that we have this lay out in the componentry section of can see that it says we



40

00:02:49,560 --> 00:02:53,270

have a coordinator laid out inside discordantly out.



41

00:02:53,280 --> 00:03:01,010

We have this app Bardoli out so here it is the apple out with the color blue and we have this toolbar



42

00:03:01,040 --> 00:03:04,250

so this toolbar is inside this app out.



43

00:03:04,330 --> 00:03:10,040

We have this include tag that actually contains content underlayment and examen.



44

00:03:10,270 --> 00:03:15,590

So instead this layout folder you can see that we have two files to examine files.



45

00:03:15,610 --> 00:03:18,550

The first one is activity and alignment and example.



46

00:03:18,880 --> 00:03:22,670

And the second file is content underlined minute exam.



47

00:03:23,140 --> 00:03:29,170

This activity and eliminativism it actually includes content underline minute exam and so that's why



48

00:03:29,170 --> 00:03:31,090

you can see these include tag here.



49

00:03:31,090 --> 00:03:39,100

It says include at site layout slash content underline minute example and we have these floating action



50

00:03:39,130 --> 00:03:40,200

button here.



51

00:03:40,240 --> 00:03:42,420

It says fab float in action button.



52

00:03:42,850 --> 00:03:47,190

So you could actually use this button later but let's actually delete it.



53

00:03:47,200 --> 00:03:52,930

We do not need it here in this application so you can just select it and that person delete key on your



54

00:03:52,930 --> 00:03:53,980

keyboard.



55

00:03:53,980 --> 00:03:59,110

So make sure that you are inside this activity underlayment at exam and not just one content on the



56

00:03:59,110 --> 00:04:00,210

line and it is similar.



57

00:04:00,610 --> 00:04:06,250

So now let me show you what that insight is actually beyond the limited example MLV cannot interact



58

00:04:06,250 --> 00:04:08,630

with this hello world text view here.



59

00:04:08,650 --> 00:04:10,500

You can see the hello world takes you right.



60

00:04:10,540 --> 00:04:15,480

It is actually a text view and we cannot we interact with this one because this hello world takes you



61

00:04:15,530 --> 00:04:19,080

is inside this content underlayment that they smell.



62

00:04:19,120 --> 00:04:22,730

So let's switch to content and eliminativism And so inside these.



63

00:04:22,930 --> 00:04:24,870

Here it is view Android view.



64

00:04:24,970 --> 00:04:27,930

You can double click on the content and then I'm in that example.



65

00:04:28,090 --> 00:04:34,480

So let me this tap content and illuminate and in order to make this area wider so I can interact with



66

00:04:34,480 --> 00:04:40,330

this hello world view I can select and then present it here on my keyboard and at the bottom you can



67

00:04:40,330 --> 00:04:41,680

see that we have two taps.



68

00:04:41,710 --> 00:04:46,200

We have the design tap and we have to take step let's switch to text.



69

00:04:46,570 --> 00:04:53,440

And here we have this android that support that constraint that constraint play out as the top play



70

00:04:53,440 --> 00:04:54,440

out.



71

00:04:54,460 --> 00:05:01,570

So because we haven't actually learnt about constantly out so far let's change it to relatively out



72

00:05:01,810 --> 00:05:08,590

to in that little sections of the scores you are going to master constraint lay and but for now I just



73

00:05:08,590 --> 00:05:10,660

want you to use relatively out.



74

00:05:10,750 --> 00:05:16,030

So let's delete this and that supported that constraint that constraint lay out and instead let's just



75

00:05:16,030 --> 00:05:23,250

type in here relatively out and here inside this into ending tapped we have this ability play out.



76

00:05:23,290 --> 00:05:25,440

So here you can see some attributes.



77

00:05:25,450 --> 00:05:32,200

The first one is the Examen namespace which has to be here and we have the XML namespace again for the



78

00:05:32,200 --> 00:05:35,100

app exit and namespace for the tools.



79

00:05:35,290 --> 00:05:37,060

So don't worry about these values.



80

00:05:37,060 --> 00:05:41,900

You don't have to actually deal with these values here but we have these other attributes we have and



81

00:05:41,900 --> 00:05:48,020

throatily out of wheat which is actually match parent what does match parent mean match parents mean.



82

00:05:48,010 --> 00:05:51,320

So here at the right hand side you can see this preview button here.



83

00:05:51,340 --> 00:05:58,580

If I click on it you can see this preview of our layout which is now relatively out.



84

00:05:58,630 --> 00:06:04,320

So what it is layout they activate determines the Viets of the layout which is now relatively out.



85

00:06:04,630 --> 00:06:05,400

So all you want.



86

00:06:05,410 --> 00:06:06,490

They're relatively out here.



87

00:06:06,490 --> 00:06:11,550

David of this relatively lay out to take the entire width of the screen.



88

00:06:11,860 --> 00:06:19,390

So for that we use match parent and I also want this relatively out to take the entire height of the



89

00:06:19,390 --> 00:06:20,110

screen.



90

00:06:20,200 --> 00:06:23,940

So while you screen I mean the screen of the user's device.



91

00:06:23,950 --> 00:06:24,450

OK.



92

00:06:24,580 --> 00:06:27,550

So the right match parent.



93

00:06:27,600 --> 00:06:34,320

And here we have the lay out behavior so thoughtfully about this behavior for now.



94

00:06:34,440 --> 00:06:40,530

And we have this one the context again the context is come that example that Martez I saw that the PC



95

00:06:40,530 --> 00:06:46,740

calculator that main activity for you this value may be actually different because you are using a different



96

00:06:46,740 --> 00:06:50,370

package or maybe a different project name.



97

00:06:50,550 --> 00:06:58,500

But here you can see that we have this main activity we have an activity that controls this layout so



98

00:06:58,560 --> 00:07:01,480

this main activity that robot actually controls this layout.



99

00:07:01,500 --> 00:07:04,680

So that's why you can see that it is actually the main activity here.



100

00:07:04,680 --> 00:07:12,830

So the context is this one and here it says tools show in activity underline main.



101

00:07:12,860 --> 00:07:20,660

So this says that we are actually using this layout in insight and order activity which is actually



102

00:07:20,660 --> 00:07:22,330

the activity on eliminativism.



103

00:07:22,340 --> 00:07:28,870

So remember that I told you that activity under limited example actually includes this content underlayment



104

00:07:28,880 --> 00:07:29,770

and examined.



105

00:07:30,050 --> 00:07:31,840

So don't worry about these attributes.



106

00:07:31,850 --> 00:07:35,310

I just wanted to introduce you to some example codes here.



107

00:07:35,560 --> 00:07:37,810

Let's switch to the design tab.



108

00:07:37,870 --> 00:07:43,010

Now with this design tap we can design our layout.



109

00:07:43,010 --> 00:07:46,910

So if you want to create our calculator application right.



110

00:07:46,910 --> 00:07:53,460

So for that first of all we can say that we need to have a text view.



111

00:07:53,690 --> 00:08:00,770

So let's track this takes a view and let's put it here at the top and at the center of this relatively



112

00:08:00,770 --> 00:08:04,160

out and let's selected.



113

00:08:04,160 --> 00:08:09,200

So if you select this takes you on the right hand side you can see these properties section.



114

00:08:09,330 --> 00:08:13,610

We have the ID lay out with the height you can see these attributes right.



115

00:08:13,670 --> 00:08:18,980

We have the text of the text view the content description the visibility.



116

00:08:19,250 --> 00:08:22,810

So for now let's change the text of this text.



117

00:08:22,820 --> 00:08:29,420

Let's say that here I want to show the user the name of the application the name of the application



118

00:08:29,450 --> 00:08:31,190

is Peke calculator



119

00:08:33,680 --> 00:08:34,460

right.



120

00:08:34,550 --> 00:08:36,730

And in person on your keyboard.



121

00:08:36,950 --> 00:08:40,650

So the size is actually not the one that I want.



122

00:08:40,850 --> 00:08:45,550

So let's increase the size increase the size of the font of this text view.



123

00:08:45,950 --> 00:08:51,650

So inside this property section we don't have an attribute that actually allows us to change the size



124

00:08:51,650 --> 00:08:56,900

of this text view at the bottom you can see that it says View all properties.



125

00:08:56,900 --> 00:08:57,950

Let's click on it.



126

00:08:58,010 --> 00:09:03,800

Now we can see all the properties that is actually that are related to these ticks view because we selected



127

00:09:03,800 --> 00:09:04,710

the this view.



128

00:09:04,730 --> 00:09:11,720

For example if we actually select click on somber empty inside this out here we are actually selecting



129

00:09:11,720 --> 00:09:17,960

this relatively out and the properties here are context sensitive.



130

00:09:17,960 --> 00:09:19,060

What does that mean.



131

00:09:19,100 --> 00:09:23,350

That means that because now they're relatively out inside this componentry section you can see that



132

00:09:23,590 --> 00:09:29,720

they're relatively or is selected because now the relative value of these selected the properties that



133

00:09:29,750 --> 00:09:35,840

are shown here are actually related to this relatively out not this takes view.



134

00:09:35,870 --> 00:09:41,880

So in order to see the properties that are related to this text view we need to select the state's view



135

00:09:42,740 --> 00:09:46,310

and now we can see the properties that are related to this text view.



136

00:09:46,730 --> 00:09:50,580

So now I want to actually increase that text size of the state's view.



137

00:09:50,600 --> 00:09:56,930

So we have a property for that in order to search for a property inside this property section.



138

00:09:56,930 --> 00:09:59,580

You just need to select one of these properties.



139

00:09:59,780 --> 00:10:04,160

And now I can search for a specific property by just typing on my keyboard.



140

00:10:04,190 --> 00:10:09,030

I can see text just typing here text size.



141

00:10:09,230 --> 00:10:12,700

Now you can see some properties with the name takes place here.



142

00:10:12,820 --> 00:10:17,600

So let's scroll down here in order to find the text size attribute this one.



143

00:10:17,650 --> 00:10:23,380

Now here inside is actually it is empty text view here.



144

00:10:23,440 --> 00:10:24,620

I can enter a value right.



145

00:10:24,640 --> 00:10:27,710

This text actually or text field.



146

00:10:28,000 --> 00:10:34,450

I can enter a value so I can say for example I want the text size of this takes you to be for example



147

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

40 added percent on your key.



148

00:10:37,500 --> 00:10:38,920

Right.



149

00:10:39,010 --> 00:10:45,310

Or for example I can change the text color of the states so have it perfectly for that.



150

00:10:45,310 --> 00:10:46,490

This one takes color.



151

00:10:46,900 --> 00:10:53,190

And here if I click on this ellipse this spot in here now is going actually to show us this window.



152

00:10:53,230 --> 00:10:58,320

And here I just need to click on this colored tab and I can select one of these colors.



153

00:10:58,330 --> 00:11:03,010

I can't say for example holer aren't liked and then press an entry on your keyboard.



154

00:11:03,100 --> 00:11:03,810

Right.



155

00:11:03,880 --> 00:11:10,180

And here I can also change the background color of this takes few sort of this text view and let's search



156

00:11:10,420 --> 00:11:12,870

for the background attributes.



157

00:11:13,210 --> 00:11:15,760

So here I can find this by going an attribute.



158

00:11:15,790 --> 00:11:19,590

And here let's click on this ellipsis button color.



159

00:11:19,690 --> 00:11:24,420

Let's say that the background attribute given color of this text is going to be black and then click



160

00:11:24,420 --> 00:11:25,520

on OK.



161

00:11:25,720 --> 00:11:28,110

So now you can see this takes you here.



162

00:11:28,120 --> 00:11:28,850

Right.



163

00:11:28,900 --> 00:11:35,610

So now I want to add another takes view into our lay out.



164

00:11:35,620 --> 00:11:42,670

So inside this palette section just click on all and then select the takes view and here let's put it



165

00:11:42,820 --> 00:11:43,530

here.



166

00:11:44,720 --> 00:11:46,850

Take a few select few.



167

00:11:46,870 --> 00:11:49,830

Now I want to change the text of the state's view.



168

00:11:50,120 --> 00:11:57,820

So here I can select one of these attributes and I just I can just search for ticks attributes.



169

00:11:58,150 --> 00:12:12,050

And now I can say for example enter person's interpretation dot dot dot or not don't put dot dot dot



170

00:12:12,050 --> 00:12:15,780

here because this is just a text you just type in here.



171

00:12:15,790 --> 00:12:19,580

Enter percent call in and then press on until key on your keyboard.



172

00:12:20,060 --> 00:12:24,540

So now let's change the place of this text view.



173

00:12:24,560 --> 00:12:26,660

So here it is our text.



174

00:12:26,810 --> 00:12:30,100

So now let's change the text size of the states.



175

00:12:30,110 --> 00:12:35,630

So again let's search for the text size attribute select the states and it says for the text as attribute



176

00:12:36,080 --> 00:12:36,970

and here.



177

00:12:37,400 --> 00:12:42,850

Here it is the text size so let's change the text size of this takes to train.



178

00:12:42,920 --> 00:12:49,910

And now I can actually it puts and takes here beside this takes you.



179

00:12:50,000 --> 00:12:57,560

So what is that editors and it is actually a text field that actually allows us to enter a value.



180

00:12:57,620 --> 00:13:05,390

So here inside this padded section let's select this text here and let's drag this plain text and put



181

00:13:05,390 --> 00:13:09,380

it here beside this and it takes the text view.



182

00:13:09,380 --> 00:13:18,280

So let's change the place of this and it takes.



183

00:13:18,290 --> 00:13:25,530

So now let's selective editing Axt and here let's find the text attribute of these.



184

00:13:25,550 --> 00:13:29,610

And let's delete this name value and then press on your keyboard.



185

00:13:30,020 --> 00:13:37,130

Now we can add a hint hint is actually a text that is inside these editors and they and the moment that



186

00:13:37,130 --> 00:13:43,390

the user starts typing on these editors and that the moment the user starts entering a value that he



187

00:13:43,490 --> 00:13:45,560

is going to be disappeared.



188

00:13:45,560 --> 00:13:48,400

So let's find the hint attributes.



189

00:13:48,440 --> 00:13:51,940

So now let's find it.



190

00:13:51,970 --> 00:13:53,980

So here it is the hint attributes.



191

00:13:54,160 --> 00:14:02,740

And here we can enter a part because we have a text view that shows the user what value should be entered



192

00:14:02,740 --> 00:14:04,090

inside is it.



193

00:14:04,150 --> 00:14:10,380

We do not have to do that actually it's better to not to use a hint here because we are using a text



194

00:14:10,390 --> 00:14:13,240

view according to the design rules.



195

00:14:13,240 --> 00:14:19,570

It's better not to use it but for educational purposes I want to show you what is this means.



196

00:14:19,630 --> 00:14:26,680

So let's selective editing in order to see the properties of these critics here and let's search for



197

00:14:26,680 --> 00:14:28,320

the hints attributes again.



198

00:14:30,970 --> 00:14:37,820

So here it is the hand attribute and just typing here enter person's dot dot dot and then present until



199

00:14:37,820 --> 00:14:38,450

January.



200

00:14:38,450 --> 00:14:41,890

So now you can see this here and here this value.



201

00:14:42,050 --> 00:14:44,220

So we need another view.



202

00:14:44,360 --> 00:14:50,210

So inside this pallet section click on all and then select the states and just drag it here and put



203

00:14:50,210 --> 00:14:53,800

it below these enter actually enter.



204

00:14:53,810 --> 00:14:57,340

Percent text view.



205

00:14:57,600 --> 00:15:00,820

Now let's change the text of the state's view.



206

00:15:00,990 --> 00:15:07,300

So just they've been here ticks in order to find the text attributes and for the text value just type



207

00:15:07,300 --> 00:15:08,450

in here.



208

00:15:08,630 --> 00:15:16,960

Enter your number and tell me your number call in and then press an you on your keyboard.



209

00:15:17,010 --> 00:15:26,110

So let's change the text size of these and tell you a number of takes you text size.



210

00:15:26,550 --> 00:15:30,380

So the size is going to be 20 and then press it if your keyboard.



211

00:15:30,390 --> 00:15:37,240

So here let's try and every text here into our layout.



212

00:15:37,240 --> 00:15:44,320

So inside this pallet section just click and text and then drag this plain text here and put it beside



213

00:15:44,320 --> 00:15:47,130

this and it takes you here.



214

00:15:47,230 --> 00:15:50,850

Let's decrease the veto of this editrix.



215

00:15:50,950 --> 00:15:56,950

You can actually select this handler and just decrease the reach of this text.



216

00:15:58,830 --> 00:16:00,310

You can also select is editing.



217

00:16:00,370 --> 00:16:05,220

And then here is served in inside this property section you can see the lay out of.



218

00:16:05,590 --> 00:16:10,160

So we can say that the lay out with is for example 50 and the person interchangeable.



219

00:16:10,270 --> 00:16:13,900

You can see now the width of this it it takes is actually changed.



220

00:16:14,080 --> 00:16:15,660

Let's change it to 50.



221

00:16:17,330 --> 00:16:22,700

Or we can say for example 100 or maybe 200.



222

00:16:22,840 --> 00:16:24,220

So let's change it to.



223

00:16:24,250 --> 00:16:29,910

For example one hundred and eighty.



224

00:16:29,960 --> 00:16:31,850

So let's put it here.



225

00:16:34,790 --> 00:16:35,610

So here it is.



226

00:16:35,670 --> 00:16:43,880

It takes and it's selected and let's find it takes attributes soulless for search for the text attributes.



227

00:16:44,130 --> 00:16:47,430

And here let's delete this name value and unprecedented.



228

00:16:47,440 --> 00:16:48,510

Here you are.



229

00:16:48,710 --> 00:16:53,180

So let's give our hints to this editor X and for the hint just step in here.



230

00:16:53,180 --> 00:17:00,680

Enter number dot dot dot and then present until your keyboard.



231

00:17:00,940 --> 00:17:08,530

So now in order to learn the application in order to see how our layout is actually designed we can



232

00:17:08,530 --> 00:17:12,550

actually click on this play button here at the top.



233

00:17:12,840 --> 00:17:15,340

And now we can see that this device is here.



234

00:17:15,570 --> 00:17:21,170

You can only see a device here if you have already created an emulator.



235

00:17:21,240 --> 00:17:26,010

If you don't have any devices if you don't have already created an emulator you need to create a new



236

00:17:26,010 --> 00:17:26,730

one.



237

00:17:26,730 --> 00:17:32,310

You can see the spots in here it says create new virtual device and it's always with which to choose



238

00:17:32,310 --> 00:17:34,830

next was 5 or was 5 x.



239

00:17:34,860 --> 00:17:37,300

I prefer to choose next was 5 x.



240

00:17:37,530 --> 00:17:39,770

And then you just had to click next.



241

00:17:39,810 --> 00:17:48,660

And here you need to choose AP level 26 because you are targeting the newest version of Android API



242

00:17:48,840 --> 00:17:50,420

Android 8 Android Oreo.



243

00:17:50,610 --> 00:17:57,540

If you don't see this API level this means that you have not still actually downloaded that latest API



244

00:17:57,540 --> 00:17:58,250

version.



245

00:17:58,260 --> 00:18:06,360

So let me click on cancel and here let me show you how we can download the newest Android the S.K. newest



246

00:18:06,360 --> 00:18:07,870

Android API version actually.



247

00:18:07,890 --> 00:18:13,890

So at the top here if you are using a Mac you just need to click on these Android studio and then click



248

00:18:13,890 --> 00:18:15,250

on preferences.



249

00:18:15,480 --> 00:18:21,000

And if you're using a Windows machine and just click on this file here at the top and then click on



250

00:18:21,700 --> 00:18:24,310

actually settings or preferences.



251

00:18:24,330 --> 00:18:27,310

So let's get an android that you add American preferences.



252

00:18:28,380 --> 00:18:33,420

So here you can see that I have already opened this room.



253

00:18:33,480 --> 00:18:39,930

So you just need to open these Android appearance and behavior OK.



254

00:18:40,020 --> 00:18:46,460

And if you open it you can actually see that we have the system settings up open the system settings.



255

00:18:46,620 --> 00:18:47,600

And here we have this.



256

00:18:47,640 --> 00:18:49,240

And it is the case.



257

00:18:49,530 --> 00:18:50,990

So we have free taps.



258

00:18:51,030 --> 00:18:55,440

STK platforms is the Katulis is the key update sites.



259

00:18:55,440 --> 00:19:03,190

So click on this STK platforms here at the bottom you can see this option it's a show package details.



260

00:19:03,210 --> 00:19:09,030

Let's check this check box here so you can see that I have actually downloaded the Android eight point



261

00:19:09,040 --> 00:19:10,110

zero Android.



262

00:19:10,140 --> 00:19:10,910

Oh.



263

00:19:11,430 --> 00:19:14,320

So you need to download all of these packages.



264

00:19:14,460 --> 00:19:21,930

So just check this checkbox and then click on apply and then you just need to actually let me show you



265

00:19:21,930 --> 00:19:26,960

how we can download it so you can see that I actually downloaded Android 8 and Android seven point one



266

00:19:26,960 --> 00:19:28,220

point I why not get right.



267

00:19:28,320 --> 00:19:34,080

And all of these packages but assume that you want to download Android 5.1 right here.



268

00:19:34,080 --> 00:19:38,460

I just think you can you can apply and it has the following components will be installed.



269

00:19:38,460 --> 00:19:44,060

I just need to click on OK and it's going to start actually installing all of these packages for me.



270

00:19:44,060 --> 00:19:47,210

So because I don't want to use them I'm just going to go on.



271

00:19:47,730 --> 00:19:49,940

And here literally STK tools.



272

00:19:50,310 --> 00:19:54,840

So make sure that you download this one support repository.



273

00:19:54,840 --> 00:19:56,390

This is very important.



274

00:19:56,430 --> 00:19:58,830

All of these packages should be installed.



275

00:19:58,830 --> 00:20:02,520

Make sure to download and install these hacks and installer.



276

00:20:02,520 --> 00:20:09,990

If you have a system that uses Intel C.P. you and here you can see that Android is the key.



277

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

Build tools.



278

00:20:10,970 --> 00:20:17,240

Android emulator and with STK platform tools and SDK tools Andray support library.



279

00:20:17,270 --> 00:20:22,430

Make sure that these packages are installed and make sure to update them updates that if you haven't



280

00:20:22,460 --> 00:20:23,160

already.



281

00:20:23,390 --> 00:20:29,660

So this is very important that you update all of these packages to the newest version because always



282

00:20:29,840 --> 00:20:35,810

it's very important that you have the latest version of these packages so that you will not counter



283

00:20:35,810 --> 00:20:36,590

any act.



284

00:20:36,650 --> 00:20:39,420

You will not encounter any problems in the future.



285

00:20:39,950 --> 00:20:41,330

So that's it.



286

00:20:41,720 --> 00:20:43,840

And here just click on OK.



287

00:20:44,330 --> 00:20:50,090

So now let me actually show you how you can create an emulator so create your virtual device.



288

00:20:50,140 --> 00:20:51,950

Next was flybacks next.



289

00:20:51,950 --> 00:20:58,140

So because I have already downloaded and installed this API level 26 I have android all here.



290

00:20:58,270 --> 00:21:03,680

Just click on next and here this is going to be the name if you want to you can change the name of the



291

00:21:03,680 --> 00:21:05,340

Android device.



292

00:21:05,660 --> 00:21:11,840

And here you can say that this startup orientation is portrait or landscape so I choose portrait and



293

00:21:11,840 --> 00:21:17,480

here click on a show advanced settings so you can see that it says camera up front to back emulator



294

00:21:17,600 --> 00:21:18,510

speed fool.



295

00:21:18,690 --> 00:21:23,320

Latency nonne and ram of a VM heap.



296

00:21:23,360 --> 00:21:24,890

Internal storage.



297

00:21:24,890 --> 00:21:28,000

All of these values are set for us automatically.



298

00:21:28,040 --> 00:21:34,810

We don't have to worry about these values and we can finish so here because I have already created one.



299

00:21:34,820 --> 00:21:36,650

I don't have to create a new one.



300

00:21:36,650 --> 00:21:39,140

I just need to select this one and then click on OK.



301

00:21:39,620 --> 00:21:46,280

So now it's going to actually run this application on my virtual device but we have a problem.



302

00:21:46,350 --> 00:21:52,690

So at the moment that I actually started to run the application it actually shows an error.



303

00:21:52,690 --> 00:21:56,750

It says error cannot find symbol variable fat floating action button.



304

00:21:56,780 --> 00:22:01,160

So remember Eliel in this tutorial in say the activity underlying Medhat example.



305

00:22:01,160 --> 00:22:07,280

Here we actually deleted the floating action button but here in say this main activity that java file



306

00:22:07,730 --> 00:22:14,570

we have some codes that are related to the floating action button and if there is no floating action



307

00:22:14,570 --> 00:22:19,340

button inside the activity delimited example there is going to be a problem because these codes are



308

00:22:19,340 --> 00:22:21,670

related to that specific component.



309

00:22:21,910 --> 00:22:27,520

And if you delete that floating action button inside your layout you also have to delete that.



310

00:22:27,580 --> 00:22:32,970

The codes that are related to that float in action with an inside the main activity Java.



311

00:22:33,050 --> 00:22:34,920

So these are the job code right.



312

00:22:34,940 --> 00:22:37,730

So here inside the main activity that Java over here.



313

00:22:37,790 --> 00:22:42,830

If you cannot see if you cannot find them Inuktitut main activity that Java used to open the Android



314

00:22:42,830 --> 00:22:49,010

view you can find the main activity that Java inside this job folder and inside this package the first



315

00:22:49,010 --> 00:22:50,880

package main activity that job.



316

00:22:51,410 --> 00:22:56,990

And here inside is an create method which can highlight all of these codes.



317

00:22:56,990 --> 00:23:01,520

This piece of code here is block of code that is related to the floating action button and then just



318

00:23:01,520 --> 00:23:03,460

press and delete key on your keyboard.



319

00:23:03,770 --> 00:23:06,610

Now you can run the app without any problems.



320

00:23:06,620 --> 00:23:08,560

Just select the emulator if you want.



321

00:23:08,560 --> 00:23:13,730

You can check this checkbox that says Use same selection for future launches so you don't have to see



322

00:23:13,730 --> 00:23:18,490

this event to window any time that you want to run your application.



323

00:23:18,530 --> 00:23:22,730

Just click on OK so let me show you the emulator.



324

00:23:22,870 --> 00:23:24,320

That is our emulator.



325

00:23:24,450 --> 00:23:29,200

You can see the name of the app enter percent until your number right.



326

00:23:29,340 --> 00:23:30,570

So that's it this is the design.



327

00:23:30,570 --> 00:23:32,250

Let's go back to android studio.



328

00:23:32,280 --> 00:23:34,790

Let's go back to content on the limited example here.



329

00:23:34,800 --> 00:23:36,480

Let's switch tab and the school.



330

00:23:36,510 --> 00:23:37,930

Inside this file.



331

00:23:38,400 --> 00:23:43,930

And here I want to add actually a button right.



332

00:23:43,950 --> 00:23:50,890

So here inside this politician just click and all and just select the spot in and here just put it at



333

00:23:50,890 --> 00:23:56,490

the center of this play out if you want to you can put it anywhere you want but I prefer to put these



334

00:23:56,530 --> 00:24:00,000

inside at the center of this out a spot in.



335

00:24:00,010 --> 00:24:02,820

So now let's change the text of this button.



336

00:24:02,950 --> 00:24:04,930

So select one of these attributes.



337

00:24:04,930 --> 00:24:09,270

Here inside this property section and just search for ticks.



338

00:24:09,370 --> 00:24:12,620

So you can see this takes attribute and for the texture save in here.



339

00:24:12,790 --> 00:24:22,180

Calculate dirties thought and then press enter on your keyboard.



340

00:24:22,210 --> 00:24:25,080

So let's also change the Paglen code.



341

00:24:25,090 --> 00:24:31,700

I don't like to back in on color of this pattern so here let's search for the background attributes



342

00:24:32,380 --> 00:24:35,340

and let's look at this ellipse spot and color.



343

00:24:35,350 --> 00:24:39,200

So for the background let's choose this one.



344

00:24:39,220 --> 00:24:48,250

This whole purple click on OK and let's change the text color of the spot in the search for the text



345

00:24:48,250 --> 00:24:51,100

color attributes.



346

00:24:51,130 --> 00:24:58,850

And here click on this ellipse spot in color and let's click on this holo blue bright blue green OK.



347

00:25:00,330 --> 00:25:02,260

Just the fancy color.



348

00:25:02,370 --> 00:25:03,210

So I like it.



349

00:25:03,400 --> 00:25:03,990

OK.



350

00:25:04,170 --> 00:25:11,520

I know I can actually I tried text view in order to show the results to the user.



351

00:25:11,940 --> 00:25:18,780

So here inside this palette section click on select this takes you and just put it here below this button.



352

00:25:19,020 --> 00:25:25,210

And now I want to change the layout of this button to match parent.



353

00:25:25,260 --> 00:25:32,850

So select this text view and for the layout here you can see this attribute Helier and click on this



354

00:25:32,850 --> 00:25:35,460

little triangle in order to see the other options.



355

00:25:35,460 --> 00:25:37,240

Match parent.



356

00:25:37,350 --> 00:25:43,960

So I don't like the fact that this text here in the sticks is at the left hand side of the stage.



357

00:25:43,980 --> 00:25:48,600

I want this takes to be on the center at the center of the state's view.



358

00:25:48,600 --> 00:25:54,550

So it's like this takes you inside this property section just search for gravity attributes.



359

00:25:55,020 --> 00:25:56,640

So here it is the gravity attribute.



360

00:25:56,640 --> 00:26:01,440

Open it and just select the search box that is that says Center.



361

00:26:01,470 --> 00:26:04,660

So now the text is at the center of the view.



362

00:26:04,740 --> 00:26:11,520

So what is gravity attribute to gravity attribute determines the place the position of the children



363

00:26:11,580 --> 00:26:13,070

of is specifically out.



364

00:26:13,080 --> 00:26:15,910

So we have it takes the test very easily out right.



365

00:26:16,230 --> 00:26:22,490

And I want to change the tide which is going to be the text inside it takes you right the Chinese text.



366

00:26:22,530 --> 00:26:25,920

I want to change the position of this child which is the text.



367

00:26:26,070 --> 00:26:32,820

So I choose the gravity attribute that gravity determines the place or the position of the child of



368

00:26:32,820 --> 00:26:34,750

a lay out.



369

00:26:34,780 --> 00:26:41,170

So here it is our gravity and we also have to lay out gravity that determines the position of the layout



370

00:26:41,240 --> 00:26:43,160

itself inside the parent.



371

00:26:43,240 --> 00:26:48,350

So I'll talk more about these attributes than gravity lay out gravity later in this course you are going



372

00:26:48,350 --> 00:26:55,000

to master them but for now I just wanted to introduce you to the gravity attributes so I don't like



373

00:26:55,300 --> 00:27:02,010

the text size of the state's views so let's change this search for the text size attributes.



374

00:27:03,650 --> 00:27:10,310

And here let's change the text size to 50 and then present intercranial keyboard and let's change the



375

00:27:10,310 --> 00:27:14,780

text of this takes view here.



376

00:27:14,780 --> 00:27:18,750

So let's search for the text attribute here it is the text.



377

00:27:19,040 --> 00:27:26,960

And I can say resorte So here it is the result and then precedented on your keyboard and let's change



378

00:27:26,960 --> 00:27:29,130

the background color of this text view.



379

00:27:31,010 --> 00:27:34,230

And here click on this ellipse the spot in color.



380

00:27:34,550 --> 00:27:42,840

So here we can actually search for the new color so I think this one is cool.



381

00:27:42,920 --> 00:27:44,660

Was this wonderfully kind of OK.



382

00:27:45,220 --> 00:27:52,710

And let's change the text color of the stakes you so takes the color and the text color is going to



383

00:27:52,710 --> 00:28:00,940

be white so choose this font and then present it to you put.



384

00:28:01,190 --> 00:28:02,950

So now let's run the app.



385

00:28:02,950 --> 00:28:05,020

Let me show you the emulator.



386

00:28:05,020 --> 00:28:06,370

So here it is our design.



387

00:28:06,370 --> 00:28:10,240

But I also don't like the color of this toolbar.



388

00:28:10,240 --> 00:28:11,340

Here at the top.



389

00:28:11,440 --> 00:28:16,360

So in order to change the color of this toolbar we need to go inside this activity on the last minute



390

00:28:16,390 --> 00:28:17,730

examine here.



391

00:28:17,740 --> 00:28:22,300

So you see the activity and alignment and examine and select this toolbar.



392

00:28:22,300 --> 00:28:27,100

So in order to change the background color of the toolbar we need to select this Amberly out because



393

00:28:27,100 --> 00:28:31,780

these are probably out is there actually lay out that contains this toolbar.



394

00:28:31,960 --> 00:28:33,480

So select is actually out.



395

00:28:33,760 --> 00:28:40,590

And here let's click on this view all properties and let's search for the background attribute.



396

00:28:40,630 --> 00:28:46,930

So here let's change the Paglen color to black and then click on.



397

00:28:48,170 --> 00:28:52,640

So let's also change the background color of these toolbars to select this toolbar.



398

00:28:52,690 --> 00:29:00,600

And here let's say for the bike can attribute and click on this black color.



399

00:29:00,590 --> 00:29:04,250

Here let's scroll to the top black and then click OK.



400

00:29:04,560 --> 00:29:10,770

So now you can see that the background color of this toolbar here is actually changed to black.



401

00:29:10,770 --> 00:29:17,480

So we also have to change the background color of this apple out and up I get all of these toolbar.



402

00:29:17,520 --> 00:29:21,000

So now let's run the application.



403

00:29:21,000 --> 00:29:22,410

Let me show you the emulator



404

00:29:25,410 --> 00:29:29,360

and now you can see that the Paglen color of this toolbar is changed.



405

00:29:29,670 --> 00:29:31,570

And here it is the name of the application.



406

00:29:31,800 --> 00:29:33,730

So here it is the design.



407

00:29:33,730 --> 00:29:38,630

It is actually going to continue building this application and I am going to show you how we can connect



408

00:29:38,640 --> 00:29:41,920

the code to our views inside our layout.



409

00:29:42,180 --> 00:29:45,810

Thank you very much for watching and I'll see you in the next tutorial.