Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll see how we can create an Options Menu and add items to it!
Related Links
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 lets 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
You need to sign up for Treehouse in order to download course files.
Sign up