1

00:00:00,180 --> 00:00:01,960

Hello this is Martez or Corti.



2

00:00:01,980 --> 00:00:07,720

Make sure to open this site that exam a fine and the colors are exemplified inside inside a values folder.



3

00:00:08,130 --> 00:00:10,130

So let's open this sidetracks that file.



4

00:00:10,140 --> 00:00:12,190

Here we have the theme.



5

00:00:12,540 --> 00:00:19,210

The theme is the name is Alphyn and the parent is Feme that app compact So what is this app compact.



6

00:00:19,230 --> 00:00:26,280

This app compact is going to specify that our application is going to be compatible with a lot of versions



7

00:00:26,310 --> 00:00:27,870

of Android operating system.



8

00:00:27,900 --> 00:00:34,410

Because the longer versions of app and with the operating system may cannot actually handle material



9

00:00:34,410 --> 00:00:36,590

design right.



10

00:00:36,630 --> 00:00:44,070

So if we use this Campana this app that accompted Ingall in order to specify that so that this app compatibility



11

00:00:44,280 --> 00:00:50,160

is going to Solvay handle the lower versions of Android operating system maybe we want an app to be



12

00:00:51,090 --> 00:00:55,520

actually compatible with those versions of our operating system.



13

00:00:55,710 --> 00:01:03,090

But if you remember we said that we want the lowest version the minimum STK of our application to be



14

00:01:03,090 --> 00:01:04,390

Android lollipop.



15

00:01:04,680 --> 00:01:12,060

So this means that we don't have to use this app compact here because the and a lollipop can handle



16

00:01:12,060 --> 00:01:13,800

handle material design.



17

00:01:14,130 --> 00:01:22,530

So we can for this film here we can just change this when we can say for the parent listed its value



18

00:01:22,800 --> 00:01:31,540

and we can say that because we want to use material design here at sign Android Colin.



19

00:01:31,670 --> 00:01:36,190

Hi slash.



20

00:01:39,910 --> 00:01:50,430

Dot and here I we to see material dots so we can specify some other attributes so let's say no action



21

00:01:50,430 --> 00:01:51,440

bar right.



22

00:01:51,510 --> 00:01:52,730

No action.



23

00:01:52,740 --> 00:01:54,600

But let's use this one.



24

00:01:54,600 --> 00:01:55,260

We have this one.



25

00:01:55,260 --> 00:01:56,160

No action.



26

00:01:56,430 --> 00:02:01,650

And we have this Vienneau actually embodied that full screen no action but no action but that overscan



27

00:02:01,680 --> 00:02:06,280

or no action bar that translucence decoration.



28

00:02:06,390 --> 00:02:09,690

So let's use this one but no action.



29

00:02:11,360 --> 00:02:14,430

And here let me show you the layout.



30

00:02:14,600 --> 00:02:16,020

It's open the entry view.



31

00:02:16,040 --> 00:02:22,370

And let's go inside this layout folder activity Underland calculated exemplified.



32

00:02:22,400 --> 00:02:25,210

So here you can see that the layout is changed here.



33

00:02:26,410 --> 00:02:35,710

And let's open our web browser here and just search for material on Android and then it's going to actually



34

00:02:35,710 --> 00:02:39,220

show you this line here using the material Feme and readable of hers.



35

00:02:39,220 --> 00:02:40,300

Let's click on this one.



36

00:02:40,300 --> 00:02:46,960

So here it is using the material in the new material provide system widgets that let you set their color



37

00:02:46,960 --> 00:02:54,150

palette touch feedback animations for the system widgets activity transition animations.



38

00:02:54,430 --> 00:02:57,020

Right by just using the material theme.



39

00:02:57,100 --> 00:03:02,980

We can do all of these things here which as you can customize the look of the material according to



40

00:03:02,980 --> 00:03:07,090

your brand identity with the color palette you control.



41

00:03:07,120 --> 00:03:13,720

You can teach the action bar anti-status body using the female attributes as shown.



42

00:03:13,720 --> 00:03:17,100

So here let me show you the emulator.



43

00:03:17,290 --> 00:03:18,730

We have the action bar.



44

00:03:18,730 --> 00:03:21,590

Let me actually run the app first.



45

00:03:21,610 --> 00:03:24,170

So as you can see there is no action bar here.



46

