Preview
Video Player
00:00
00:00
Coding an Options Menu
4:38In this video we'll see how we can create an Options Menu and add items to it!
We just finished seeing how the app works.
0:00
Now let's see how to
create an options menu.
0:02
The first step to creating an options
menu is to override the onCreate
0:05
options menu method.
0:09
So let's put our cursor between
loadImage and updateSaturation.
0:10
And then use Contol+O to override
the onCreate options menu method.
0:15
This method will be called when
the activity is first created, and
0:21
gives us access to our app's menu.
0:25
Inside this method, we're going
to add our items to our menu, and
0:28
then return true to tell
Android to show our menu.
0:32
So let's start by returning true.
0:35
And then let's work on
adding items to our menu.
0:39
In Android, you can add items to
a menu by using a menu resource, or
0:43
by adding the items in code.
0:47
Let's start by adding an item in code, and
0:50
then we'll refactor our app
to use a menu resource.
0:52
First let's create a new menu
item variable, named menuItem.
0:55
And let's set it equal to menu.add,
and in quotes, Next Image.
1:02
Now if we run the app,
1:10
We can see our next image
option in the overflow menu.
1:20
Pretty cool.
1:24
Whenever you add a new menu item, it's
going to be added to the overflow menu.
1:25
If you'd like it to show up
in the action bar instead,
1:29
you need to set the showAsAction
property of your menu item.
1:32
Back in the code, on the next line,
let's call menuItem.setShowAsAction.
1:38
And then pass in
MenuItem.SHOW_AS_ACTION_ALWAYS.
1:48
This way our item will always
be shown in the app bar.
1:53
Another option we could have picked
would be SHOW_AS_ACTION_IF_ROOM.
1:57
If you pick the IF_ROOM option,
2:01
your item will only be shown if
there's enough room in the action bar.
2:03
Now that our item will be shown in
the action bar, let's add an icon.
2:08
But first,
let's make sure we have an icon to use.
2:11
Over in the project pane,
let's right-click on the drawable folder,
2:15
And then pick New > Vector Asset.
2:22
Then let's click on the icon box,
and search for photo.
2:26
You can pick whatever icon you'd like, but
2:32
I think this Add a photo
icon works pretty well.
2:35
Once you've got your image,
click OK, and then Next, and Finish.
2:38
And then back in onCreateOptionsMenu,
2:44
let's call menuItem.setIcon,
and pass in our icon,
2:48
R.drawable.ic_add_a_photo_black_24dp.
2:54
Then let's run the app.
3:02
And awesome, we've got our icon.
3:09
But unfortunately,
it looks like it's the wrong color.
3:11
Since our icon is a vector drawable,
one way to fix this would be just to open
3:15
the drawable, and
3:19
change the color to white by
changing all these 0s to Fs.
3:24
However, I think a better solution is
to change the color programmatically.
3:29
That way, if we ever want to change the
color at run time, [LAUGH] it'll be easy.
3:33
To do this, we're just going to grab
the drawable from our icon, and
3:38
use a color filter to turn it white.
3:42
So back in MainActivity,
right after we set the icon,
3:44
Let's add a new line, and then call
3:51
menuItem.getIcon, to give us the drawable.
3:56
And then .setColorFilter, while
passing in Color.WHITE for the color.
4:01
And for the mode,
let's pass in PorterDuff.Mode.SRC_ATOP.
4:09
Meaning that every non-transparent
pixel will be changed to while,
4:18
giving us a white icon.
4:22
And if we run the app, there we go!
4:24
Now that we've seen how to add an item
in code, let's refactor our code to
4:30
use a menu resource instead,
which we'll do in the next video.
4:34