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.
0:00
Check out the markups.
0:03
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 and the teacher's notes and
0:09
once it downloads go ahead and
unzip it wherever you'd like.
0:13
Now, don't be alarmed that there's
more than one folder in here.
0:18
We'll talk more about these different
folders in a later project.
0:21
But the basic idea is
that we provide images at
0:24
different resolutions to make sure our app
looks good on a wide range of devices.
0:27
Now if we jump back into Android Studio,
here in the res directory, if we
0:32
expand the mipmap folder, we can see the
same folders that we saw in our download.
0:37
Well, kind of.
0:43
If we open our project in
Windows Explorer or Mac Finder and
0:44
navigate to the res directory.
0:48
We can indeed see each of the mipmap
folders that we saw on our download.
0:49
But since they each contain the same
files, Android Studio simplifies things.
0:54
Rather than showing all
the different mipmap folders,
0:59
we only see one folder per image
containing all the version of that image.
1:03
And the part in parenthesis tells us which
mipmap folder that image is actually in.
1:08
The mipmap directory is in a project
mostly containing icons, and the different
1:14
suffixes have to do with the different
resolutions that Android can run on.
1:19
hdpi is for high definition, mdpi is for
medium definition, xh is for
1:23
extra high definition, and
xxh, well, you get the idea.
1:28
If we wanted to,
1:32
we could just provide one set of images
at whatever resolution we choose.
1:33
And the Android operating system is smart
enough to scale it for different devices.
1:38
But the best practice is to provide
multiple resolutions that we
1:42
scale ourselves,
1:45
to give the best user experience no
matter what device the user is using.
1:47
Let's take a look at what we
currently have in these folders.
1:52
If we double click on one of these images,
we can open it up right here.
1:55
This is the icon that we're
currently using, the default icon.
2:00
It's created when you
first create a project.
2:04
All we need to do is overwrite
this file with our new one.
2:06
Let's close this and then find our icon
in the hdpi folder you downloaded.
2:10
Then let's copy it.
2:21
And paste it into the mipmap folder.
2:25
Then pick the mipmap hdpi folder and
hit OK, hit OK again.
2:29
And then hit Overwrite to
overwrite the default icon.
2:37
All right, that was the hdpi icon.
2:42
And if we open it, sure enough,
there's our new icon.
2:45
Now let's do the same thing for
each of the other icons.
2:49
Copy the mdpi icon and let's see if we
can just paste it right over this one.
2:58
All right, that looks like it worked.
3:08
So let's do the same thing for
the xhdpi icon.
3:17
Copy, paste, overwrite.
3:20
Xx, copy, paste, and overwrite.
3:27
And lastly, we've got triple x.
3:33
Paste and overwrite.
3:38
Looks good.
3:42
For the last step,
3:45
it looks like Android Studio has
given us an ic_launcher_round folder.
3:46
In Android, you can specify
both square and round icons.
3:50
However, for this project,
we only have square icons.
3:55
So lets delete this folder.
3:59
Then let's open up the AndroidManifest and
4:06
delete this line where we
set the roundIcon property.
4:09
Finally, we need to test
that we can see our icon.
4:15
Let's run the app.
4:18
To see our icon,
we can just go back to the home screen.
4:21
And if you haven't already dragged
yourself to the home screen,
4:25
you can open up the app launcher and
see it in the drawer.
4:28
Then you can drag it out to the home
screen, And see our new Fun Facts icon.
4:32
And thanks to its transparency, we can see
some of the background shining through.
4:40
Good job.
4:45
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