So up until this point in the course, when we've created applications, you've
just been using the default icon that comes with Android. And we can see that if
we go into our resources folder, into each of the drawable folders, we have that
icon, you know the little green icon.
It's just the generic application icon.
Now obviously if you are building an application, you are going to want your own
custom icon that the users see when they go into the App drawer, and this is
known as the launcher icon.
Now, I just want to highlight, on the STK site,
if we go into Dev Guide and then come down under Best Practices, to Icon Design,
it will list all of the various icons that exist in Android.
Launcher Icon is the most well-known one.
It's the icon that represents your application.
Menu icons are the ones that appear in option menus and context menus.
Status bar icons obviously show up in the status bar, and so on and on forth.
So you want to come in here and look at the design guidelines for all of these
different types of icons.
So we're going to focus on launcher icons.
I did want to highlight this Icon Templates pack, and this is essentially a set
of Photoshop files with some icons already created for you, which you can
override to create your own designs.
If we click on Launcher Icons, it will give us the details about how to
create launcher icons.
So now you will need a 512x512 icon to upload to the developer console.
This is used in various locations in the Android Market.
So in best practice, I like to start at that size, and then we can create
smaller sizes for the other sizes that are required. And here it will give you
some information about recommended styles and approaches to creating icons,
but you can see we're going to have to create three sizes in addition to the 512-pixel one.
For the high-density screens, we're going to want to create one that's 72x72;
for the medium DPI, it's going to be 48x48; and then for low-DPI screens, 36x36.
Now, you're probably wondering why couldn't I just put the density one in there,
and then the Android system will automatically create a scaled version for
those other screens?
Now that is absolutely true, but the problem is, first of all, you're going
to take a performance hit, because Android has to go through the business of scaling that.
The other thing is you might necessarily not want just a simple scale-down
for the smaller sizes.
You might want to sharpen it.
You may even want to change the contents of the icon, so you're definitely
recommended to create each of these individual versions.
Now if you look in the exercise files, in the assets folder, you'll see this
icon_template.psd, which I pulled out of that icon templates pack, and just
removed a couple of things.
But this is essentially a 512x512 Photoshop document, and here is an example
icon. So we have this square layer that contains this red square, and you can
see some guides in here.
So you don't want to create your icon all the way to the edge.
You want to give it some breathing room, so you basically don't want to have it
extend this outer guide.
Now this other little guide is if you want to put a drop shadow or glow around
it, which is also good, it will help it to pop out, depending on what the
background is on the user's phone.
And then we have another layer here called example_content, which just has a
letter A in here, and it has a light theme and a dark theme. We're just going
to use the light theme.
So what were going to want to do is we're going to want to first save out a
512x512 version of this.
I am not going to it here, because it is not really important to the project.
That is for when you are actually going to want to upload your application
to the Android Market.
What we are going to want to do is to create those various icons sizes, so
what I am going to do is I am going to go to Image > Image Size, and we're first
going to create the high-DPI icon, and this is going to be 72x72. And now we can
look at that. Okay, that looks pretty good.
We can actually turn off the guides so we can see it a little bit better.
So that looks good to me, so I am going to go File > Save for the Web. Now this
is important, because if you just save it as a PNG, normally, it will put some
metadata in there that you don't really want to have in there.
So you want to do Save for the Web. Okay.
So from here, I am going to want to choose PNG, and so I will get a nice alpha
channel. I am going to click Save, and now I am going to navigate to my
directory for my project.
So I am going to go to C:/Users/ Lee Brimelow/workspace/Icons/Resource
folder/ HDPI drawable folder, and all I am going to is I am going to
override that default icon.
So I will click Save. Yes, I want to replace it.
And now what I wanted to do is to basically create those other sizes.
Well, let's, really quick, see if that had an effect, because remember my emulator is emulating a high-DPI device.
And what I am going to do is I am going to refresh the project, right-click, and
refresh, just to make sure that icon shows up properly.
So I am going to run this, and we're not going to see it really when it
launches up, because we're not seeing the icon. But once it gets installed, we
will be able to tell. So we just have a blank project, but if I come out of here and go into the App
drawer, you can see I have my custom icon now for my application.
Remember, it's showing because I am emulating a high-DPI device, and this is
where it is handy to actually create different emulators for different screen
densities, and we can see how the icon will look on a medium-density screen and
a low-density screen.
So at this point, basically I want to go through and create the other sizes, so
I am going to go to image size, and I am going to create one 48x48, and that still looks good.
File > Save for the Web, PNG again, and now I want to save this into the
medium DPI directory,
so I am going to overwrite that. And then lastly, I am going to create the low-
DPI one, which is 36x36.
At this point, these are actually vectors, so there are actually scaling down
really nicely, but let's say this looks a little blurry.
Well, I could come in and I could tweak this so it looked good at the smaller size.
I don't have to it here, but I am just going to save this out into the low-DPI folder.
We will replace that, and now I have custom icons. Regardless of the type of
screen that user has, it's going to show the correct one.
If you are wondering where to set the icon for your application,
well, it's actually in the manifest file.
I'll just go to the code, and we can see in the application tag we have this
icon property, which we can set to any drawable that we have.
We just overrode those icons.
It's easy to do here. But definitely very simple, but very important that you
actually create these assets correctly, because again, you could just have
this icon here and nothing in the other two folders, but then you're relying
on the Android system to do the scaling for you, which doesn't always produce
the best results.