1

00:00:00,510 --> 00:00:05,510

Hire everyone in this theater you are really going to go ahead and create this application.



2

00:00:05,760 --> 00:00:13,020

So as you can see here we have our tip calculator here and we have also these calculators savings calculator.



3

00:00:13,290 --> 00:00:17,490

So for example I actually assign a number here.



4

00:00:17,810 --> 00:00:23,760

So it's this value here and now for example I assigned the value of five hundred.



5

00:00:24,480 --> 00:00:28,470

And here as you can see here I can actually specify the percent.



6

00:00:28,500 --> 00:00:36,450

So for example 30 percent of this value 500 and the tip is one hundred and fifty fifty dollars.



7

00:00:36,460 --> 00:00:40,380

As you can see here and the total value is $650.



8

00:00:40,380 --> 00:00:40,700

Right.



9

00:00:40,740 --> 00:00:42,430

So this is tip calculator.



10

00:00:42,990 --> 00:00:46,710

And we have also this calculator savings calculator.



11

00:00:46,710 --> 00:00:49,410

So for example I can assign a salary here.



12

00:00:49,410 --> 00:00:52,810

For example I earn $10000 a month.



13

00:00:53,490 --> 00:00:59,850

And then as you can see if we actually disappear this keyboard here the spiritual keyboard now I can



14

00:00:59,850 --> 00:01:06,080

specify how I should keep up the percent that I want to save.



15

00:01:06,090 --> 00:01:11,240

So for example if I want to save 50 percent of my I should be a salary.



16

00:01:11,250 --> 00:01:21,020

So here I can specify that value 50 percent and now here it says saved money is $5000.



17

00:01:21,420 --> 00:01:21,870

OK.



18

00:01:21,960 --> 00:01:24,580

So this is actually a savings calculator.



19

00:01:24,630 --> 00:01:30,900

So in this tutorial we're going to go ahead and create this application and here as you can see we have



20

00:01:31,050 --> 00:01:35,770

some material design work here and here it is our app iPod.



21

00:01:35,820 --> 00:01:42,720

And here it is the status bar here you can see that they actually changed the field of DS actually of



22

00:01:42,720 --> 00:01:44,940

these components inside my screen.



23

00:01:45,210 --> 00:01:47,760

So now let's actually create this application.



24

00:01:47,760 --> 00:01:51,600

First of all of you need to open the Android studio.



25

00:01:51,630 --> 00:01:54,350

So now let's create an android studio project.



26

00:01:54,360 --> 00:01:59,250

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



27

00:01:59,250 --> 00:02:06,060

to step in your app 60 and then you can specify the company domain package name and product location



28

00:02:06,420 --> 00:02:11,990

and then click next and here for the minimum STK choose AP I-24 and rate 7.



29

00:02:12,050 --> 00:02:12,650

No get.



30

00:02:12,840 --> 00:02:13,710

Okay.



31

00:02:13,710 --> 00:02:15,520

And then click on next.



32

00:02:16,260 --> 00:02:20,020

And here you need to choose the empty activity next.



33

00:02:20,490 --> 00:02:26,930

And here you can specify a name for the activity and you can actually specify a name for your layout.



34

00:02:27,240 --> 00:02:29,000

And here you can actually legally can't finish.



35

00:02:29,130 --> 00:02:34,460

So before I actually click on these finished make show to actually that these two checkboxes are actually



36

00:02:34,470 --> 00:02:40,580

checked on generate layout file and backwards compatibility Abercorn Pat and click on finish.



37

00:02:41,010 --> 00:02:45,470

So now it's going to actually create odd Android studio project.



38

00:02:45,540 --> 00:02:47,740

So we need to wait a little bit here.



39

00:02:47,850 --> 00:02:50,990

So as you can see here our project is actually created.



40

00:02:51,090 --> 00:02:54,760

So now let's design the user interface of our application.



41

00:02:54,780 --> 00:02:57,380

So just click double click on this this folder here.



