1

00:00:00,480 --> 00:00:03,950

Let's actually run our project and see what happens.



2

00:00:05,060 --> 00:00:12,140

And as you can see here I choose this up emulator next to six AP I-24 Android 7 AP 020 for as you can



3

00:00:12,140 --> 00:00:13,570

see here and there.



4

00:00:13,640 --> 00:00:17,060

OK so now it's going to run our project here.



5

00:00:17,450 --> 00:00:20,420

So here as you can see our project cannot be done.



6

00:00:20,630 --> 00:00:25,420

And in the console it says error cannot find symbol valuable fap.



7

00:00:25,520 --> 00:00:31,400

So if we actually go inside the main activity of a file here as you can see we have these lines of code



8

00:00:31,400 --> 00:00:34,150

that are related to a floating action button.



9

00:00:34,160 --> 00:00:34,680

Right.



10

00:00:34,730 --> 00:00:42,050

So we need to actually delete these lines of code here at just select these lines of code and then present



11

00:00:42,060 --> 00:00:43,610

it here on your keyboard.



12

00:00:43,610 --> 00:00:46,140

And now let's actually run our project again.



13

00:00:46,310 --> 00:00:50,500

So here as you can see our application is done on the simulator.



14

00:00:50,690 --> 00:00:56,250

So now as you can see of we have this Abdoulaye out here animal quis.



15

00:00:56,450 --> 00:01:00,560

And as you can see here at the right we have this menu option settings.



16

00:01:00,710 --> 00:01:02,890

So we need to do two things here.



17

00:01:02,960 --> 00:01:10,730

First we need to actually change the color of this Apple layout and we need to also put up vector instead



18

00:01:10,730 --> 00:01:14,990

of this dot dot dot here for actually for our settings.



19

00:01:15,260 --> 00:01:22,040

So let's actually go back to our Android studio and now let's actually open up the project structure



20

00:01:22,670 --> 00:01:23,750

as you can see here.



21

00:01:23,920 --> 00:01:27,270

Just click on a view tool windows and then project.



22

00:01:27,530 --> 00:01:34,490

And now let's actually go inside this values folder and then double click on the stipes folder here



23

00:01:34,520 --> 00:01:35,460

as you can see.



24

00:01:35,750 --> 00:01:39,940

And now as you can see at the top it says open editor right.



25

00:01:39,950 --> 00:01:47,540

So just click on this open editor here and now here I can actually see the color of these components.



26

00:01:47,540 --> 00:01:51,170

For example as you can see we have these status bar.



27

00:01:51,290 --> 00:01:53,990

So as you can see at the top we have this status bar.



28

00:01:54,140 --> 00:01:58,860

And here we have this apple layout that actually contains the toolbar.



29

00:01:58,880 --> 00:01:59,410

Right.



30

00:01:59,510 --> 00:02:03,090

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



31

00:02:03,170 --> 00:02:04,190

As you can see here.



32

00:02:04,220 --> 00:02:11,420

So now just a selectees colored primary dark as you can see the color Prime-Minister it is status but



33

00:02:11,780 --> 00:02:17,160

as you can see here this is that a spot is its color is a little bit darker than this color.



34

00:02:17,300 --> 00:02:21,490

So as you can see we have this color primer that are here at the right hand side.



35

00:02:21,560 --> 00:02:23,910

So just click on this color here.



36

00:02:24,410 --> 00:02:30,530

Click on it and now select the black color here as you can see and then click on OK.



37

00:02:30,940 --> 00:02:33,770

And now as you can see here is that the spot is black.



38

00:02:34,140 --> 00:02:37,130

And now let's let's actually scroll to the top.



39

00:02:37,130 --> 00:02:39,120

And here we have this toolbar right.



40

00:02:39,200 --> 00:02:45,570

So now let's actually find the toolbar color which is actually this one here.



41

00:02:45,570 --> 00:02:47,150

These are colored primary.



42

00:02:47,150 --> 00:02:52,810

So just double click on this colored primary here and now again choose the color black.



43

00:02:52,820 --> 00:02:55,670

So here at the top we have this black color.



44

00:02:55,670 --> 00:02:57,240

Just select it and then press on.



45

00:02:57,380 --> 00:03:02,810

OK here and now the pod is black.



46

00:03:02,840 --> 00:03:03,330

Right.



47

00:03:03,350 --> 00:03:07,070

So this actually is on our project now and see what happens.



48

00:03:08,620 --> 00:03:15,490

