Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Handling Clicks4: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
You need to sign up for Treehouse in order to download course files.Sign up