Preview
Video Player
00:00
00:00
Using a Menu Resource
5:19In 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