42

00:02:57,570 --> 00:02:59,770

And then double click on this layout folder.



43

00:02:59,880 --> 00:03:00,310

And here.



44

00:03:00,330 --> 00:03:06,780

Double click on this activity underlayment at examen and here as you can see this is the design of our



45

00:03:06,870 --> 00:03:07,840

user interface.



46

00:03:07,980 --> 00:03:14,910

First let's actually delete this hellova word text view here and now let's actually click on this text



47

00:03:14,910 --> 00:03:16,360

tab here at the bottom.



48

00:03:16,410 --> 00:03:20,080

So here here are the actually XML codes.



49

00:03:20,340 --> 00:03:26,820

So now we can actually put the example code here and then we can actually preview to use an interface



50

00:03:26,820 --> 00:03:30,690

here by clicking on this preview here at the right hand side.



51

00:03:30,690 --> 00:03:34,470

So as you can see here we have our relatively out here right.



52

00:03:34,530 --> 00:03:40,620

So now let's actually change this relatively out to linearly out just select is relatively out here



53

00:03:40,830 --> 00:03:47,040

and just type in linear layout and here as you can see we have a linear layout and here as you can see



54

00:03:47,040 --> 00:03:53,460

we have an error and it says no orientation is specified and the default is horizontal.



55

00:03:53,460 --> 00:03:57,770

This is a common source of bugs when children are added dynamically.



56

00:03:57,780 --> 00:04:02,100

So now let's actually add an orientation attribute to this linear layout.



57

00:04:02,160 --> 00:04:07,260

So before the ending tag of this linearly out here I just need to press an energy on my keyboard in



58

00:04:07,260 --> 00:04:08,840

order to create a new line.



59

00:04:09,090 --> 00:04:12,690

And here I just type in orientation vertical.



60

00:04:12,750 --> 00:04:15,630

So here as you can see we can actually choose these options.



61

00:04:15,780 --> 00:04:19,260

But here I want to choose this vertical orientation.



62

00:04:19,260 --> 00:04:23,060

Soon as you can see we have our linearly out vertical here right.



63

00:04:23,130 --> 00:04:29,250

So now let's go inside linearly and here and now I'm going to PCMs some lines of code here and then



64

00:04:29,280 --> 00:04:32,510

I'm going to explain to you what's going on here.



65

00:04:32,790 --> 00:04:36,980

So as you can see here these are the lines of code that are actually pasted here.



66

00:04:37,170 --> 00:04:42,120

So first of all they actually opened a tag and I want to actually create a text view as you can see



67

00:04:42,120 --> 00:04:42,700

here.



68

00:04:42,930 --> 00:04:49,130

So I actually typed in takes view and as you can see here these are the attributes of my text view.



69

00:04:49,200 --> 00:04:53,170

So first of all I need to specify the text of my text view.



70

00:04:53,250 --> 00:04:55,530

So this is teep calculator.



71

00:04:55,530 --> 00:05:02,090

This is the text of my tastes view and the layout of it is match parent as you can see here the layout



72

00:05:02,100 --> 00:05:04,200

height is wrapped content.



73

00:05:04,530 --> 00:05:07,670

The layout gravity is centered horizontal.



74

00:05:07,740 --> 00:05:14,760

The Lay of gravity is is going to actually determine the position of this text view according to its



75

00:05:14,760 --> 00:05:15,660

parent.



76

00:05:15,690 --> 00:05:17,930

So its planet is linearly up right.



77

00:05:17,940 --> 00:05:19,430

So it's going to actually center.



78

00:05:19,560 --> 00:05:27,270

This takes you inside this linearly out as you can see here its gravity center horizontal and padding



79

00:05:27,510 --> 00:05:31,410

for all borders for all directions is 15 deep as you can see here.



80

00:05:31,440 --> 00:05:37,670

We have a padding for the state's view as you can see here and the background is this color Android



81

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

at sign and recall in color home or orange color.



82

