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
Preview
Start a free Courses trial
to watch this video
In this video we'll see how we can handle clicks on an Options Menu!
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up