Good day, everyone. Welcome back.
Our app's going to allow the user to filter the records
to display just a single day or the timings for a whole week.
We'll also give them a better way to delete their old timing data.
To do that, we'll provide the report screen with its own menu,
containing three options.
We've already seen how to create menus so I'm not going to spend time on the details.
What i will do though is to take this opportunity
to show you how to use vector graphics for the icons in your menus.
We've seen image asset studio earlier
when we used it to create the app icons.
When we created the app icons android studio generated
png images at different resolutions.
We can see them in the res/bitmap folder.
The png files are in ic_launcher.
If you're using bitmap images, png, jpg
and so forth,
you should provide the image at different resolutions.
That makes them display well on different density screens.
The reason for needing to provide images at different resolutions
is that png and jpg images don't scale very well.
We can demonstrate that by viewing the mdpi image.
You can view the images in android studio
by double clicking to open them.
The mdpi image has a resolution of 48 x 48 pixels.
The file size is 2.62 kilobytes,
which we can see at the top right of the image when it's opened.
The image will look fine on a low res device.
As we can see if I use the minus button a couple of times to shrink it down.
That's fine. But on a high res device,
it won't look very good.
I'll use the plus button a few times to enlarge it.
By the way, if it disappears when you try that,
use the 1:1 button
to size it to normal first.
Sometimes the image preview plays up a bit.
When it's larger, the image gets very grainy.
The circular clock face, for example, is quite steppy
rather than being a smooth circle.
Including different resolution images is a good solution
to coping with vastly different device screens,
but it comes at a cost.
We're deploying the same image five times
that obviously takes up more room on the device
and makes our apk file larger.
Google do some clever things with compression and so on.
There are a couple of very good videos from google IO 2016
that are worth watching.
These presentations were given by Google's engineers
the people who work on android code.
They definitely know how it all works because they wrote it.
So those IO videos are a great way to learn more about android.
One video that talks about image formats in image compression
is at www.youtube.com/watch?v=
why don't I just show you. It's probably easier.
That's well worth watching, especially if you use a lot of images in your app.
The lecture after that is also interesting.
Wojtek Kalicinski talks about api file sizes
and how android studio tries to compress them.
That covers images as well,
and there's also a good introduction to what's going on inside your apk file.
Okay. Why am I telling you all this?
We're going to need some icons for our menu items,
and android studio has a neat feature to produce vector drawables.
Unlike the bitmap images we've been using so far,
vector drawables work by describing how an image should be drawn
rather than storing all the pictures needed to draw it.
That makes them great for things like icons.
You wouldn't use vector drawables for photographs or complex images
but they can save a lot of space for simpler images like icons.
Because vector drawables describe how the image should be drawn,
it can scale up or down to different resolutions.
Importantly, it scales without losing quality.
We've seen image asset studio earlier
when we used it to generate the app icon.
Vector asset studio is launched in a similar way.
Right click on the res folder, and choose New, Vector Asset.
Android studio loads up with the default android icon.
This isn't at all obvious,
but you can choose any of the material design icons
by clicking on the small android icon,
the one just below the name field.
There's a host of pre-defined icons available
categorized to make them easier to find.
If your icon is going to represent a standard android feature,
take a look in here before taking time to create your own icon.
We're going to let the user toggle between showing one day
or a full week on the report.
Two icons that will be good for these options
are in the image category.
Click the filter one icon,
then click okay.
You can change the name
but I like to leave them unchanged.
The names are a bit horrible, so certainly rename them if you want.
It's useful to have a reminder of where they came from
and what the google original's called,
which is why I tend to leave the name as it is.
Click next,
and the drawable folder should already be selected.
If it isn't, select it, then click finish.
The vector drawable for the icon's being created in our drawable folder.
When you double click to open this file,
we get the xml that's used to define what the image will look like.
Fortunately, there's a preview available.
Click the preview button on the far right of the window to see the image.
If you could zoom this vector image up, the lines would remain sharp.
There's none of the stepping that we got with the bitmap image.
Google have removed the zoom feature from this preview,
but you can see the icons displaying at a large size
and it has very smooth lines.
Okay. Let's create the other drawables we'll need,
then we'll look at how to use them in our app.
Close all the images,
then right click on the res folder and choose
New, Vector Asset again.
Click the icon,
select filter 7 from the image category,
and click okay.
The icon that was the stock android icon
will probably be filter 1 now.
Asset studio remembers the last image that you selected. That's fine.
Click whatever icon is showing and select the new one.
The category selection seems to be a bit unreliable,
but the icons are arranged alphabetically
if you don't get the right category appearing straight away.
Leave the name the same, and click next.
It should be placed in the drawable folder automatically, so click finish.
Repeat the process to choose the date range icon
from the action category, then click OK.
Before I move on, we've got clip art selected in the asset type.
You can also convert an existing svg file or a psd file,
which is the format produced by adobe photoshop.
That lets you create your own vector graphics and use them in your android apps.
I won't do this but you can select local file
and then browse to your existing images.
I'll say a bit more about svg files in a moment.
For now, make sure you've clicked next and finish.
The last one is delete, also from the action category.
We've got our four icons now.
And if we're targeting api21 and above,
that's all we need to do.
Support for vector drawables was added in api21,
but we're targeting api17.
Google have included vector drawable support though in the support library.
It does need a small change to our build files
and that's explained in the documentation.
There's a guide to vector drawables at
developer.android.com/studio/write
/vector-asset-studio.html.
It's worth having a read through that page.
I'll point out some important bits now.
Api20 and below don't support vector drawables directly.
If we leave our build set as it is,
android studio will use the xml files to create
png files at each of the resolutions from
mdpi to xxxhdpi.
That can save us time having to create all those variants manually,
but it will mean that there will be five different copies
of the png file in our apk.
So that's not bad, we save some time but it's not perfect.
That process is described in the about vector asset studio section
at the start of this guide.
It gives us two options.
The first is to do nothing
and have five different png files generated for us
just as I've mentioned.
The other option involves changing the build.gradle file.
We can tell it to use a support library
and all android versions back to api7
can then use the vector drawables without having copies of png files.
The link in the document support library backward compatibility
shows the change we need make.
Copy that line from the guide.
Then open build.gradle,
the app module
and paste the line in at the end of the DefaultConfig section.
Whenever you change the build files, you'll get a prompt to sync the project.
Click the Sync Now link at the top right
and gradle will rebuild the project.
We're done here,
so we can close build.gradle.
There's one other thing I want to say about these vector drawables.
We saw that the vector asset studio can import
svg files and convert them to android's vector drawable format.
Vector drawable are google's own format for vector graphics,
the svg specification, which stands for scalable vector graphics,
is quite complex, and Google have created their own format
that's a lot simpler.
That means you can't include svg images directly in your app.
You have to use android studio to convert them into Google's
vector drawable format.
If your svg image contains things that can't be converted,
asset studio will let you know.
Okay. In the next video,
we'll create the menus that will use these vector drawables in their icons.
I'll see you there.