1

00:00:00,480 --> 00:00:04,700

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



2

00:00:04,830 --> 00:00:10,260

So here we have a taste view and the taste is actually just as Thring resource.



3

00:00:10,440 --> 00:00:16,980

So now as you can see I want to specify the text of the state's view at signs 3 and slash total money



4

00:00:16,980 --> 00:00:17,540

saved.



5

00:00:17,580 --> 00:00:18,090

OK.



6

00:00:18,240 --> 00:00:21,770

So now let's go inside E-Strings that XML file.



7

00:00:21,810 --> 00:00:23,810

And here let's create a string resource.



8

00:00:23,970 --> 00:00:26,180

So just open attack string.



9

00:00:26,940 --> 00:00:28,070

And the name is going to be.



10

00:00:28,080 --> 00:00:30,770

Let's go back to our activity underline minute example.



11

00:00:30,810 --> 00:00:32,980

So the name is total money saved.



12

00:00:33,000 --> 00:00:41,030

So let's go back to our strings that exemplified total money saved.



13

00:00:41,700 --> 00:00:44,070

And then here let's actually close this tag.



14

00:00:44,100 --> 00:00:53,280

So for the value I can just typing in a money saved and then let's go back to our activity underlaid



15

00:00:53,290 --> 00:00:56,370

minute example and here as you can see the error is gone.



16

00:00:56,440 --> 00:01:00,190

And here inside this preview we can see this value money saved.



17

00:01:00,190 --> 00:01:01,040

Right.



18

00:01:01,090 --> 00:01:05,190

So the lay out is that I'm content to lay out how it is.



19

00:01:05,190 --> 00:01:08,340

Again the content and the lay out the road is number eight.



20

00:01:08,500 --> 00:01:14,200

So the last use interface component that I added to discretely out is actually inside the low number



21

00:01:14,200 --> 00:01:14,950

six.



22

00:01:14,950 --> 00:01:18,040

So let's actually change this number eight to number seven.



23

00:01:18,140 --> 00:01:24,340

And now as you can see here the place of this text is actually changed and the layout column is Column



24

00:01:24,340 --> 00:01:25,090

number 0.



25

00:01:25,120 --> 00:01:31,250

So this takes you inside the column number zero of this row row number seven and the layout columns



26

00:01:31,280 --> 00:01:33,630

span column span is number one.



27

00:01:33,910 --> 00:01:37,350

And here as you can see the lay out gravity is right justified.



28

00:01:37,510 --> 00:01:42,060

And here I want to add another value center horizontal.



29

00:01:42,490 --> 00:01:48,640

So here as you can see it is test view is actually centered horizontally inside this cell right inside



30

00:01:48,640 --> 00:01:51,710

this cell number zero inside this column number zero.



31

00:01:52,000 --> 00:01:56,740

And now we were able to actually repasting some more lines of code here and then I can explain to you



32

00:01:56,980 --> 00:01:58,470

what's going on here.



33

00:01:58,630 --> 00:02:03,240

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



34

00:02:03,250 --> 00:02:05,190

Here we have actually a text view.



35

00:02:05,320 --> 00:02:07,940

And these are the attributes of the state's view.



36

00:02:07,960 --> 00:02:13,200

So the text of these takes you is actually empty as you can see he had an empty value and delay out



37

00:02:13,210 --> 00:02:16,030

of it is that content to lay out what the lay out.



38

00:02:16,030 --> 00:02:17,520

Height is the content.



39

00:02:17,530 --> 00:02:21,680

The idea is to the money saved right out.



40

00:02:21,700 --> 00:02:28,530

Gravity is actually the field horizontal so it can actually feel the entire space to lift in that column.



41

00:02:28,710 --> 00:02:35,590

OK in that specific row and as you can see we have this full horizontal the back and out is this color



42

00:02:36,020 --> 00:02:38,710

and color slash color primary.



43

00:02:38,710 --> 00:02:43,960

If we actually did it this value colored primary and if I hold the control here on my keyboard and then



44

00:02:43,960 --> 00:02:48,110

press on space on my keyboard as you can see we have some other colors here.



45

00:02:48,190 --> 00:02:50,740

But I chose this one color primary.



46

