Alright, so so far we've created our
Content Provider and the Contracts class
that goes with it, and we can also create
query, update and delete records. So the
database side of things is pretty much
done. Now as I've mentioned
previously, there is one small change we
need to make to our Content Provider, but
I'm saving that until we need it. In the
last video we created the main menu for
our app, so we're now ready to start
adding the functionality to those menu
options. First though, we need some
layouts to display the data and provide
the user interface. The main screen for
the app is going to be a RecyclerView,
showing a list of all the tasks in the
database, with a TextView above it to
show which task is currently being timed.
So let's start by setting that up in
fragment_main. So I'm going to
open up my layouts folder under res,
and we'll double click fragment
underscore main.xml, and we'll also
close down the Project pane as well
to give ourselves a bit more space. Now
as it turns out we've already got a
TextView, so we can start by modifying
that one rather than adding another. So
I'm going to click on the TextView -
we could have done it in the component
tree. We're going to go back to our regular set of
attributes, and I'm going to give it the
ID current_task because
that's what ultimately it's going to
display in that TextView. Now, in fact,
this may not be a good choice of name
when using Kotlin. Google's Java examples
in tutorials use names like that because
that's a common way to name things when
using xml. That's fine. We are after all
just using this designer to produce
an XML file, but things have changed a
bit with Kotlin. We no longer have to
litter our code with define view by ID
calls that we had to do when using Java.
Now we'll often be using synthetic imports
instead, which means that we'll be using
these IDs as variable names in our code.
Now this is all pretty new. Google only
announced full support for Kotlin last
year, but at this year's Google I/O 2018,
the vast majority of the code samples they
showed were Kotlin, not Java. So that's
exciting for us as Kotlin
programmers. However it's going to take a
while for things to catch up. Now as
an example, Google have got a Kotlin
style sheet. I'm just going to bring that
up and load that into a browser.
So let's scroll down to the naming section
and specifically, I'm going to find the
guide on how we should name our
variables in Kotlin, and they refer to it
as the Non-constant names.
Here's the naming section I was talking about -
Constant names, and here we go under
Non-constant names. So you can see there
that they're suggesting we should use
camelCase, but if we use lowercase
with underscores for the IDS in our XML,
those names are going to be used for our
variables in the code. Now Google's
Kotlin style guide doesn't consider that
aspect of things - not at the moment at
least. So what should we do here? Well
without any clear guidelines, I'd suggest
doing what you're most comfortable with.
Obviously if you're working for a
company or on a project that does have
clear guidelines, then stick to the
guidelines from the company or the
project. Here though, I'm going to stick
with current_task, and what
I'll do is try to predict the future a
bit here, and I know that these IDs will
appear, be appearing in my Kotlin code.
When they do, seeing variable names with
underscores is going to feel strange. Now
I suspect that JetBrains will work on
this, and that the synthetic imports will
change the names to camelCase for us in
a future version of Android Studio. But
if that doesn't happen, the underscores
will serve as a reminder that the
variables are referring to layout
widgets. And in terms of what the Kotlin
community thinks about this, it's split
about 50/50 on this. In other words, half
of the developers are using camelCase
and the other half are sticking with
underscores. So whatever you choose you
won't be alone. Alright so we'll go
back to Android Studio now, and
what we need this TextView to be
constrained is, at the top left and
right edges of the layout, with all
margins set to 8dp. So I'm just going to
select it. I'm not going to change these
because we can see here that we've got
constraints already added for all four -
left, right, top and bottom - but what I'm
going to do though, is delete the bottom
constraint and you'll see why later in
the video. And what I am going to do here
is make sure that we've got 8dp set for
the top left and right margins. So I'm
going to allow it to occupy the full
width of the screen if it needs to, and
that's by setting the layout_
width to match_constraint. Now the
layout_height should
be set to wrap_content so that it can
grow if necessary, and you can see there that
layout_height is already
set to that. Now we're going to use a
string resource for the text property, so
I'm going to come over here and click on
the ellipsis to the right of the text
property. Now remember that the text
below that, with the little picture of
the paintbrush there that used to be a
wrench, that's used to specify text that
will only display in the layout so we
don't want to use that one. So I'm going to
click on Add new resource, New string
Value. I'm going to call this one no
_task_message, and
for the value I'm going to put No Task
Selected. Press ENTER there. Now under
textAppearance, I'm going to expand that
if it's not already expanded and I'm
going to change the text size. I'm going
to make that 22sps - I'm going to
select the 24 and change it to 22. I could
have just typed in the 22 there. I'm also
going to change the textStyle to bold.
Now in terms of the textColor, notice here
that it's not actually showing anything,
but it may be showing as textColor
Tertiary. But if not, the full value we
want is basically the android : attr
slash textColorTertiary. But rather
than typing that in, it's probably easier
to use the ellipsis over here on the
right hand side. Select that and expand
Theme attributes, and then we'll do a search
for textColorTertiary. We can just type
in, just type tertiary to get that for
us quickly, and the one we want here is this
one - android:textColorTertiary. Now we
have seen the tertiary text color set to
the accent color, the same as the
floating action button. So if that
happens don't worry. We have got full
control over these things and we'll be
looking at changing it all later anyway.
I'm going to leave it as it is though, by
there, by just clicking on OK, noting
that's now been updated in the text
Color, and because doing that gives us a
bit more control to make this text stand
out compared to everything else on the
screen. And we'll see that when we come
to play with the material design styling.
Now I'm not going to suggest you do
what I'm about to do, but if we quickly
open up styles.xml, so I can
just open the
Project pane and go into our values folder -
double-click styles.xml. Just below
the colorAccent, and come into there and
I can type item name equals android
colon textColorTertiary, and close off
that tag and then set it to the value of
color/colorAccent. So we
can do that if we wish, and now if we go
back to our fragment we can see that
we've got a nice, well actually it's not very
nice, it's fairly hideous. Basically
the text is now a hideous color, but again
we can play around with that a little
bit later. Alright so moving on though,
I'm going to close down the Project pane
again. The next thing we need now is a
RecyclerView, so I'm just going to come
over here and select Containers, and drag a
RecyclerView down below the TextView.
And what we want to do with this one is,
we want to constrain it on all sides -
the left hand side, the right and the
bottom. I'm just going to click on these
buttons up here. Then for the top one I'm
just going to select it and make sure
that it's constrained against our Text
View. So again, you want to make sure that
that's now our constraint to the Text
View and not to the top of the screen.
And the other thing to do is make sure
there's an 8dp margin on all four sides,
as you can see there is for me there now.
And the other thing we want to do is once we've
set those constraints, we want to make
sure that both the layout width and
layout height are set to match_
constraint, like so. So at this point
that's our RecyclerView filling the
screen. So the last thing now is to set
its ID, so let's go ahead and do that.
We're going to call it task_
list. Alright, so the second to last step
now is, I'm also going to give it a
vertical scroll bar. I'm going to click
into here, in our scrollbars under Recycler
View, click on vertical and click on OK.
And then I need to reformat the XML,
so I'm just going to do that. Select the
XML and reformat it, as I always do. Al
right. So that's our RecyclerView
completed. It's going to need a view to
display the task details in, so let's go
ahead and create that. So what I'm going
to do is go again to my layout folder,
and right-click New, Layout resource file,
and we're going to call this one task
_list_items. Now
we need two TextView widgets and two image
buttons. So I'm going to start with the
TextViews, and I'll put in the first one
now - I'll add the first one - doesn't
really matter where we put it on the
screen at the moment. Now this one's
going to display the task name, so it's
ID is going to be tli_name.
Now I'm prefixing the IDs in this layout
with tli for task list items. That way
there'll be no confusion if you want to
use a similar ID in another layout. Now
I'm not going to create constraints
until all four widgets are in the layout,
but I will configure each widget before
we move on to the next one. Now we don't
need any text in the TextViews, so the
text property over here to the right can
be cleared and I'll do that now. But what I'm
going to do is add some sample text to
the tool text property so that we can
see where the widgets are, and also get
an idea of what they'll look like when the
app's running. So I'm going to come over and select
the text, the tool text which is the next
option there, and then I'm going to
actually specify this as TaskTimer
Application. Okay. Now the text size, let's
change that, and we'll change that to 22
sp. I'm also going to set it to bold. Now
in terms of the textColor itself, that
should be set to the primary text color.
And we can set that by coming over here
and clicking on the ellipsis to the
right hand side of textColor,
typing primary up here in the search box
and then selecting Theme attributes,
making sure that's expanded, and the one
we want here is android:textColor
Primary. Then you select that and click OK, and
again we want to make sure, under
textile, that bold is selected. Alright, so
let's drop the next TextView onto
the screen, just below that somewhere, and
let's start with the ID. We'll call this
one tli_description, and
we're going to delete the regular text,
and under the tool text we're going to
type in Write course notes and video for
the TaskTimer application. Now
technically it doesn't matter if you don't
clear out the text property, because
that's going to be set in the code
anyway. But I like to clear it and you
saw me do that, because it removes the
warnings about string resources, for one
thing. Alright, and we want to change
the color, our textColor for this tli
description, to secondary, to textColor
Secondary. So I'm going to just expand
Theme attributes, type in secondary and
select android:textColor
Secondary. Alright so moving on now.
The next thing we're going to do is add
our image buttons. The image button is found
in the buttons category, and I'll close
down the Project pane again.
So Button, imageButton - I'm going to drag
one of those on - and I'm putting the
image buttons next to each other, or will
be, below the two TextViews for now. And
really it doesn't matter where you're
initially dropping things in this layout,
but I like to keep space around the
widgets just to make it easier to set
the constraints later. So anyway, we
notice, you notice that when I dropped
an image button onto the layout, this
dialogue's popped up automatically to
enable me to choose the dialogue. So I need
to make sure Drawable's selected, which
it is. Then I'm going to type edit into
the search box, and here what we want to
do is expand android, and the option we
won here is this ic_underscore menu and
_edit. So click OK.
So in terms of the ID let's set that.
We're going to set that to tli_
edit, and we should add a content
Description as well so let's do that.
This is to make the app accessible to
people with difficulty seeing. So we're
going to create a new string resource
for that. So let's go ahead and do that,
and the resource name we're going to go
with is edit_button_
description. And the resource value,
I'm going to enter something like
Button to edit a tasks details. Alright
so that's the first image button. Let's
drag another image button now
over here to the right, and for this one
I'm going to expand android again, and
the one we want to search for here, yeah
we'll just type in the word delete. We
want this
ic_menu_
delete. Select that, and the ID for this
one will be tli_delete. And
let's create a contentDescription as
well, new string resource, and we'll call
the resource name delete_
button_description, and for the
resource value, Button to delete a task.
Alright so at this point now, we're
actually done adding the widgets. We're
going to end the video here, then in the
next video we need to add the
constraints, or create the constraints
for each one of these widgets. So I'll
see you in the next video.