Hello and welcome back. As we approach the end of this section, we'll look at one more important layout related item which is working with images. And images are a great way to make your app visually appealing, and are super easy to add to your android project. So, let's start by grabbing a couple of images. I'm going to pull up a browser window and I'll go to 'unsplash.com'. This is a site that I like to take images from. They are free to use mostly and along those lines, something to keep in mind is, if you are going to use images in your live apps, make sure that you have the proper rights to those images. So, if you just go to 'images.google.com' and look for, let's say, 'weather images'. 

If you're going to use any images from here in your live apps that you want to push the production, make sure that you have the proper rights for them. But if you're going to use them in your test apps only for yourself, as you learn, then feel free to use whatever image you want. So, I'll go to Unsplash, and this site has a ton of amazing images in different categories. I'm going to grab one from 'Nature', And you see there are a ton of them, so pick one that you like. I'll get this one, 'Stormy weather', click on this and then download for free small version. Now when you use images, make sure that you pay attention to the size. See I downloaded the small version, and the medium and large versions were pretty big and if you use big images, it might cause your app to crash or run very slow. 

You can also resize your images as well. So, I'll pull up my image right here in a Mac. This is pretty easy. All you do is go to 'Tools' and then adjust size, custom pixels with, I'll set to 500 instead of 640 and everything else should be fine, Check it out. It resizes the image for me. So, I'm going to save this and actually I'll also rename it. So, I'll change the name to 'storm_Image_1,' And while we're at it, let's get another one. You can always thank the owner of the image through here. Let's see. Let's look for another image. I'll look for sunny. Alright, and this looks pretty good. So, I'll grab this one, okay? Small, and when we pull this up "Tools", "Adjust Size", 500. All right, I'll change the name, 'sunny_image2,' okay? Close out of this. It was out of the tab. All right. Now, back to android studio. This is a fresh new app that I started and I've called it 'the weather changer'. 

And what I'm going to do is in my projects tab right here. I'm going to go to my resources folder, right here. So, under 'app', res and then drawable. And I'm going to paste those images over here. Here's my downloads folder. I actually have to copy, paste them from here. So, I'm going to copy these two, command C go back here, back to the drawable folder right here, make sure this is highlighted, right-click paste, right? You can also hit 'command V' and here it asks you to confirm the destination directory is indeed '/app/main/res/drawable/' which is what I want, okay? And copy selected files to directory and then 'Refactor'. There you go. There are my two images. Perfect. Now, let's go to our layout and add these images. 

I'm going to go to my layout. Let's maximize this. So, I'll get rid of this project tab for now. Alright. Now we're ready to go, I'm going to get rid of this 'Hello world' view. So, what you want to add to your layout is an 'ImageView'. So, in your palette there is 'ImageView' under common, and if you can't find it for some reason or if you can't find anything here, you can always use this Search button and then type in 'image' and you can see you have multiple image options. What we want is the 'ImageView' right here. So, that's one way of looking for things but I'll simply grab it from here and drag it in.

And once we do that you see all these options show up and I will select the one that I want, right here under 'The Weather Changer app', I have 'storm_image1' also like that. Great. So, now you can drag and resize this image as you like. So, I'm going to move this here. There you go. Some resizing, and again feel free to move this around as you please. You can also add margins directly from here. So, it's in the right place in your app. One thing I'll mention is scale type. So, among the attributes, if you scroll down, you see under 'Common Attributes', 'scale Type', you can select multiple options from here. So, you can say 'centerInside', you can say 'fitCenter' or let's say matrix moves it to the top. 

So, it basically offers different ways that you can fit the image in, and you can try out some of the other options as well. They're reasonably self explanatory. Alright. So, that's how you add images to your app. Now to a challenge for you. I want you to build this. Here we go on the surface. This looks pretty simple. We have an image of the storm, the storm image, so you can select one and then we have a button here that says 'Change me'. And the idea is it's going to change this image to the other image. That's why we downloaded two images. So, here is what the app looks like here in the emulator. If I click change me, it changes to the other image. So, there are a couple of challenging bits over here. Obviously one is to make sure that the button shows up at the bottom right of your screen. This might require you to play around a little bit. And the other thing is we haven't covered how to change the image that's displayed. 

You see when we click the button, how this image is changing to the other one. We haven't covered that. So, it might require you to google around a little bit, alright? But it's very good practice for your future coding endeavors. Now, when you are building this and you managed to get this to work, don't worry about changing it back to the other image, because that requires a little bit of extra programming using Kotlin, which we have not covered so far. If you managed to do it, that's great. But don't worry about that part. Just moving from one to the next should be enough, okay? So, good luck on this challenge. Hope you enjoy building the app and make sure to post a pre and post-image of your completed app, meaning before the button is clicked and then after it's clicked. Make sure you post those images to the Q&A of this video, and I'll see you in the next one where we go about building the solution to this. See you there.