Our app is going to use two different screens.

Let's take a look at mock ups from our designer to see what we're going to build.

Now, I love working with professional designers on this kind of stuff,

but even if you don't have that luxury, it's still worth your own time to

mock up how you want things to look before you start building them in code.

One of our designers here at Treehouse created some illustrations and

mock ups for us to use for this project.

These are the mock ups we'll be working from, and this file is available for

you to download in the teachers notes below this video.

All of the images, including the app icon, are also available for download.

So grab those and then unzip the file.

Once we have them unzipped like this, we're going to copy them into our project.

This can be slightly tricky so make sure you follow along.

We want to take these into our resources directory or res.

Now, it looks like we might be able to just drag them in there.

If we drag them over and highlight it, it seems like it's going to drop them in.

But it just doesn't work.

So instead we're going to have to copy them in through the file structure itself.

If we right click on this res directory, we can select Reveal in Finder or

Explorer for Windows, and it will open up a window, and

here we see the res folder for our project.

We can see that this structure here closely aligns to what we see over here.

So now I just want to take all of these folders and

drop them directly into the res folder.

If you get a warning like this to overwrite, make sure you say yes to

overwrite the files that are in there, and now all our files appear in our directory.

Notice that we have multiple drawable and mipmap folders.

The DPI here at the end of each suffix stands for dots per inch, and

it has to do with different densities of screens for different types of devices.

So the letter before it, H, stands for high, M stands for

medium, XH is for extra high, and so on.

So the higher we go, the more high of a definition the screen is.

And we wanna provide different sized images for different definitions.

Now we could just use one image and let the Android device scale it as needed.

But it's best if we scale them ourselves with graphic software.

This also means that we have multiple versions of each image.

It sounds like overkill, but it just makes sure that our app looks as good as it can,

on as many devices as possible.

Now, these mipmap folders down here are simply a special folder for

the app icon itself.

It's the same idea as drawables, where we provide icons at different resolutions.

Mipmaps are separate so that drawables can be used more efficiently

when the app is installed on a device.

Check the teacher's notes for

a link that talks a bit more about this if you're interested.

I should also mention that the name drawable means that

these types of resources are drawable on the screen.

So back in Android Studio, over here in the res directory, we can expand and

see that our new images are now available.

They're organized by image, which is a little bit easier,

and if we expand we can see the different sizes of each one.

If we take a look in mipmap, we see that there are two different app launchers.

The first one, ic_launcher,

is the default icon launcher that we would see on a device.

And the second one is the round version that we would see on some newer devices.

Okay, so let's use one of these images.

So here I've switched to the layout file for our empty activity.

And we could start by deleting the text HelloWorld that shows up here in

the center.

Go ahead and select it and just hit Delete.

Now we want to find an image view from over here in the palette.

We can search for it, or if we expand this a little bit,

I'm going to pull this down, and on the left click Images, and

here in the middle select ImageView, and I'll drag it into the upper left corner.

And I'm gonna drag it so

that we have dotted lines showing on the left and the top.

Now we get a helpful dialog to pick one of our fresh drawable resources.

This first screen will be the title page of our story.

So let's use the main_title image.

Notice at the bottom there are also some Android system images that we can access

should we need them.

But let's click OK and our image pops into our layout.

Let's set a couple properties and make this fill the entire width of the screen.

I'm currently in the view of all properties.

I'm gonna click to view fewer properties, which is what it usually shows by default.

And up here I wanna change the ID to something a little more relevant.

Let's call this titleImageView.

This is helpful if we have multiple image views on the screen.

Next, let's change these layout, width, and height parameters.

For the width, we want this to match the width of the entire screen.

Now, normally, in the past, we would have selected match_parent.

But watch, if we do that inside of a constraint layout,

it automatically defaults to the actual width of the screen itself.

Let's leave that alone for a moment.

But for the height, we wanna leave it as wrap_content because we want it to

wrap the content of the image inside.

So we have a little bit of padding around the image,

we'll take care of that in a moment.

But by selecting the height as wrap_content,

it means that the image is going to be stretched horizontally as far as it can,

but it won't be stretched vertically.

If we did that, it would make the ImageView

container fill the entire screen.

In fact, here we can take a look if we switch this to match_parent,

we see that the ImageView now expands from the top to the bottom, and

the image inside is centered in the middle by default.

So the actual presentation of the image is controlled with a different parameter.

Before we switch layout height back,

let's talk about the image scaleType that we see down here.

It's easier to see how it works with some extra space in the ImageView.

So here we can select a handful of options.

And these are different ways to position and

stretch the image inside of the ImageView.

And this makes sense if you think about it, an ImageView may be laid out on

a screen a certain way to take up maybe all of the screen or half the screen.

But we're dealing with different sized images, and

we may want to scale them within that ImageView in a bunch of different ways.

We can try a few of these different options to see what they might do.

So if I click fitStart,

it's going to start the image here at the top of the ImageView.

Then if I click fitEnd, it'll move it to the end of the ImageView.

Let's try something like centerCrop.

It will center the image and make sure it fills up the entire view and

crop whatever is left.

Now we want to leave a little bit of room here at the bottom for

some additional controls.

So let's set the scaleType to fitXY, which means it will fit the X and

Y of the ImageView, the length and the width.

And let's flip our layout height back to wrap_content.

This is one way to make sure that our image maintains its aspect ratio,

which is the ratio of the length compared to the width.

Okay, so this looks pretty good so far.

There's actually one other property we wanna change, though.

We don't always need to change this next property, it depends on the source image.

But we'll see in a moment when we work with some other images that if we leave

this adjustViewBounds property here unchecked, or even partially checked,

the image won't be adjusted, and it won't look correct based on the fitXY type.

So let's change this to a check mark,

we don't want it blank, we don't want it a dashed line, we want it a check mark.

And you can see that the ImageView adjusted slightly as we checked it.

I know all these properties can be a little confusing,

but a better example will show us exactly what this means in a couple of videos.

All right, let's break for a moment, and

then we can take a look at a relatively new component called ConstraintLayout