Now that we've got the database set up
to store an updateTask records, it's now
time to write the code so that we can
add new details and list the tasks. Now
to do that we're going to need a user
interface, so we're going to start in
this video by creating the menu that
we'll be using to perform the various
functions in our app. So I'm going to add
all the menu items in this video, rather
than jumping in and out of the menu
editor, and then we'll add the code for
each item as we need it in future videos.
Alright so we will start by going into
our res folder, into our menu subfolder,
and double-clicking menu_main.xml.
That's going to open up the menu
for our application, and I'm going to
close the project pane just to make a
bit more space, so that we'll be able to
see the attributes as well. It's going to
expand that out a little bit, and what we
want to do is, we want to start by
dragging another four menu item widgets
onto the layout. Mow personally, I find it
easier to drop them onto the component
tree than watching the guides to make
sure they go where I want. But it can be
hard to use the guides if the component
tree isn't wide enough, and that's
because it scrolls sideways, making it
hard to get things where you want them.
But again, it can be a good idea to close
down the project pane and make the
component tree wider as necessary. So I'm
going to place two menu items above the
existing settings item and two below, so
that we've got five in total. So I'm going to come
up here to the menu item and drag the
first one, and notice how it scrolled
sideways in, so I'm gonna make it a
little bit wider to see whether we can
avoid that happening again. I'll grab the
second one, and again I'm putting that
above the current settings, and I'm going
to add two below the action_settings as
well. Okay so there's our five as you
can see there, and I'll just move this back
to the left a bit so that we can increase the
size of this menu a little bit. Now
obviously we're altering a menu that was
created from the Android Studio template,
and the settings menu item was already
present, as you saw there. Now you may get
a strange effect, where the ordering
looks correct in the component tree but
settings still appear at the end of the
list in the designer. And you can see in
my case I've got a similar thing. I've
got Settings appearing down the bottom
here, and the
four items I added, even though you
saw me drag them into the correct place
in the component tree -
and in fact the component tree is showing
that - they're actually visually showing
in the wrong place. Now this isn't a bug -
it's because of an attribute that the
template sets. So if we select the
settings, the action_settings here, the
Settings menu item, then we go into our
extended attributes - we can see this - and
notice over here the orderinCategory.
So the template may have given this a
value of 100, as it has in my case. If it
hasn't for you though, enter 100 for this
orderinCategory attribute. When you do
that you'll see that Settings know goes to
the end of the list as it's currently
showing for me. So that orderin
Categorys attribute's used to order the
menu items. Now it can be useful if
you're adding items in code. You can use
that attribute to make sure the menu
item appears in the order that you
want in to. But we've actually put them in
the right order, so consequently we can
delete the value for orderinCategory
for our settings menu item. So I'm going
to go ahead and do that, press ENTER. And
you can see now that I've done that,
all our items are defaulting to
zero and because they all have the same
value, the items, the menu items, will
actually appear in the order we've got
them in the layout - the order that we've
added them in the component tree.
Now I had problems with the order
changing after reformatting the xml, so
it's a good idea to be explicit. So as
such we're going to give each of our
items an orderinCategory value. Now
we're going to start off using our first
menu item to add a new task, so I'm
going to click on that top menu item. I'm
going to come over here and under ID, I'm
going to give it a new ID, and we'll call
this one menumain_addTask.
We're going to create a new string
resource for the title, and for the
resource name we're going to go with
menutitle_addTask, and
for the resource value we'll go with
addTask. Now for the icon we'll use the
standard Android icon for adding a new
record. So I want to click on the
ellipsis over here to the right of the
icon attribute. You want to make sure that
driver was
selected as it is for me, and then we want to
do a search there for ic_menu
_add.
And notice when I do that it's popped up
over here on the right hand side, and I
can just click on OK. We've now added
that icon to our menu item. Now in terms
of the showAsAction, we're going to
expand that, and what we're going to use
there is, we'll use ifRoom. So I'll click on
that, noting that when I did that the
icon appeared up in the toolbar, appeared
over here in the toolbar, which is
correct. The other thing we are going to
do is set our orderinCategory to 10. We'll come
over here and click on that, 10, press
Enter. Now don't worry if it jumps around
in the display or disappears, or anything
of that nature.
It'll come right once we've set that
attribute for all five of our menu
items. Let's, for now, move on to the next
item, clicking on that in the component
tree, and this one is going to be used to
show our Durations Report. So I'm going
to go with an ID for this one, for
menumain_showDurations,
and the title, we'll create a string
resource. The resource name we're going to
go with is menutitle_show
Durations. That's menu items,
sorry menutitle_showDurations. And
the actual text - the resource value - we'll
go with Durations Report and press ENTER
there. Now you're probably starting to detect
a pattern in these IDs and resource
names. It doesn't really matter what you
call them, but using a standard prefix
like I have here, it's a lot easy to find
them if you have to look for them in the
string resources file. Now we're going
to have more than one menu, and that's
why I've started the IDs for this menu
with menu main so that we don't get
confused about which menu we're dealing
with later. Alright, so in terms of the icon
for our Durations Report, I'm going to
click on the ellipsis over here. I'm
going to do, we're going to use the ic
_menu_view. You can see that's
popped up there, click on OK. We're also
going to click on the showAsAction
attribute. We're going to click on if
Room
so that it will appear in the toolbar if
there's enough room for it to appear,
and we're going to change the orderinCategory
to 20 for this one.
Now don't worry too much here if the
item doesn't move up in the toolbar.
that's how the ifRoom setting works.
The preview though, doesn't always
work correctly, displaying icons in the
toolbar even if you rotate into
landscape, but it will work when we run
the app. Alright so moving on now. The
third menu item's already set to
settings, so I'm going to click on that
anyway, and you can see there that the ID
doesn't fit our naming pattern. Now
whether you decide to change the ID or
not really depends, to some extent, on the
structure of your app. In this app the
settings option will only appear on this
menu, so I'm going to change the ID to
keep it consistent. Now you may write an
app where the settings option appears on
all menus. In that case, setting the ID to
start with menu main wouldn't make sense.
In that scenario it would probably make
more sense to leave it as it is. Now
it'll be different to all the other menu
item IDs, but that will emphasize the
fact that it appears on more than one
menu. But in this particular example for
this app, I'm going to change the ID to
menumain_settings because
it's only going to appear in this menu.
So I'm going to go in there and make that change.
So it's going to be menumain underscore
settings. I'm going to create a new
string resource - the title - and we'll go
with menutitle_settings, and
for the resource value we'll go with the
word settings. Now we're not going to use
an icon for this option, and therefore
we're going to set the showAsAction. I'm
going to set that to never, which it's
currently selected to. Now that doesn't
mean though, that it's never shown. What it
means is that it won't appear in the
toolbar, and the user will have to expand
the menu to find it, which is fine in our
scenario. And I'm going to finish by
setting the orderinCategory, because
it's the third entry and we're
incrementing in tens to 30. Alright, so
the fourth menu item now, second to last
one, this is going to show an About
screen. So I'm going to select that in
the component tree, and we're going to go
with the ID
menumain_showAbout.
We're going to create a string resource,
and we'll go with menutitle underscore
showAbout, and the resource value, we're
going to type it in as taskTimer, About
TaskTimer. We're going to select an
icon for this one - I'll use the ellipsis -
and there's a good icon we can use here
called ic_menu
underscore info, that's underscore
details. I'm going to use that and click
on OK. In terms of the showAsAction
attribute, we're going to set that also
to ifRoom, and then we'll finish off by
setting the orderinCategory to 40. Al
right so that brings us now to the last
item. Now this one's a little bit
different and that's because the users
of this app will never see it. So let's
set it up and then I'll explain what
it's for. So I'm going to select it over
here in the component tree. For the ID
we're going to go with menumain
underscore generate, and for the title, we'll
create a string resource again, menu
title_generate, and the
resource value will be Generate data.
Press enter there. Now we're not going to
have an icon for this option either, and
it'll only appear when the main's
expanded. So therefore we're going to set
the showAsAction to never, making sure
that that's checked, which it is now, and
I'm going to set the orderinCategory to 50.
Now the other thing we're going to do
here for this particular item, is we're
going to set its visible property. We
don't normally want this item to appear
in the menu, so we're going to set it to
an invisible, while making sure down here
that the tri-state visible property is
unchecked, like so. Notice that it disappeared
from the menu when I did that. And just
out of interest if I click it again,
that's enabled. Click it to two, make it
disabled, and basically if you click it
again this little dash there, that means
the setting will use its default value,
which at the moment is visible for this
property. So in our case we don't want
it to be visible. I'm checking it again,
and checking it until it's
actually unchecked and it disappears from the
menu. So basically, here a tick means visible
and not having a tick means it's
invisible. And if we have a quick look at
the xml, we can see that Android visible
is now set to false down here, for our
mainmenu_generate. Now when
you're using a database in your app you'll
need to test it with some test data.
Now typing all that in can be very
time-consuming, so we'll be creating a
class to generate a load of random test
data a bit later in this section. Once
we've written that class we'll add some
code to enable this option, so that we
can generate thousands of test timings
just to make sure that the reports work
okay. Alright, so at this point that's the
main menu complete, but there is actually
a problem with it. Now we've seen this
before in earlier apps so you may
remember what it is. What we didn't do
earlier was run the app without fixing
the issue, so I'm going to leave it until
we've seen what happens when we don't
fix it. Now before we can run the app we
need to fix an error, though, in Main
Activity. So I'm going to bring back the
project pane and then open MainActivity.
So you may not actually see an error
here straight away, so you may need to
Build - in my case I have to do that - and
select Build and rebuild the project,
and it should pop up after we've done
that. And you can see that we've got an error
here, and if we scroll down to the bottom
and have a look,
the error's in the onOptionsItemSelected
function, and that's because we changed
the ID action_settings for
the Settings menu item.
So we'll correct that now - that should be
called menumain_settings.
Once you've corrected that we can now
run the app and see our menus. Let's go
ahead and do that. Now you can see here
that the menu's appearing okay for me, but
you may not have any icons on the
toolbar. You might have to expand the
menu up here to see any options. Now there's
clearly enough room over here in the
toolbar, so you might be wondering why
aren't the icons showing? And again,
that's something that may be popping up
for you, but in my case that's not doing
it - it's actually working fine. The reason
for this problem was that some versions
of Android Studio incorrectly used the
Android name space for the showAsAction
property. Now we've used the
compatibility library so the name space
should be app. Now if that happens and it
hasn't happened here - you can see it does
seem to have been fixed now - then we have
to edit the menu_main.xml
manually to fix that up. So if that does
happen for you, all the incorrect
properties will be highlighted in that
xml file. Android Studio knows they're
wrong, and when you hover the mouse over
one or more of the underlined properties,
it actually tells you what you should
use at column showAsAction with the
AppCompat library. Now if we just briefly
go back to our menu_main.xml,
then I go into text, you can see in my case
I've got app showAsAction set for each
one of these menu options and I haven't got
that problem. So it does look like Google
have actually fixed the issue which is
good. Alright I'm going to take this opportunity
just to reformat the XML. So you want to
make sure that your menu items appear in
the same order as mine, if you didn't
want to test your code and check your
code down the track to make sure it's
the same. Alright so getting back to our
app again. We haven't restarted - it's
still running in the background there.
Notice that there's no room at the
moment for the About icon to appear, and
it appears as a menu selection
there. But if I change this into landscape
mode, notice that it then does appear, and
when I click on the menu we've only got
just the Settings, which we've set to
never show on the toolbar. So clearly
things are actually working fine. And
notice as well that the Generate option
doesn't appear as well, and that's
correct because we set the visibility
for that to false. So that's good - users
won't be able to use it in the finished
version of the app, which of course is
exactly what we want here. And we'll look at
how to enable that menu, particular menu
item, later in this section. But at this
point I'll stop the video here, and in
the next one we're going to start
creating the layouts that we'll need to
list the tasks and to add new ones. so
I'll see you in the next video.