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
We use a special View for images in Android called, appropriately, ImageView. We will also talk about providing images for all sorts of screens.
Downloads
Related Links
GitHub Repo
Our app is going to use
two different screens.
0:00
Let's take a look at mock ups from our
designer to see what we're going to build.
0:02
Now, I love working with professional
designers on this kind of stuff,
0:06
but even if you don't have that luxury,
it's still worth your own time to
0:09
mock up how you want things to look
before you start building them in code.
0:13
One of our designers here at Treehouse
created some illustrations and
0:16
mock ups for us to use for this project.
0:19
These are the mock ups we'll be working
from, and this file is available for
0:21
you to download in the teachers
notes below this video.
0:25
All of the images, including the app icon,
are also available for download.
0:27
So grab those and then unzip the file.
0:31
Once we have them unzipped like this,
we're going to copy them into our project.
0:32
This can be slightly tricky so
make sure you follow along.
0:36
We want to take these into our
resources directory or res.
0:38
Now, it looks like we might be
able to just drag them in there.
0:41
If we drag them over and highlight it,
it seems like it's going to drop them in.
0:44
But it just doesn't work.
0:47
So instead we're going to have to copy
them in through the file structure itself.
0:49
If we right click on this res directory,
we can select Reveal in Finder or
0:53
Explorer for Windows, and
it will open up a window, and
0:57
here we see the res folder for
our project.
1:00
We can see that this structure here
closely aligns to what we see over here.
1:04
So now I just want to take
all of these folders and
1:08
drop them directly into the res folder.
1:10
If you get a warning like this to
overwrite, make sure you say yes to
1:14
overwrite the files that are in there, and
now all our files appear in our directory.
1:17
Notice that we have multiple drawable and
mipmap folders.
1:22
The DPI here at the end of each
suffix stands for dots per inch, and
1:26
it has to do with different densities of
screens for different types of devices.
1:31
So the letter before it, H,
stands for high, M stands for
1:35
medium, XH is for extra high, and so on.
1:39
So the higher we go, the more high
of a definition the screen is.
1:42
And we wanna provide different sized
images for different definitions.
1:44
Now we could just use one image and
let the Android device scale it as needed.
1:48
But it's best if we scale them
ourselves with graphic software.
1:52
This also means that we have
multiple versions of each image.
1:55
It sounds like overkill, but it just makes
sure that our app looks as good as it can,
1:58
on as many devices as possible.
2:01
Now, these mipmap folders down here
are simply a special folder for
2:03
the app icon itself.
2:07
It's the same idea as drawables, where we
provide icons at different resolutions.
2:08
Mipmaps are separate so that drawables
can be used more efficiently
2:13
when the app is installed on a device.
2:16
Check the teacher's notes for
2:18
a link that talks a bit more
about this if you're interested.
2:19
I should also mention that
the name drawable means that
2:22
these types of resources
are drawable on the screen.
2:24
So back in Android Studio, over here
in the res directory, we can expand and
2:28
see that our new images are now available.
2:31
They're organized by image,
which is a little bit easier,
2:34
and if we expand we can see
the different sizes of each one.
2:36
If we take a look in mipmap, we see that
there are two different app launchers.
2:40
The first one, ic_launcher,
2:43
is the default icon launcher
that we would see on a device.
2:45
And the second one is the round version
that we would see on some newer devices.
2:49
Okay, so let's use one of these images.
2:56
So here I've switched to the layout
file for our empty activity.
2:58
And we could start by deleting the text
HelloWorld that shows up here in
3:01
the center.
3:04
Go ahead and select it and
just hit Delete.
3:05
Now we want to find an image view
from over here in the palette.
3:08
We can search for it, or
if we expand this a little bit,
3:11
I'm going to pull this down, and
on the left click Images, and
3:13
here in the middle select ImageView, and
I'll drag it into the upper left corner.
3:17
And I'm gonna drag it so
3:22
that we have dotted lines
showing on the left and the top.
3:22
Now we get a helpful dialog to pick
one of our fresh drawable resources.
3:26
This first screen will be
the title page of our story.
3:29
So let's use the main_title image.
3:32
Notice at the bottom there are also some
Android system images that we can access
3:34
should we need them.
3:37
But let's click OK and
our image pops into our layout.
3:39
Let's set a couple properties and make
this fill the entire width of the screen.
3:42
I'm currently in the view
of all properties.
3:45
I'm gonna click to view fewer properties,
which is what it usually shows by default.
3:48
And up here I wanna change the ID to
something a little more relevant.
3:52
Let's call this titleImageView.
3:55
This is helpful if we have multiple
image views on the screen.
3:58
Next, let's change these layout,
width, and height parameters.
4:01
For the width, we want this to match
the width of the entire screen.
4:04
Now, normally, in the past,
we would have selected match_parent.
4:08
But watch, if we do that
inside of a constraint layout,
4:10
it automatically defaults to
the actual width of the screen itself.
4:13
Let's leave that alone for a moment.
4:17
But for the height, we wanna leave it
as wrap_content because we want it to
4:19
wrap the content of the image inside.
4:23
So we have a little bit of
padding around the image,
4:25
we'll take care of that in a moment.
4:27
But by selecting the height
as wrap_content,
4:29
it means that the image is going to be
stretched horizontally as far as it can,
4:31
but it won't be stretched vertically.
4:35
If we did that,
it would make the ImageView
4:37
container fill the entire screen.
4:38
In fact, here we can take a look
if we switch this to match_parent,
4:40
we see that the ImageView now expands
from the top to the bottom, and
4:43
the image inside is centered
in the middle by default.
4:46
So the actual presentation of the image
is controlled with a different parameter.
4:49
Before we switch layout height back,
4:53
let's talk about the image
scaleType that we see down here.
4:54
It's easier to see how it works with
some extra space in the ImageView.
4:58
So here we can select
a handful of options.
5:01
And these are different
ways to position and
5:03
stretch the image inside of the ImageView.
5:05
And this makes sense if you think about
it, an ImageView may be laid out on
5:06
a screen a certain way to take up maybe
all of the screen or half the screen.
5:10
But we're dealing with
different sized images, and
5:14
we may want to scale them within that
ImageView in a bunch of different ways.
5:16
We can try a few of these different
options to see what they might do.
5:19
So if I click fitStart,
5:22
it's going to start the image
here at the top of the ImageView.
5:23
Then if I click fitEnd,
it'll move it to the end of the ImageView.
5:27
Let's try something like centerCrop.
5:31
It will center the image and
make sure it fills up the entire view and
5:32
crop whatever is left.
5:36
Now we want to leave a little bit
of room here at the bottom for
5:38
some additional controls.
5:40
So let's set the scaleType to fitXY,
which means it will fit the X and
5:42
Y of the ImageView,
the length and the width.
5:46
And let's flip our layout
height back to wrap_content.
5:50
This is one way to make sure that our
image maintains its aspect ratio,
5:54
which is the ratio of the length
compared to the width.
5:58
Okay, so this looks pretty good so far.
6:01
There's actually one other
property we wanna change, though.
6:02
We don't always need to change this next
property, it depends on the source image.
6:04
But we'll see in a moment when we work
with some other images that if we leave
6:08
this adjustViewBounds property here
unchecked, or even partially checked,
6:11
the image won't be adjusted, and it won't
look correct based on the fitXY type.
6:15
So let's change this to a check mark,
6:19
we don't want it blank, we don't want it
a dashed line, we want it a check mark.
6:21
And you can see that the ImageView
adjusted slightly as we checked it.
6:24
I know all these properties
can be a little confusing,
6:28
but a better example will show us exactly
what this means in a couple of videos.
6:30
All right, let's break for a moment, and
6:33
then we can take a look at a relatively
new component called ConstraintLayout
6:35
You need to sign up for Treehouse in order to download course files.
Sign up