So as you can see here our status bar is Blache at the top but our parlay is not actually black its



49

00:03:15,490 --> 00:03:16,890

color is not change.



50

00:03:16,900 --> 00:03:21,970

So let's actually go back to our open this editor here again as you can see DoubleClick and this colored



51

00:03:21,970 --> 00:03:26,060

primary here and now select the splash color and then press on.



52

00:03:26,080 --> 00:03:26,430

OK.



53

00:03:26,430 --> 00:03:31,660

Here and here and as you can see it's actually done our project in



54

00:03:35,360 --> 00:03:41,050

and now as you can see here the color of the app up or lay out is is now black.



55

00:03:41,110 --> 00:03:42,010

Right.



56

00:03:42,100 --> 00:03:43,900

And this is the name of our application.



57

00:03:43,900 --> 00:03:44,890

Animalcules.



58

00:03:45,100 --> 00:03:49,120

So now this actually create a vector for the settings here.



59

00:03:49,120 --> 00:03:55,960

So now let's actually just just click on this triable folder here.



60

00:03:55,960 --> 00:04:05,470

Right click on it new and then here as you can see just selectees who after asset and now just as you



61

00:04:05,470 --> 00:04:12,010

can see we can actually create an updated image image here to just as you see we have this icon here



62

00:04:12,010 --> 00:04:12,520

right.



63

00:04:12,520 --> 00:04:21,820

So just select the icon here and now our select action and here we need to just find the right image



64

00:04:21,820 --> 00:04:23,000

for our settings.



65

00:04:23,290 --> 00:04:29,800

As you can see here just scroll down here and here we can actually choose one of these images.



66

00:04:29,830 --> 00:04:32,950

So let's find the proper image here.



67

00:04:32,950 --> 00:04:37,670

So as you can see here this one is Propp is actually a proper vector.



68

00:04:37,690 --> 00:04:40,340

So just select it and then a person.



69

00:04:40,360 --> 00:04:44,950

OK here and then click on next.



70

00:04:45,220 --> 00:04:50,450

And as you can see here it says it's going to naturally put this vector inside this triable folder inside



71

00:04:50,550 --> 00:04:54,550

race folder inside this main folder and then click on finish.



72

00:04:54,970 --> 00:04:59,980

And now inside this triable folder as you can see we have this XML file here as you can see this is



73

00:04:59,980 --> 00:05:02,030

actually the vector image.



74

00:05:02,050 --> 00:05:05,110

So now let's actually double click on this tab here.



75

00:05:05,110 --> 00:05:11,530

As you can see at the top in order to make this area wider just up at the top here and now we can see



76

00:05:11,530 --> 00:05:18,050

these attributes that are related to that specific vector as you can see here at the right hand side



77

00:05:18,050 --> 00:05:20,840

just click on the preview you can see this vector here.



78

00:05:20,840 --> 00:05:26,240

So now I want to change the color of this vector to actually white.



79

00:05:26,270 --> 00:05:30,340

So as you can see here we have this attribute here feel color as you can see here.



80

00:05:30,530 --> 00:05:36,800

So just selected and is just assigned the value of f f f.



81

00:05:36,800 --> 00:05:41,690

Now as you can see here the color of this vector is actually white.



82

00:05:42,050 --> 00:05:48,590

And now let's actually see how we can actually choose this work here as this image for the settings



83

00:05:48,590 --> 00:05:49,190

here.



84

00:05:49,370 --> 00:05:53,080

So now let's actually open our project structure.



85

00:05:53,580 --> 00:05:58,810

And now here just as you can see we have this menu menu for the table click on it.



86

00:05:59,000 --> 00:06:04,160

And as you can see inside this menu folder we have this menu underline minute example just double click



87

00:06:04,160 --> 00:06:05,690

on this XML file.



88

00:06:05,690 --> 00:06:09,110

And here this is ASML File menu that image file.



89

00:06:09,110 --> 00:06:13,060

Just double click on this tab here in order to make this area wider.



90

00:06:13,460 --> 00:06:18,570

And now I want to specify an image for my menu option as you can see here.



91

00:06:18,740 --> 00:06:22,860

So here we have this item as the menu option as you can see here.



92

00:06:22,970 --> 00:06:29,540

So the idea is that signed Plus the action settings the order in category attribute is going to determine



93

00:06:29,930 --> 00:06:37,700

whether this item is going to be the first item inside that is actually inside the toolbar or not.



94

00:06:37,700 --> 00:06:41,790