00:03:24,460 --> 00:03:26,420

But I'm going to show you that here for us.



47

00:03:26,420 --> 00:03:35,140

Go to the stance that exemplify and here let's say that we have only this one field that material but



48

00:03:35,710 --> 00:03:38,080

let's just say that that part that says no action.



49

00:03:38,090 --> 00:03:40,170

But I want to run the app.



50

00:03:40,360 --> 00:03:42,800

So it says the app is crashed.



51

00:03:42,880 --> 00:03:44,470

There is a bug in our app.



52

00:03:44,890 --> 00:03:50,920

Remember that I told you that you don't have to worry about the lower versions of 100 of the Android



53

00:03:50,920 --> 00:03:57,120

operating system because you already specified that the minimum STK is going to be an orderly path right.



54

00:03:57,490 --> 00:04:00,880

But there is a problem inside the job folder here.



55

00:04:00,880 --> 00:04:06,820

If I did buy them if I click on this large cat here let me show you the book with the address.



56

00:04:07,000 --> 00:04:14,800

So here let's let's run the app again because I want to shoot the locks here and now the app crashed



57

00:04:14,800 --> 00:04:18,140

so let's search for the air.



58

00:04:18,230 --> 00:04:19,340

So here it is verbose.



59

00:04:19,340 --> 00:04:21,540

Let's go and click on error.



60

00:04:22,040 --> 00:04:24,950

And here we can actually find the error.



61

00:04:25,190 --> 00:04:27,200

But he likely can take a look at this link.



62

00:04:27,200 --> 00:04:29,460

Here it is until later at about 11.



63

00:04:29,630 --> 00:04:33,680

If I click on this link here it's going to show you that this line is set content.



64

00:04:33,690 --> 00:04:38,410

View art that lay out the activity on line calculator is the cause of the error.



65

00:04:38,660 --> 00:04:40,060

But that's not.



66

00:04:40,110 --> 00:04:46,080

Yes it's true but that's not really true because we changed the theme of the app.



67

00:04:46,220 --> 00:04:47,060

Right.



68

00:04:47,060 --> 00:04:53,840

We said that we don't have to worry about the larger versions of an operating system but here it says



69

00:04:54,210 --> 00:04:56,560

Processo above this line.



70

00:04:56,780 --> 00:04:59,830

Here it says dotted line at runtime exception.



71

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

So let me show you that here it says Javal that illegal state exception you need to use a field that



72

00:05:06,080 --> 00:05:07,560

app compatibly.



73

00:05:07,720 --> 00:05:08,180

Right.



74

00:05:08,180 --> 00:05:14,530

Take a look at this one app compact or descendant with this activity.



75

00:05:14,750 --> 00:05:18,840

The problem is this activity is that of a file.



76

00:05:19,130 --> 00:05:32,130

Let me just close this actually lucky part here and here this class calculator extends app compact activity.



77

00:05:32,150 --> 00:05:40,840

So it's not good for this specific application because we changed the fien to material that's fine too.



78

00:05:40,910 --> 00:05:48,470

So here I am going to just delete this value and I'm going to say activity not at camp activity but



79

00:05:48,470 --> 00:05:50,850

the activity itself.



80

00:05:50,870 --> 00:05:52,210

Now we can run the app.



81

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

Let me show you the emulator.



82

00:05:55,210 --> 00:05:58,300

And now our application is not going to crash.



83

00:05:58,490 --> 00:05:59,170

Right.



84

00:05:59,510 --> 00:06:07,430

So here you can see this status but at the top that contains some actually some general information



85

00:06:07,460 --> 00:06:15,260

about the app for example the notifications of this clutch the battery LTE Internet or the SD card.



86

00:06:15,260 --> 00:06:20,310

Some general information about the whole device or the notifications or the app.



87

00:06:20,330 --> 00:06:20,820

Right.



88

00:06:21,050 --> 00:06:26,230

And we have this one this toolbar that contains the label of the application.



89

00:06:26,230 --> 00:06:28,520

My calculator here.



90

00:06:28,600 --> 00:06:31,730

So let me show you the Devar browser.



91

00:06:31,770 --> 00:06:38,610

It says you can customize the look of the material according to your brand identity with the color palette



92

00:06:38,670 --> 00:06:39,450

you control.



93

00:06:39,600 --> 00:06:45,720

