G'day everyone and welcome back. The next dialogue that we'll add to the app
is an About dialogue, to give some basic information about the app; version
number and so forth. We're going to display the app's icon in the dialogue, to
provide a consistent look throughout the app, but the standard Android launcher
icon gets a bit boring if everybody uses it. In this video, we'll look at how to
add our very own icon. It used to be very simple - you just copied the icon files
into the drawable directories. Google now suggest using the mipmap directories instead.
Things are further complicated by the new adaptive icons that we
introduced in Android Oreo API 26.
Fortunately, Android studio makes it all
quite easy. Android studio includes Image Assets Studio, to create our image assets
for our apps. We're going to need an image to use, and there are a number of
sites to provide images in the public domain. That means you're free to use
them in your projects. One such site is https://publicdomainvectors.org.
They have a good selection of images in various categories. For this
app we downloaded a public domain icon from https://openclipart.org.
Unfortunately, as you can see, the owners of that site decided to do some
maintenance, just at the time when I came to record the video. That does happen.
Sites on the internet go offline for maintenance from time to time. The one we
chose to base our launcher icon on is analog clock. Hopefully, the site will
be back up when you're watching this video. We changed the icon slightly and you can
download it from the resources for this video.
Now, before you download any resources from the internet, to use in your own programs,
it's important to check the License Agreement. I'll switch back to
the publicdomainvectors.org site, and right at the bottom of the page is a
link to a license for this image.
The links will often be called license, but
this one's called Public domain. And that's about as permissive a license as
you'll find. Basically you can do just about anything you can think of doing
with these images. One thing you certainly should not do is pass them off
as your own work. You are free to modify them to form the basis of another image,
though. All we've done is color it in. So I'm not going to claim any credit for
our icon. You can download the base image file from the resources section of this video.
Download the file, and make a note of where you've downloaded it to to.
To launch Image Assets Studio, right click on the res folder in the project pane, and
choose New, Image Asset.
Over on the right hand side are previews of all the icons
that Image Asset Studio can generate for us. The top row shows an
adaptive icon in a circle, squircle, rounded square and square shapes.
On Android Oreo and above, the launcher will choose the shape to match the
normal icons on the device. Samsung launchers, for example, often use a squircle.
You can read more about adaptive icons
at developer.android.com/guides/practices/ui_guidelines/icon_design_adaptive
You'll find some other links in there, to articles explaining why google have
switched to adaptive icons.
Image Asset Studio also generates a 512 by 512 icon
for you to use in the Google Play Store. Alright, we're changing the default app
icon, so we don't have to change any of the names. We want to use our own icon,
though, so make sure that the asset type is set to Image.
To select a new image,
click the folder next to path for the Source Asset.
Browse to where you saved our clock icon that you downloaded.
Be careful there, because Assets Studio will
display the Android studio templates directory to begin with.
Once you've loaded the icon,
you'll have to wait a while for Android Studio to convert and
render all the different icons. That can take a while, even on a fast computer, so
be patient. We'll come back to this foreground layer. I want to change the
background layer first, because the current background makes it hard to see
the circular guideline that we'll want. Click the background layer tab
and we're going to set the background to white.
You may have a background image that you
want to use, as Google are doing here, but often you'll change the background
source asset to color and use a solid color instead. After changing the asset
type to color, click the color box and choose white by typing F-F-F-F-F-F,
that six F's, in the box on the far right. You could enter 255 for each of the RGB
colors, or 0 for H and S, if you prefer working with HSB. You can
switch between them using the drop-down. I'm not a graphic artist and I prefer
working with red, green, blue, rather than hue, saturation and brightness, but the
choice is yours. Choose the color and our clock's displayed on the white background.
Back in the foreground layer, it's easier to see the SafeZone guideline now.
Use the resize slider to shrink the image until it fits inside the circular marker.
A size of about 60% should fit within the guide, but obviously that depends on
the icon file you've used. Alright, click Next when you've finished setting
the size up, and Asset Studio now shows us all the files that it's going to change.
We've got a warning because our existing icon files are going to be
overwritten, but we didn't want that stock Android icon anyway. You'll get a
chance to check out the various files that it'll produce.
At the top is the ic_launcher_web,
which is a 512 by 512 image for use on your
website and the Play Store. The next one's probably not obvious. In res/values
is an XML file that defines the color for our background,
ic_launcher_background.xml. If you click it
you'll see that it's just a standard color declaration.
In each of the mipmap-x directories, such as mipmap-xxxhdpi,
we've got a bit of duplication.
ic_launcher.png is used for devices before Oreo.
Asset Studio is going to create those files because we asked for legacy icons.
I'll launch Asset Studio again in a moment and you'll see where that was requested.
ic_ launcher_foreground is used on Oreo and later,
and you'll see it referenced in the ic_launcher.xml file
Click on ic_launcher.xml. You can make
the window wider, if you need to to see the full XML over on the right.
Notice that the background is the color XML file and the foreground will be the
ic_launcher_foreground image for the devices screen
resolution. Some launchers will request a round icon instead, which results in
three copies of the icon in each mipmap directory. Don't worry that this is going
to make your APK file larger. When users download your app from the Play Store,
Google only send down assets that apply for the device that they are using.
Okay, click finish and Asset Studio generates the files for us.
You can see the new files in res/mipmap.
Double-click an icon, to view the image in Android Studio.
The mdpi icon looks a bit blurry, but I'm viewing it on a high resolution
Apple monitor. Use the minus button to shrink it down a bit, to get a more
realistic idea of what it will look like on a low resolution phone,
and it's not that bad. The anydpi - v26 icon appears as XML
There's a preview tab over on the far right, that will show what Android will
display on Oreo and higher. It looks pretty good,
even on my high-res monitor. Asset Studio creates images at different sizes, so
they'll look good on the screens that they'll appear on. Asset Studio is very
visual and you can normally see the effect that a change will have, as you
experiment with it. I'll finish this video by going back in.
Right-click the res folder and choose New, Image Asset again.
Notice it's remembered your settings from last time. I didn't mention that first drop-down
when we came here earlier. You can choose which icon type you want to generate.
Google explain all this at developer.android.com/studio/write/image-asset-studio
What's not obvious is that you
can come back in here and choose Launcher icons legacy only, to generate
just the legacy icon. That's the ic_launcher.png files.
Any adaptive icons that you've already generated won't be overwritten.
Why might you want to do that? I'll select Launcher icons adaptive and legacy for the icon type,
and then switch to the background layer. We specified a color for the
background but you can use a transparent image instead. That allows you to have
icons with transparent backgrounds, but only on Oreo and above. If you want to
generate icons with transparent backgrounds for earlier versions, you'll
need to regenerate the legacy icons. I'll do that before finishing this video.
Change the icon type to Launcher icons legacy only,
and then change the asset type to image.
Use the browser at the right of path to
browse to the clock icon file we downloaded earlier.
Be patient again here.
It can take Asset Studio a while to render the images, even on a fast system.
When they load, notice they've got a square background. Change the shape to none,
and wait again. Now we've got icons with a transparent background. Click next,
and you'll see that only the legacy icons, the ic_launcher.png files,
will be generated and replaced. I don't want to save them
so I'm going to click cancel. I suggest you do the same.
You can come back in here later
and generate the legacy icons again, if you want to see the difference
on a pre-Oreo emulator. The app will look the same but the launcher icon on
the device will be different. I'll stop this video here. In the next video, we'll
create the layout for our About dialogue. See you in that one.