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