00:02:51,010 --> 00:02:55,990

The padding is actually disvalue at St. demon slash takes padding.



47

00:02:56,140 --> 00:03:00,370

So now let's go inside these demons that exemplified here.



48

00:03:00,610 --> 00:03:01,480

As you can see.



49

00:03:01,780 --> 00:03:05,130

And for the padding I actually chose this one for application.



50

00:03:05,160 --> 00:03:10,560

Bill mount Paddington DP so I could use this one EM amount amount padding.



51

00:03:10,690 --> 00:03:15,860

So unless I should go back to an activity underline minute example and here is actually it is value.



52

00:03:16,120 --> 00:03:21,490

And now I just say to hold the control here on my keyboard and that person space key on my keyboard



53

00:03:21,490 --> 00:03:27,390

here in order to see the autocomplete of values in order to see these options that the autocomplete



54

00:03:27,400 --> 00:03:33,930

feature of the suite of the use of the Android studio is allowing me to choose so I choose this one



55

00:03:33,940 --> 00:03:41,830

bill amount of padding and the gravity's centered as you can see here this gravity means the gravity



56

00:03:41,830 --> 00:03:43,940

of the takes inside the state's view.



57

00:03:43,940 --> 00:03:44,440

OK.



58

00:03:44,560 --> 00:03:48,890

So I want to take of this takes you to be centered horizontally and vertically.



59

00:03:49,090 --> 00:03:51,360

And that's the meaning of the center here.



60

00:03:51,760 --> 00:03:59,190

And here we have an elevation at St. slash elevation in order to add some shadowing to this takes view.



61

00:03:59,470 --> 00:04:00,990

The lay out is number eight.



62

00:04:01,030 --> 00:04:07,370

So as you can see here the last use an interface component that I added to this layout to this grid



63

00:04:07,490 --> 00:04:10,470

Gridley out here is actually inside there on number seven.



64

00:04:10,630 --> 00:04:13,450

So here this one is actually inside the room number eight.



65

00:04:13,460 --> 00:04:14,080

All you want.



66

00:04:14,080 --> 00:04:19,200

This takes for you to be inside a room number seven as this takes you is right.



67

00:04:19,210 --> 00:04:23,040

So here I just need to change the layout row to number seven.



68

00:04:23,230 --> 00:04:30,000

As you can see here and the layout column is inside of column number one so here hopefully that makes



69

00:04:30,000 --> 00:04:30,840

sense.



70

00:04:31,230 --> 00:04:37,200

And I think now the design of this of the user interface of our application is actually finished.



71

00:04:37,200 --> 00:04:40,860

So now I want to try to change these colors.



72

00:04:40,860 --> 00:04:43,520

For example it's actually opened the colors that XML.



73

00:04:43,680 --> 00:04:48,570

I want to change the values of this color to primary color primary target or colored axent.



74

00:04:48,630 --> 00:04:51,970

These are the main colors that are in Android studio.



75

00:04:52,200 --> 00:04:53,970

So let's see how we can do that.



76

00:04:53,970 --> 00:04:56,730

So now let's open our project structure.



77

00:04:56,730 --> 00:05:01,880

So just click on this view tool windows and then click on project here.



78

00:05:01,950 --> 00:05:06,960

So as you can see here inside this project structure inside is values folder that is actually inside



79

00:05:06,960 --> 00:05:08,090

the source folder.



80

00:05:08,100 --> 00:05:14,510

Let's actually click on these styles that XML file here and here let me actually make this area Vider



81

00:05:14,520 --> 00:05:18,620

by double clicking on this stylus that example a tab here.



82

00:05:18,810 --> 00:05:22,140

So as you can see here we have some style here right.



83

00:05:22,290 --> 00:05:23,710

Style name at Feme.



84

00:05:23,730 --> 00:05:29,880

So this is the style that our application is actually using Parent Feme that app compact that light



85

00:05:29,930 --> 00:05:31,640

that dot action bar.



86

00:05:31,950 --> 00:05:38,160

And he and as you can see inside this style tag here you can see it says customize your theme here so



87

00:05:38,160 --> 00:05:42,180

we can actually customize the theme of our application.



88

00:05:42,240 --> 00:05:47,160

