Preview
Video Player
00:00
00:00
Introducing ImageViews
6:38We use a special View for images in Android called, appropriately, ImageView. We will also talk about providing images for all sorts of screens.
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 teacher's
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