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