Introducing ImageViews

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