00:05:42,060 --> 00:05:47,340

You can actually specify other colors so if they ask you to change this all hollow underline orange



83

00:05:47,340 --> 00:05:53,240

color for example and here you know in order to actually see the options I just need to hold the control



84

00:05:53,240 --> 00:05:57,800

here and then click on and then press on the space key on my keyboard.



85

00:05:58,110 --> 00:06:04,530

And here as you can see these are the colors that I actually can choose for my taste view as you can



86

00:06:04,530 --> 00:06:05,550

see here.



87

00:06:05,550 --> 00:06:10,920

So now I'm going to actually hold the common key or the control key and then click on it and the person



88

00:06:10,920 --> 00:06:13,110

then little Zichy on my keyboard.



89

00:06:13,110 --> 00:06:20,320

So I actually chose this holo color for my taste for the Baggott and of my takes view and the text size



90

00:06:20,350 --> 00:06:21,910

is 20 s.p.



91

00:06:22,000 --> 00:06:28,060

So remember if you want to specify the text size of your user interface components make sure to use



92

00:06:28,150 --> 00:06:29,050

s.p.



93

00:06:29,050 --> 00:06:29,510

This is it.



94

00:06:29,530 --> 00:06:31,290

This is very important.



95

00:06:31,300 --> 00:06:36,980

And here we have a new attribute that you haven't seen so far elevation.



96

00:06:37,270 --> 00:06:39,500

So let's look at our application here.



97

00:06:39,730 --> 00:06:41,960

Inside this emulator.



98

00:06:42,010 --> 00:06:46,600

So as you can see here we have some shadows here for the for this takes real teeth.



99

00:06:46,600 --> 00:06:47,980

This is the calculator.



100

00:06:47,980 --> 00:06:49,520

Here we have some shadow.



101

00:06:49,720 --> 00:06:53,190

And this is because of this attribute elevation.



102

00:06:53,230 --> 00:07:00,310

So now I actually want to create this elevation here at this elevation attribute so we need to actually



103

00:07:00,650 --> 00:07:02,910

assign our an integer value.



104

00:07:03,070 --> 00:07:06,460

But I didn't want to actually hard code this elevation.



105

00:07:06,610 --> 00:07:10,240

So let's actually open our project structure.



106

00:07:10,240 --> 00:07:17,830

So here I just need to click on this view tool windows and then click on project and then here inside



107

00:07:17,830 --> 00:07:19,010

this app folder.



108

00:07:19,270 --> 00:07:23,740

Inside is less folder as you can see we have these values for the right.



109

00:07:23,770 --> 00:07:29,850

So let's go inside these values folder and here as you can see we have some xml files colors that are



110

00:07:29,860 --> 00:07:34,490

similar dimensions that simple strings that examen and these tiles that exhibit.



111

00:07:34,510 --> 00:07:37,770

So here as you can see I actually referred to as sign D-men.



112

00:07:37,780 --> 00:07:43,150

So I actually want to refer to this XML file so if I actually open this folder as I can see we have



113

00:07:43,630 --> 00:07:45,500

some xml files here.



114

00:07:46,030 --> 00:07:48,660

So if you want to choose this one demands that example.



115

00:07:48,790 --> 00:07:49,350

OK.



116

00:07:49,610 --> 00:07:54,590

So DoubleClick and these demons are examined here and here is arguments are exemplified.



117

00:07:54,790 --> 00:07:59,740

And now I can actually for example add some other values here.



118

00:08:00,040 --> 00:08:00,510

OK.



119

00:08:00,610 --> 00:08:05,920

So for example I want to actually assign the value 16 DP issue.



120

00:08:05,980 --> 00:08:08,690

I should not actually hard code that value.



121

00:08:08,800 --> 00:08:14,710

I could create a resource here and then the first with the name of this resource here in order to actually



122

00:08:14,920 --> 00:08:16,260

use this value.



123

00:08:16,270 --> 00:08:21,820

So for example if we actually want to use this elevation here I just need to hold the option key on