So as you can see here the items are going to be placed one after the other.



95

00:06:41,790 --> 00:06:44,670

OK the first one is going to be here at the right hand side.



96

00:06:44,810 --> 00:06:51,340

And the other one is going to be at the right hand side at the left hand side of that item.



97

00:06:51,470 --> 00:06:56,360

So because if you only have one item here inside this toolbar it doesn't really matter what's going



98

00:06:56,360 --> 00:06:58,040

to be the order in category.



99

00:06:58,070 --> 00:07:01,440

So we can actually put number 100 or number one.



100

00:07:01,460 --> 00:07:06,460

So this item is going to be placed here at the right hand side here as the as the only item here.



101

00:07:06,470 --> 00:07:07,410

Right.



102

00:07:07,610 --> 00:07:10,830

And we have this title attribute which we are not going to use.



103

00:07:10,970 --> 00:07:13,480

So just delete the title attribute here.



104

00:07:13,670 --> 00:07:16,030

And here we have this show as action.



105

00:07:16,270 --> 00:07:21,560

So this sure as action attribute as you can see here is going to determine whether we want to actually



106

00:07:21,560 --> 00:07:23,870

use that dot dot dot option or not.



107

00:07:23,870 --> 00:07:31,340

For example it may actually show you the emulator as you can see we have this vector here at the top



108

00:07:31,610 --> 00:07:35,610

in order to actually go inside our settings activity right.



109

00:07:35,690 --> 00:07:38,230

But for now let's actually to open our own application.



110

00:07:38,270 --> 00:07:39,820

So this is our own project.



111

00:07:39,970 --> 00:07:42,480

And now at the top we have this dot dot dot.



112

00:07:42,620 --> 00:07:44,900

And then we can actually select settings here.



113

00:07:44,900 --> 00:07:50,610

Right but now I want these vectors to be here instead of this dot dot dot.



114

00:07:50,720 --> 00:07:51,340

OK.



115

00:07:51,830 --> 00:07:53,890

As you can see it is in here for now.



116

00:07:53,880 --> 00:07:56,510

It says never sure as action is never.



117

00:07:56,510 --> 00:08:00,920

And this means that it's going to actually put this dot dot dot here and then we can actually choose



118

00:08:00,920 --> 00:08:01,630

this action.



119

00:08:01,760 --> 00:08:08,720

But now I want to change this never to always so that this vector image is going to be here at the top



120

00:08:09,130 --> 00:08:09,720

always.



121

00:08:09,830 --> 00:08:10,520

OK.



122

00:08:10,730 --> 00:08:13,580

So now let's actually specify an icon.



123

00:08:13,850 --> 00:08:21,500

So an icon in order to actually create an icon for our Actually menu option here for our menu button.



124

00:08:21,560 --> 00:08:28,010

I can just type in icon and I can actually select this attribute and here as you can see I can to stop



125

00:08:28,010 --> 00:08:30,510

it at sign tribal.



126

00:08:30,650 --> 00:08:35,990

And now as you can see here the autocomplete feature of the Android studio is helping me to choose this



127

00:08:35,990 --> 00:08:41,900

vector image that we have inside destroy Bill folder as you can see ice icy underline Beeld underline



128

00:08:41,900 --> 00:08:44,020

Blache underline 2040.



129

00:08:44,210 --> 00:08:47,940

So just select it and that person entered here on your keyboard.



130

00:08:47,940 --> 00:08:52,090

And now as you can see here inside this preview we have this vector image at the top.



131

00:08:52,130 --> 00:08:53,210

Inside this tool box.



132

00:08:53,300 --> 00:08:53,790

Right.



133

00:08:53,960 --> 00:08:59,580

And now if we should open the project structure we can see that we have this name here instead distractible



134

00:08:59,610 --> 00:09:00,240

folder.



135

00:09:00,330 --> 00:09:05,650

I see underlaid built underline Blache on that line 24 DP that example here.



136

00:09:05,660 --> 00:09:06,330

Right.



137

00:09:06,410 --> 00:09:10,130

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



138

00:09:10,130 --> 00:09:14,430

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



139

00:09:14,700 --> 00:09:18,880

And here we can see that at the top we have this vector image here right.



140

00:09:18,970 --> 00:09:24,650

And now I can actually select this image in order to actually move to that setting's activity but for



141

00:09:24,650 --> 00:09:29,780

now because we don't have the settings activity in our project we cannot actually transition to that



142

00:09:29,780 --> 00:09:30,680

activity here.