1
00:00:00,310 --> 00:00:02,840
We just finished seeing how the app works.

2
00:00:02,840 --> 00:00:05,090
Now let's see how to
create an options menu.

3
00:00:05,090 --> 00:00:09,130
The first step to creating an options
menu is to override the onCreate

4
00:00:09,130 --> 00:00:10,380
options menu method.

5
00:00:10,380 --> 00:00:15,670
So let's put our cursor between
loadImage and updateSaturation.

6
00:00:15,670 --> 00:00:20,078
And then use Contol+O to override
the onCreate options menu method.

7
00:00:21,875 --> 00:00:25,642
This method will be called when
the activity is first created, and

8
00:00:25,642 --> 00:00:27,670
gives us access to our app's menu.

9
00:00:28,970 --> 00:00:32,440
Inside this method, we're going
to add our items to our menu, and

10
00:00:32,440 --> 00:00:35,760
then return true to tell
Android to show our menu.

11
00:00:35,760 --> 00:00:37,233
So let's start by returning true.

12
00:00:39,370 --> 00:00:41,710
And then let's work on
adding items to our menu.

13
00:00:43,370 --> 00:00:47,820
In Android, you can add items to
a menu by using a menu resource, or

14
00:00:47,820 --> 00:00:50,070
by adding the items in code.

15
00:00:50,070 --> 00:00:52,420
Let's start by adding an item in code, and

16
00:00:52,420 --> 00:00:55,610
then we'll refactor our app
to use a menu resource.

17
00:00:55,610 --> 00:01:00,700
First let's create a new menu
item variable, named menuItem.

18
00:01:02,070 --> 00:01:07,963
And let's set it equal to menu.add,
and in quotes, Next Image.

19
00:01:10,835 --> 00:01:12,570
Now if we run the app,

20
00:01:20,416 --> 00:01:24,190
We can see our next image
option in the overflow menu.

21
00:01:24,190 --> 00:01:25,180
Pretty cool.

22
00:01:25,180 --> 00:01:29,440
Whenever you add a new menu item, it's
going to be added to the overflow menu.

23
00:01:29,440 --> 00:01:32,320
If you'd like it to show up
in the action bar instead,

24
00:01:32,320 --> 00:01:35,595
you need to set the showAsAction
property of your menu item.

25
00:01:38,980 --> 00:01:46,561
Back in the code, on the next line,
let's call menuItem.setShowAsAction.

26
00:01:48,628 --> 00:01:53,975
And then pass in
MenuItem.SHOW_AS_ACTION_ALWAYS.

27
00:01:53,975 --> 00:01:57,395
This way our item will always
be shown in the app bar.

28
00:01:57,395 --> 00:02:01,445
Another option we could have picked
would be SHOW_AS_ACTION_IF_ROOM.

29
00:02:01,445 --> 00:02:03,695
If you pick the IF_ROOM option,

30
00:02:03,695 --> 00:02:08,320
your item will only be shown if
there's enough room in the action bar.

31
00:02:08,320 --> 00:02:11,913
Now that our item will be shown in
the action bar, let's add an icon.

32
00:02:11,913 --> 00:02:15,640
But first,
let's make sure we have an icon to use.

33
00:02:15,640 --> 00:02:20,392
Over in the project pane,
let's right-click on the drawable folder,

34
00:02:22,104 --> 00:02:26,660
And then pick New > Vector Asset.

35
00:02:26,660 --> 00:02:31,150
Then let's click on the icon box,
and search for photo.

36
00:02:32,940 --> 00:02:35,150
You can pick whatever icon you'd like, but

37
00:02:35,150 --> 00:02:38,140
I think this Add a photo
icon works pretty well.

38
00:02:38,140 --> 00:02:44,590
Once you've got your image,
click OK, and then Next, and Finish.

39
00:02:44,590 --> 00:02:48,813
And then back in onCreateOptionsMenu,

40
00:02:48,813 --> 00:02:54,650
let's call menuItem.setIcon,
and pass in our icon,

41
00:02:54,650 --> 00:03:00,501
R.drawable.ic_add_a_photo_black_24dp.

42
00:03:02,890 --> 00:03:04,002
Then let's run the app.

43
00:03:09,232 --> 00:03:11,980
And awesome, we've got our icon.

44
00:03:11,980 --> 00:03:15,050
But unfortunately,
it looks like it's the wrong color.

45
00:03:15,050 --> 00:03:19,441
Since our icon is a vector drawable,
one way to fix this would be just to open

46
00:03:19,441 --> 00:03:24,718
the drawable, and

47
00:03:24,718 --> 00:03:29,200
change the color to white by
changing all these 0s to Fs.

48
00:03:29,200 --> 00:03:33,920
However, I think a better solution is
to change the color programmatically.

49
00:03:33,920 --> 00:03:38,300
That way, if we ever want to change the
color at run time, [LAUGH] it'll be easy.

50
00:03:38,300 --> 00:03:42,310
To do this, we're just going to grab
the drawable from our icon, and

51
00:03:42,310 --> 00:03:44,760
use a color filter to turn it white.

52
00:03:44,760 --> 00:03:47,870
So back in MainActivity,
right after we set the icon,

53
00:03:51,887 --> 00:03:56,151
Let's add a new line, and then call

54
00:03:56,151 --> 00:04:01,847
menuItem.getIcon, to give us the drawable.

55
00:04:01,847 --> 00:04:09,710
And then .setColorFilter, while
passing in Color.WHITE for the color.

56
00:04:09,710 --> 00:04:18,130
And for the mode,
let's pass in PorterDuff.Mode.SRC_ATOP.

57
00:04:18,130 --> 00:04:22,556
Meaning that every non-transparent
pixel will be changed to while,

58
00:04:22,556 --> 00:04:24,060
giving us a white icon.

59
00:04:24,060 --> 00:04:30,223
And if we run the app, there we go!

60
00:04:30,223 --> 00:04:34,191
Now that we've seen how to add an item
in code, let's refactor our code to

61
00:04:34,191 --> 00:04:37,650
use a menu resource instead,
which we'll do in the next video.