This workshop will be retired on May 1, 2025.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Create an Options Menu

Well done!

You have completed Create an Options Menu!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Handling Clicks

4:23 with Ben Deitch

In this video we'll see how we can handle clicks on an Options Menu!

Now that we've got all our buttons, it's time to make them work. 0:00
Which means we need to find a way to receive events from the options menu. 0:03
Luckily Android makes this pretty easy. 0:07
All we need to do is override the on options item selected method. 0:10
So right below on create options menu let's use Ctrl + 0:14
O to override the onOptionsItemsSelected method. 0:20
When a menu item is selected, this method will be called and 0:25
the selected menu item will be passed in as a parameter. 0:28
So first things first. 0:32
We need to figure out which menu item was selected. 0:34
We can do this by using a switch statement on the items id. 0:37
Switch on item.getItemId. 0:41
And then inside the switch statement let's add a case for 0:46
when the id is R.id.nextImage. 0:53
And if it is, let's add some logic to show the next image. 0:57
First we need to increment our image index. 1:00
So, imageIndex ++. 1:03
Then we need to make sure our index isn't outside the bounds of the array. 1:07
So if (imageIndex >= imageResIds.length). 1:12
Then let's reset imageIndex to 0. 1:21
Finally, we just need to call loadImage to show the image at our new index, 1:25
and we also need to add a break statement. 1:30
Then if we run the app, 1:34
And click on the next image button awesome! 1:43
We can start cycling through the pictures. 1:47
Getting back to the code let's move on to the color option. 1:52
Let's add a new case, For 1:56
R.id.color and add a break statement. 2:01
Then inside this case let's update the color variable so 2:09
color = !color, And then let's call updateSaturation. 2:15
That'll take care of updating the image, but it won't do anything to hide the red, 2:24
green, and blue options. 2:28
To do that, let's add a call to invalidateOptionsMenu. 2:30
InvalidateOptionsMenu tells Android that our options menu is no longer valid, 2:34
and results in a call to onCreateOptionsMenu. 2:40
So now, all we need to do is add some logic to onCreateOptionsMenu, 2:43
to hide our red, green, and blue options, based on the color variable. 2:47
However there's an even easier way to do this. 2:52
Over in our options_menu resource we can group the three options together so 2:55
that we only need to hide one object instead of each of them individually. 3:00
I find it easier to add a group on the Text tab. 3:04
So flip over to the Text tab and 3:07
then right above the red item let's add a new group tag. 3:09
And give it an Id of @+id/colorGroup. 3:16
Then let's close the group tag and put the closing tag below the blue item. 3:23
And let's update the tabbing. 3:34
Back in main activity, at the bottom of on create options menu, 3:39
let's set the visibility of our group by calling menu.setGroupVisible, 3:44
pass in the id of our group, R.id.colorGroup And 3:50
then color to make the visibility match our color variable. 3:57
Now if we run the app, 4:02
We can change the image from color to black and white. 4:09
And then we won't see the color options in the overflow menu. 4:13
Great work. 4:17
In the next video we'll finish up the project by adding functionality 4:18
to the rest of the buttons. 4:22