So here as you can see we have this color primary that actually works to this color called Color primary



89

00:05:47,490 --> 00:05:50,260

colors that exemplified here as you can see.



90

00:05:50,670 --> 00:05:52,980

And here we have this color.



91

00:05:53,200 --> 00:05:55,380

Me actually click on this slide that example.



92

00:05:55,530 --> 00:05:57,680

Here we have this color primary dark.



93

00:05:57,750 --> 00:06:04,170

And again this refers to colored primary dark dark that is actually sight is color the colors for example.



94

00:06:04,200 --> 00:06:07,830

And here we have this colored accent that is really very.



95

00:06:08,010 --> 00:06:13,350

And here we have this color accent that is actually fading to these colored accents that is inside these



96

00:06:13,530 --> 00:06:15,500

colors that exemplify here.



97

00:06:15,510 --> 00:06:16,310

Right.



98

00:06:16,320 --> 00:06:18,770

So let's go back to our stylist that exemplified.



99

00:06:19,060 --> 00:06:23,160

And here at the top as you can see we have this open editor here right.



100

00:06:23,160 --> 00:06:27,440

Just click on it and now we can actually design.



101

00:06:27,480 --> 00:06:31,660

We can actually change or customize the theme of our application.



102

00:06:31,860 --> 00:06:35,150

So for example as you can see it says here it says the seaport.



103

00:06:35,280 --> 00:06:39,950

So here you can see that the color of this sick body is actually this pink color.



104

00:06:40,110 --> 00:06:43,440

And here in the right side pod you can see these colored accent.



105

00:06:43,440 --> 00:06:49,320

So it is actually the color accent or you can see this through each progress bar or laid your button



106

00:06:49,650 --> 00:06:56,190

or checkbox or this horizontal progress but these are actually these components are using this colored



107

00:06:56,190 --> 00:06:57,260

colored accent.



108

00:06:57,480 --> 00:07:00,140

So for example I want to change that color.



109

00:07:00,240 --> 00:07:04,400

So now inside this activity underline minute example.



110

00:07:04,410 --> 00:07:06,640

Let's actually go back to our design tab.



111

00:07:06,990 --> 00:07:13,960

Here you can see that the color of this search but the color of this is actually pink right.



112

00:07:14,280 --> 00:07:18,120

So now let's go back to our editor here.



113

00:07:18,120 --> 00:07:20,740

And let's actually click on these color accent.



114

00:07:20,760 --> 00:07:20,970

Click.



115

00:07:20,970 --> 00:07:23,370

Just click on this peach color here.



116

00:07:24,910 --> 00:07:27,690

And now I can change that color.



117

00:07:27,880 --> 00:07:33,770

So here at the bottom here you can see these colors that are actually inside the right material design.



118

00:07:33,790 --> 00:07:38,010

We can use these colors or any color that I want or can you.



119

00:07:38,060 --> 00:07:45,730

I can actually assign some values here for this day which is actually Alpha which is the Alpha and for



120

00:07:45,730 --> 00:07:46,300

this are.



121

00:07:46,330 --> 00:07:50,330

Which is actually the red g 12 as you can see just these G.



122

00:07:50,440 --> 00:07:56,700

The first two green b blue are G-B Alfar red green blue.



123

00:07:56,700 --> 00:08:04,360

All I can actually change to H S S P or R G B or are there actually other options.



124

00:08:04,360 --> 00:08:10,060

So for now I want you to use these and read material design coloreds because these these are the colors



125

00:08:10,060 --> 00:08:13,480

that are actually standard colors for the application.



126

00:08:13,480 --> 00:08:17,160

So for example I can actually change the color of that.



127

00:08:17,160 --> 00:08:20,520

For example search part 2 for example.



128

00:08:20,530 --> 00:08:22,200

These purple color.



129

00:08:22,360 --> 00:08:23,030

Right.



130

00:08:23,140 --> 00:08:28,230

And if we actually click on OK here now you can see that it's just the color of the sick part is actually



131

00:08:28,230 --> 00:08:32,870

the purple the color of this progress bar switch or radio about it.



132

00:08:33,160 --> 00:08:37,220

And here let's actually open our application here.



133

00:08:37,360 --> 00:08:39,330

