This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
There's one final thing we need to complete this app: an icon! We'll use an icon from our designer and talk briefly about how Android manages images for different types of screens.
Downloads
Documentation
- Android Iconography - Information about designing app and other icons
- Devices and Displays
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
And that little thing is an app icon,
check out the mockups.
0:00
We've got this cool,
semi-transparent icon and
0:04
it's really simple to add to our project.
0:07
Download the zip file linked below
this video in the teachers notes.
0:09
And once it downloads, go ahead and
unzip it wherever you'd like.
0:13
Now don't be alarmed by the fact that
there's more than one folder in here.
0:17
We'll talk more about these different
folders in a later project.
0:20
But the basic idea is that we provide
images at different resolutions
0:24
to make sure our app looks good
on a wide range of devices.
0:27
Now if we jump back
into Android Studio and
0:31
open the project pane,
here in the res directory, if we
0:34
expand the mipmap folder we can see the
same folders that we saw in our download.
0:38
Well, kind of, if we open our
project in Windows Explorer or
0:43
Mac Finder and
navigate to the res directory,
0:48
We can indeed see each of the mipmap
folders that we have in our download.
0:56
But since they each contain the same
files, Android Studio simplifies things.
1:01
Rather than showing us all
the different mipmap folders,
1:07
we only see one folder per image,
containing all the versions of that image.
1:10
And the part in parentheses tells us which
mipmap folder that image is actually in.
1:16
The mipmap directories in
a project mostly contain icons.
1:20
And the different suffixes have to do with
the different resolutions that Android
1:24
can run on.
1:29
hdpi is for high definition,
mdpi is for medium definition,
1:29
xh is for extra high definition,
and xxh is, well you get the idea.
1:34
If we wanted to,
1:39
we could just provide one set of images
at whatever resolution we choose.
1:40
And the Android operating system is smart
enough to scale it for different devices.
1:45
But the best practice is to
provide multiple resolutions that
1:49
we scale ourselves,
to give the best user experience,
1:52
no matter what device the user is using.
1:56
Let's take a look at what we
currently have in these folders.
1:58
If we double-click on one of these
images we can open it up right here.
2:01
This is the icon we're currently using,
the default icon.
2:06
It's created when you
first create a project,
2:09
all we need to do is overwrite
this file with our new one.
2:12
Let's close this and then find our icon
in the hdpi folder you downloaded.
2:16
Then let's copy it and
paste it into the mipmap folder.
2:25
Then pick the mipmap-hdpi folder and
hit OK.
2:32
Hit OK again to select the new name.
2:37
And the hit Overwrite to
overwrite the default icon.
2:41
All right, that was the hdpi icon, and
2:44
if we open it, sure enough,
there's our new icon.
2:49
Now let's do the same thing for
each of the other icons.
2:55
So we've got mdpi,
we'll copy that, paste it in here.
3:00
Pick mdpi, OK, and Overwrite.
3:05
Then xhdpi, copy that, and I wonder if
we can just pitch that over this one.
3:12
Looks like we can that's cool.
3:22
Then xx, Paste it over the other xx.
3:27
Overwrite, and,
3:32
finally, xxxhdpi.
3:36
Copy that one,
paste it over its counterpart, and hit OK.
3:41
For the last step,
3:50
it looks like Android Studios given
us an ic_launcher_round folder.
3:51
In Android, you can specify
both square and round icons.
3:56
However, for this project,
we only have square icons.
4:01
So let's delete this folder,
Then let's open up our AndroidManifest,
4:04
And let's delete the line where
we set the round icon property.
4:13
Finally, we need to test
that we can see our icon.
4:19
Let's run the app.
4:22
To see our icon, we can just go
back to the home screen, and
4:28
then open the app launcher.
4:32
And there it is,
Fun Facts with our new icon.
4:36
And if we drag it out onto the home
screen, Thanks to its transparency,
4:39
we can see some of
the background showing through.
4:45
Great job!
4:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up