You can tint the action bar and this spot this means that we can change the color of the status bar



94

00:06:45,750 --> 00:06:47,710

and the action bar here.



95

00:06:48,180 --> 00:06:52,430

The system all widgets have a new design and touch feedback animations.



96

00:06:52,620 --> 00:06:58,950

You can customize the color palette the touch feedback animations and the activity transition for your



97

00:06:58,950 --> 00:06:59,670

app.



98

00:06:59,880 --> 00:07:03,600

So it is you can customize the color palette.



99

00:07:04,550 --> 00:07:06,610

The color palette uses R.G. colors.



100

00:07:06,860 --> 00:07:07,440

So.



101

00:07:07,460 --> 00:07:12,430

So I just opened another tap for you and searched for the RTP colors.



102

00:07:12,500 --> 00:07:13,460

You can click on this link.



103

00:07:13,460 --> 00:07:15,940

Here are the color codes chart.



104

00:07:15,980 --> 00:07:18,920

And here we can find some pretty colors.



105

00:07:18,920 --> 00:07:28,710

So for example we can find this one this color and if I click on it here so let's go down here we can



106

00:07:29,130 --> 00:07:31,170

actually see some other colors here.



107

00:07:32,010 --> 00:07:39,780

For example this cream some color here it is the RTP color right.



108

00:07:39,800 --> 00:07:41,980

I just need to copy this value.



109

00:07:43,040 --> 00:07:48,430

And as you can see this one is the hex code and this one is the RTP color.



110

00:07:48,620 --> 00:07:49,730

So it doesn't really matter.



111

00:07:49,730 --> 00:07:51,550

You can actually choose this one.



112

00:07:51,890 --> 00:07:55,650

But if you want to use a hex code you need to put the hash tag before that.



113

00:07:55,790 --> 00:07:56,940

So let me copy this value.



114

00:07:56,950 --> 00:08:02,430

Let's go to our Android studio and let's go into these colors that exemplified.



115

00:08:02,510 --> 00:08:04,910

So we have this color primary right.



116

00:08:05,120 --> 00:08:08,350

Let's divide this value and instead put our value here.



117

00:08:08,360 --> 00:08:12,020

Hash tag DC 143.



118

00:08:12,020 --> 00:08:19,610

See now we can see at the left sidebar the color is crimson color as the color primary.



119

00:08:19,610 --> 00:08:26,590

Let's go to the browser and let's choose another color for the day for this one color primary Dortch.



120

00:08:26,720 --> 00:08:30,360

So let's say that we have this Tartrate.



121

00:08:30,470 --> 00:08:32,170

Copy this value.



122

00:08:32,780 --> 00:08:34,090

Let's go to suit you.



123

00:08:34,130 --> 00:08:36,510

And let's paste this value here.



124

00:08:37,110 --> 00:08:38,390

Let's left Sipar.



125

00:08:38,520 --> 00:08:40,750

You can see this color is changed.



126

00:08:40,970 --> 00:08:44,450

And here we have this color axen.



127

00:08:44,510 --> 00:08:46,840

Let's open our web browser.



128

00:08:46,910 --> 00:08:47,980

Let's use another color.



129

00:08:48,020 --> 00:08:53,780

Let's choose this yellow as the color accent and paste this value here.



130

00:08:53,780 --> 00:08:57,300

Now let's go inside is activity on the line.



131

00:08:57,310 --> 00:09:02,660

I calculated that XML file as you can see the changes are not reflected here.



132

00:09:02,660 --> 00:09:04,000

So let's run the app.



133

00:09:04,040 --> 00:09:05,880

Let me show you the emulator.



134

00:09:05,900 --> 00:09:08,150

So again the changes are not reflected here also.



135

00:09:08,150 --> 00:09:09,840

So here there is a.



136

00:09:10,940 --> 00:09:16,000

This means that you're inside these signs that XML file.



137

00:09:16,070 --> 00:09:17,050

Let's click on it.



138

00:09:17,920 --> 00:09:22,430

Here as you can see we are actually using these colorists.



139

00:09:22,450 --> 00:09:29,420

For example the color primary color primary dark and the color accent inside is Titanic right.



140

00:09:29,450 --> 00:09:39,060

Thinnings Alphyn and we chose that material but these colors are not actually used inside or lay out



