In this video, we're going to add two
options to the menu, so that we can
choose between the Top 10 and Top 25. Now
this'll be slightly different to the
menu items we've already got, because
once you've chosen either Top 10 or Top
25, that choice will remain in effect
until you change it. And also, when you
select the Top 10, it will automatically
unselect the Top 25, and vice versa. So I'm
going to edit the feeds_menu to add
these new options. So open the feeds
_menu layout, if you haven't
already, and let's see how to add these
menu items with the option buttons. Now
the way we do that is to use a menu
Group. So, first thing we're going to
do is grab, is drag a group from the
pallet onto the Design. This time, though,
you have to be more careful and watch
the orange highlighting, because we don't
want to place it between any of the
existing items, and I'll just show you
what I mean by that. So I'm gonna select
the Group, so do be more careful where
you're placing it. And in fact, what I
want to do is, or what I find much easier is,
to drag it into the Component Tree,
rather than the design. The reason is,
it's just a lot clearer as to what's
happening. Now to show you how you can
arrange the menu options, though, I'm
gonna place the group between the first
two buttons over here - so between mnuFree
and mnuPaid. And you can see that line
there, and that's actually showing you
where the new item or group - group in
this case, because that's what I've
selected - will appear. So I'm going to
release the mouse button,
and you can see group was actually added
there in the Component Tree. So I've now got
the group in the wrong place, and note
that the group doesn't show in the
Design. So this is where the Component
Tree is really useful. So what you can do
is you can move items up and down by
just dragging them in the Design, but
it's actually easier to do that in the
Component Tree, and with a group you've
got no choice, because it doesn't appear
in the Design, unless you want to edit
the XML directly, of course. So what I'm
going to do is drag the group down to
the bottom of the Component Tree. Notice
the horizontal lines that appear where
it can be dropped - it basically shows you
where it's going to appear. Now it gets more
interesting when we have items that can
be nested into other items, such as a
group, so I'm going to release that first.
Put the group in there, down the bottom.
Then I'm going to add two more menu
items to the bottom of
the menu. Alright, so I'm gonna get a menu
item, and I'm gonna drag the first menu
on to the bottom of the Component Tree,
but watch what happens before I let go.
So it's natural to aim for the various
elements in the list, so that your mouse
pointer will naturally be over to the
right, below group in the list.
But if I move over to the left, still
while keeping the mouse button down,
notice what happens. Over to the right, so to
the left and to the right, you can see
the little mouse pointer changes. So over to
the right, the new menu item will be
dropped inside our group. Over to the
left, it's going to appear, it's going
to basically appear below the group. So in
other words, the guide's providing a
visual indication of where the items
are going to end up. For this one, I'm
going to keep right - I'm gonna move over
to the right - because we want toe
drop it inside the group. And you can see
that we've now got this little
menu here, and the item's actually in
that group. Now for the second menu item;
I'm gonna select that again, and I'm
gonna move down. This time I'm going to
keep left, so it ends up below the group
rather than inside it. Now that's not
where I want it, but I want to show you
how you can move these items around. Now it
should be easy, but let me just drop this
first. You can see, we've now got one menu
item that's in the group, and an item
that actually appears outside and it's
actually showing in here as well. Now it
should be easy to move things around, but
the guide's let us down here. So a
future update might fix this, but at the
moment, I can't get this bottom item and
drag it into the group. You can see it's
not actually working when I try and do
that. You can see that the, it's really
hard to see but there's an arrow key
there - it's trying to put into the group
but it's not actually letting, allowing
me to move anything. So the menu design's
a bit flakey when working with groups, and
that's been, there's been problems with
it for over six months now. And it does
seem to be working okay, generally, now
with groups, but as I said, it has been
flakey but if it breaks again, you'll need to
edit the XML. So the fix to get this to
work, is to click on this little arrow
here to expand it out, and now when I
do that, I can drag this into place okay.
You can see that's now worked. So you can
see that the menu design is a little
bit flakey when working with groups, and
there's actually been problems for over
six months. It
now does seem to be working okay, apart from
that minor problem, which we resolved by
expanding the group. But if it breaks
again, then you'll need to edit the XML.
So it's worth having a quick look in
there, just to get familiar with that, if
you need to, for some reason, go into and
make changes to the XML. So I'm going to
click on the TextView. Now what we're
interested in here is this group. So
notice that two items are nested inside
the group; there's a group start opening
tag and the group closing tag. Now if you
get problems placing items inside a
group, just drop them at the bottom, then
edit the XML to move them where they
should be.
Now watch out for the group being
created as a self-closing tag when it's
empty. So in other words, if you saw
something like this - I'll just clean up
that other line first. So if you see
something like that, like that with the
closing slash there, if that happen - and
it's perfectly valid for an empty tag
to be self-closing like this - then you should
delete the closing slash, like so, and
then just type in the closing tag itself,
this one down the bottom. Alright, but I'm just
gonna undo everything there, and leave it
back to how it was before. That's how it
was when we got there, and we'll go back to
the Design. Alright, so I'm going to give
the first of these new menu items the
item, the ID rather, mnu10. Click it
in the group there now - mnu10, I'll
call that one - and the title will be Top 10.
And for the second one, no surprises
for guessing a mnu25 and Top 25. And it's
also a good idea to give the group an
ID, so let's go ahead and do that as well.
I'm gonna select the group - mnu
will be the ID - mnugrpLimit.
That's the ID. Now at the moment, these
look just like any other menu items and
there's no way to telling, of telling,
which one's currently selected. What we
really want is for them to behave like
radio buttons, so that if one is selected,
the other's automatically unselected. and
we get a visual indication of which one
is being applied to the feeds. And that's
the purpose of the group here. So if I
select the group, which it is selected at
the moment then,
as you can see, I can actually change it's
checkable behaviour property to single,
and that will allow only one of its items
to be selected.
So checkable behavior here; we've got
options of none, all or single, and what
we want is single, that allows only one of
its items to be selected. And you can see
what happened when I did that - we
automatically got these radio buttons
showing, So that's the purpose, as a said,
of the group here, to confirm that only
one can be selected at a time. But if we
change this signal to all, notice that's
now a checkbox there, next to the two
items, and that would give you the option
of choosing one or two, or none. But in
our case, we want single, which allows
only one of them to be selected at a time.
Alright, so the last thing we need to do
here, is we need to have the Top 10
option as the default. So make sure the
Top 10 is selected, either here or in
the Component Tree. Then we're going to
use the double arrow icon to the top
right, to expand the properties pane. Now the
property one here, is checked. Now these
strange squares with a dash through
them are tri-state controls. They let you
toggle from on, or true, to off, or false,
to default, which is what the dash means.
Now to see what that means, I'm
going to toggle the checkable property.
So when it's ticked, we get a checkbox next
to the top 10, so I'm going to click on
that now. You can see that we've got that.
We click on it again, we get a radio
button. Click on the dash again, we get
the default, and back again, so the tick
gives us the radio button. And notice there's
a bit of a delay when I tick it between
when it gets updated. By clicking it
turns off and back to default again. But
the one we would want would be checked,
and we want that one because that's
going to be the default for this
application - so by default, it's going to
used the Top 10 feeds. Alright, so before
actually writing any code to respond to
these new items, I'm going to reformat
the text. Let's go ahead and do that - or
reformat code, I should say, and go back
to the designer. So what we'll do is,
we'll add the code for these options in
the next video. So although they won't be
doing anything, we can actually
run the app to make sure that those
options appear in the menu. So let's
actually do it - run the app - bearing in
mind, of course, that nothing should work
when we try to tap them, because we
haven't written the code or added
the code to do that yet. And you can see
now, Top 10 is the default. And when I
click on it, nothing happens, again
because there's no code, but they're added to
the menu and it's looking good. Alright,
so I'll stop the video here and we'll
add the code to get those working, in the
next video.