124

00:08:21,820 --> 00:08:22,500

my keyboard.



125

00:08:22,540 --> 00:08:27,730

If you are using any of those machine you need to hold the old key on your keyboard and then click on



126

00:08:28,240 --> 00:08:30,110

the person until 3 on my keyboard here.



127

00:08:30,190 --> 00:08:35,380

As you can see and here it says create D-men value resource elevation.



128

00:08:35,860 --> 00:08:39,150

And here I can specify the resource value.



129

00:08:39,340 --> 00:08:46,570

So the resource value is going to be an elevation and the source said it's going to be made and the



130

00:08:46,570 --> 00:08:49,800

file name is actually the demons that exist right.



131

00:08:49,810 --> 00:08:52,140

So here I just need to present or take.



132

00:08:52,270 --> 00:08:55,470

OK and the Stalock as you can see here.



133

00:08:55,840 --> 00:09:01,290

And now let's go inside the statements that they submit here as you can see we have this elevation here



134

00:09:01,300 --> 00:09:02,610

right.



135

00:09:02,650 --> 00:09:04,920

It actually put this elevation attribute here.



136

00:09:04,930 --> 00:09:08,800

So domain name and the name is the name is elevation.



137

00:09:08,950 --> 00:09:09,940

And here is the value.



138

00:09:09,940 --> 00:09:15,220

I don't want this value I want an integer value because I want to specify a shadow for this takes you



139

00:09:15,400 --> 00:09:16,850

right for this takes.



140

00:09:16,870 --> 00:09:23,730

This is the calculator so I need an integer value in order to actually specify a shadow for the states.



141

00:09:23,960 --> 00:09:29,560

So let's go inside these statements that example just delete this elevation here and then assign the



142

00:09:29,560 --> 00:09:29,910

value.



143

00:09:29,920 --> 00:09:31,900

For example 15.



144

00:09:32,530 --> 00:09:38,740

And now let's go inside this activity underlayment and examine and here as you can see it says dimension.



145

00:09:38,860 --> 00:09:40,320

We have our rendering problem here.



146

00:09:40,330 --> 00:09:46,230

As you can see it says dimension 15 in attribute elevation is missing unit.



147

00:09:46,480 --> 00:09:46,990

OK.



148

00:09:47,080 --> 00:09:49,500

So let's go back to immensities and here here.



149

00:09:49,590 --> 00:09:51,300

I need to specify the unit.



150

00:09:51,370 --> 00:09:53,780

The unit is going to be D P.



151

00:09:54,140 --> 00:09:56,010

Ok density pixels.



152

00:09:56,200 --> 00:09:58,750

And if I go back to what activity or delaminate example.



153

00:09:58,840 --> 00:10:03,780

And as you can see here the error is gone and we have a shadow here but we cannot see that here.



154

00:10:03,970 --> 00:10:06,650

And this is a bug in Android studio.



155

00:10:06,880 --> 00:10:11,550

So we need to actually run our project in order to actually see the shadow here.



156

00:10:11,560 --> 00:10:17,240

The shadows actually around these takes you so elevation 15.



157

00:10:17,470 --> 00:10:19,490

And let's actually run our project.



158

00:10:19,540 --> 00:10:22,370

But before that let me talk about this lay out multi-button.



159

00:10:22,420 --> 00:10:28,810

So you actually assigned this margin bottom for this takes you lay out margin but one DP.



160

00:10:29,080 --> 00:10:36,510

This is very important that you need to specify there actually a DPD unit for your values.



161

00:10:36,760 --> 00:10:39,930

So let's run our project now and see what happens.



162

00:10:40,090 --> 00:10:47,250

So make sure to choose next to six or up devise an emulator that actually runs AP I-24 and wait seven.



163

00:10:47,530 --> 00:10:48,430

And then we can.



164

00:10:48,430 --> 00:10:48,950

OK.



165

00:10:48,970 --> 00:10:49,330

Here.