141

00:09:39,070 --> 00:09:42,250

for example for the status bar or the toolbar.



142

00:09:42,340 --> 00:09:49,820

The color primary art is used for this tattoo spot and the color primary is used for the toolbar.



143

00:09:50,670 --> 00:09:54,270

So how we can actually solve this problem.



144

00:09:54,270 --> 00:09:56,470

Here we have these items right.



145

00:09:56,490 --> 00:09:59,150

The name is colored primary.



146

00:09:59,290 --> 00:10:06,870

So here we want to actually use the color primary of our app that we specify inside the colors that



147

00:10:06,870 --> 00:10:09,070

exemplified the Android system.



148

00:10:09,150 --> 00:10:15,850

You want to use the Android colon color primarily like this one.



149

00:10:15,840 --> 00:10:19,940

This is very important all here this one color primary art.



150

00:10:19,950 --> 00:10:26,310

Again we need to put Android colon color primary to our human to use the color of the Android system



151

00:10:26,460 --> 00:10:31,590

and again for the color accent we need to put Android colon color accent.



152

00:10:31,590 --> 00:10:37,260

Now if I go into this activity are there like minute example you can see these changes are now affected



153

00:10:37,260 --> 00:10:37,980

here.



154

00:10:38,400 --> 00:10:39,800

The status bar.



155

00:10:40,170 --> 00:10:43,280

And we have this one this toolbar.



156

00:10:43,290 --> 00:10:51,060

So let me show you the web browser and here it says that the material is defined as Android style slash



157

00:10:51,060 --> 00:10:53,220

feel that material the dark version.



158

00:10:53,250 --> 00:10:56,160

So we used the dark version right.



159

00:10:56,220 --> 00:10:58,440

We have all sorts of other versions.



160

00:10:58,680 --> 00:11:02,190

We have found that material that light the light version.



161

00:11:02,190 --> 00:11:04,260

Let me show you this version too.



162

00:11:04,320 --> 00:11:06,870

Let's go into these slides that exam and find.



163

00:11:07,410 --> 00:11:09,540

And here it is fien that material.



164

00:11:09,870 --> 00:11:12,140

That's light.



165

00:11:12,280 --> 00:11:16,380

Let's go into this activity Odelein calculator the rest of my file.



166

00:11:16,450 --> 00:11:19,720

Here you can see this is the light version.



167

00:11:19,780 --> 00:11:21,640

Let me show you the web browser.



168

00:11:22,090 --> 00:11:27,080

And we have this one feinted material that light dot dot action part.



169

00:11:27,400 --> 00:11:31,670

So let's also see this slide.



170

00:11:32,140 --> 00:11:36,310

What is that material that light that dot action board.



171

00:11:36,310 --> 00:11:43,780

So here we can see dot dot action bar.



172

00:11:43,790 --> 00:11:47,030

So let me show you the activity underline translated resume.



173

00:11:47,200 --> 00:11:53,740

So here because we already changed the color of this toolbar we can see that it is not affected here



174

00:11:53,740 --> 00:11:54,650

at this site.



175

00:11:54,700 --> 00:12:00,000

So let's go back to the study that stands that is fine and let's choose that light.



176

00:12:00,200 --> 00:12:02,630

The medical field that material that light.



177

00:12:02,670 --> 00:12:05,070

I like this style for my app.



178

00:12:05,080 --> 00:12:06,660

You can't change it if you want.



179

00:12:06,880 --> 00:12:09,260

But let me show you the Amul the browser.



180

00:12:09,280 --> 00:12:15,490

So here make sure to actually read this documentation here in order to learn more about material design



181

00:12:15,490 --> 00:12:16,690

in Android.



182

00:12:17,050 --> 00:12:22,570

So let me go back to our studio and we have this color primary color primary dark color accent.



183

00:12:22,570 --> 00:12:27,330

Make sure to put and call in here before these names are otherwise.



184

00:12:27,460 --> 00:12:32,560

These changes are not going to be affected on our application.



185

00:12:32,590 --> 00:12:38,840

So that's it that's enough for this tutorial in the next tutorial we are going to design an app for



186

00:12:39,410 --> 00:12:41,940

the widgets to do the layout.



187

00:12:42,310 --> 00:12:47,090

So thank you very much for watching and I look forward to seeing you in the next studio.