Coding an Options Menu

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