Using a Menu Resource5:19 with Ben Deitch
In addition to creating a Menu in code, we can also do it using a Menu resource!
There's nothing wrong with creating your items in code, but 0:00 since Android gives us another option, let's try using a menu resource. 0:03 Over in the project pane, 0:08 let's kick things off by right-clicking on the res directory and 0:10 creating a new Android resource directory with a Resource type of menu. 0:15 Then let's right-click on our new menu directory and 0:21 create a New Menu resource file which we'll name options_menu. 0:27 And now we can see our menu layout just like we'd see any other layout. 0:34 Let's start by dragging out a new menu item for our next image button. 0:40 Then, for the Properties, let's give it an ID of nextimage, and 0:46 a title of Next Image. 0:51 Let's also set its icon to our photo drawable. 0:54 And set showAsAction to always. 0:59 Awesome, now let's create the rest of our menu items. 1:04 There's five more, so let's start by dragging out five new menu items. 1:07 One, two, three, 1:13 four, and five. 1:18 Then for the first one, let's give it an id of color, 1:23 a title of Color, and let's set showAsAction to always. 1:27 Next, we've got our three colors. 1:35 Let's give the first one an id of red, a title of Red, 1:38 and then let's also check the checkable box to give it a check box. 1:44 And let's do the same thing for the green and blue options. 1:48 Green, Green, and check the checkable box. 1:52 And blue with Blue and the checkable box. 2:00 Finally, let's give our last option an id of reset and 2:05 a title of Reset, and there we go. 2:11 Also, if you'd rather write your menu in XML you can always check out the Text tab. 2:16 All right, now that we've got our menu resource, we just need to use it. 2:25 Back in Main Activity, let's delete everything in onCreateOptionsMenu(), 2:30 except for the return statement. 2:33 Then let's call getMenuInflater() .inflate, 2:37 and let's pass in our menu resource, 2:42 R.menu.options_menu, along with our menu, menu. 2:46 Then if we run the app, 2:53 We can see all of our options, though the check boxes don't work, 3:00 and we need to change the color of our icon again. 3:05 To change the color of our icon, just like last time, we need to get the drawable for 3:09 our menu item and set its color filter. 3:14 To do that let's first add a line after we've inflated our menu. 3:17 Then let's create a new drawable, Named nextImageDrawable. 3:21 And let's set it equal to menu.findItem and 3:30 pass in R.id.nextImage for the item to find. 3:34 And then finish it off with a call to getIcon() to give us the drawable. 3:39 Then on the next line let's call 3:44 nextImageDrawable.setColorFilter and 3:48 pass in Color.WHITE and PorterDuff.Mode.SRC_ATOP. 3:53 And if we run the app we should be back to our white icon. 4:00 Perfect, moving on to our checkboxes, we've got two problems. 4:06 One, they don't work. 4:10 And two, since this image has all the colors in it, 4:12 they should really start out being checked. 4:16 To do that we just need to call the setChecked() method 4:19 on each of those menu items. 4:22 Let's add a couple lines below where we set the color filter and then for 4:25 the red menu item, 4:28 let's type menu.findItem(R.id.red) to give us the red item. 4:30 And then .setChecked(), 4:37 and let's pass in our red Boolean to determine if it should be checked or not. 4:42 Finally, let's use Cmd or 4:47 Ctrl+D to duplicate this line two more times and 4:50 then replace red with green, and red with blue. 4:56 Then let's run the app. 5:05 And look at that, we've checked our boxes, but they still don't work. 5:11 In the next video, we'll finally start making these buttons do something. 5:16
You need to sign up for Treehouse in order to download course files.Sign up