You can see that at the bottom here.



134

00:08:39,450 --> 00:08:42,600

You can see that we have this navigation bar right.



135

00:08:42,610 --> 00:08:44,290

You have this navigation bar.



136

00:08:44,500 --> 00:08:47,680

So I can actually change this navigation the color of this navigation bar.



137

00:08:47,830 --> 00:08:49,970

So hit in the right sidebar.



138

00:08:50,110 --> 00:08:54,380

Now I can actually see that it says navigation bar color.



139

00:08:54,510 --> 00:08:55,050

Right.



140

00:08:55,090 --> 00:09:01,000

So if you just click on this color here I can change the color of the navigation bar to another color



141

00:09:01,000 --> 00:09:02,530

for example.



142

00:09:02,530 --> 00:09:05,080

For example I can change it to red.



143

00:09:05,210 --> 00:09:05,750

Right.



144

00:09:05,890 --> 00:09:09,910

And if I click on OK here and it says navigation bar is it.



145

00:09:09,950 --> 00:09:14,110

And here let me actually run my application again here.



146

00:09:14,130 --> 00:09:19,960

As you can see my application is running on this emulator and here at the bottom you can see that I



147

00:09:19,960 --> 00:09:22,820

change the color of this navigation bar.



148

00:09:23,020 --> 00:09:23,450

Right.



149

00:09:23,470 --> 00:09:30,130

The color is now red or here at the top you can see that we have this app bar and this status bar right.



150

00:09:30,130 --> 00:09:34,370

So for example I it I can also change the color of this app.



151

00:09:34,540 --> 00:09:40,480

So here are inside this female editor who you can see here we have this toolbar here and it says at



152

00:09:40,480 --> 00:09:44,050

the bottom left hand corner it says part right.



153

00:09:44,110 --> 00:09:45,770

So hit in the right hand side.



154

00:09:45,910 --> 00:09:51,310

I can actually find the color the color primary and the color primary dark.



155

00:09:51,340 --> 00:09:51,810

Right.



156

00:09:51,850 --> 00:09:57,790

So if we actually show you with this application and this emulator here for this data spot we have this



157

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

color primary arch.



158

00:09:59,740 --> 00:10:02,700

And for the aperture we have this color primary.



159

00:10:02,860 --> 00:10:06,200

So I can actually change two colors right.



160

00:10:06,370 --> 00:10:11,110

So now I just need to click on this for example I want to change the color primary.



161

00:10:11,230 --> 00:10:16,780

Just click on this color here and I can choose one of these and 3:23 or design colors for example I



162

00:10:16,780 --> 00:10:19,570

can change it to this orange color.



163

00:10:19,870 --> 00:10:26,180

And if I click on OK here now as you can see the color of this app but it's actually changed.



164

00:10:26,260 --> 00:10:32,050

And now let's run our project here and let's see what happens then I actually run my application on



165

00:10:32,060 --> 00:10:33,200

these settings.



166

00:10:33,520 --> 00:10:36,960

So here as you can see my application is running on this emulator.



167

00:10:37,210 --> 00:10:42,510

And here I successfully managed to change the color of this app but as you can see here.



168

00:10:42,640 --> 00:10:46,740

So let's actually change the color of the status bar.



169

00:10:46,750 --> 00:10:49,160

So let's go back here to this Feme editor.



170

00:10:49,300 --> 00:10:55,450

And now we can see this color primary Dortch right here as you can see it's a status bar color primary



171

00:10:55,450 --> 00:10:55,970

Dortch.



172

00:10:56,050 --> 00:10:57,710

So I can get you to change this color.



173

00:10:57,910 --> 00:11:01,390

So just click on the color here color primary Dortch.



174

00:11:01,990 --> 00:11:05,060

And now I can I try to choose one of these color here.



175

00:11:05,080 --> 00:11:15,700

For example I can choose a color edge effect or I can choose this orange color let I actually find a



176

00:11:15,750 --> 00:11:19,180

color that is actually best for our application.



177

00:11:19,230 --> 00:11:23,050

So I think this whole red light is actually good.



178

00:11:23,160 --> 00:11:30,070

So I just need to click on OK here and now let's run our project here and let's see what happens.