ImageView in Android
Start course
2h 38m

This course delves into the essential components that will allow you to build engaging and user-friendly Android apps!

Intended Audience

This course is ideal for anyone who wants to learn how to use Kotlin for developing applications on Android.


This content will take you from a beginner to a proficient user of Kotlin and so no prior experience with the programming language is required. It would, however, be beneficial to have some development experience in general.


I'm great. Hello everyone. So, we're going to talk about imageView in this video. ImageView is an Android component to display images. Match, but you know showing images is very important for an Android application. If you use good photos in your project, your design is going to look wonderful. So because of all this, the usage of the ImageView component is very important. So, why don't we just go to Android Studio and learn ImageView while we practice? All right. So, we have a project from before.

So, let's continue to work from this project. The first thing we're going to need to do is add the image that we're going to display in the ImageView component right here into our project. So, I'm sure you remember, I was showing you that we add pictures to the drawable folder, that rings a bell. So, we're going to do all that right now. You can add images in a couple of different ways. First, you have to right click on the drawable folder and select 'Open In Explorer'. Then you should move the image that you want to add to the project to the drawable folder from here.

All right, so that's the first method. You already know that method. So, now let's have a look at the second method. So, this way you got to copy the image that you want to add to the project. After that, just right click on the drawable folder and select the 'Paste' option, and from here you just select the 'drawable' folder, not the drawable-v24 folder. And then also the name of the picture that you're going to add to the drawable folder has to be lowercase letters. And if it's longer than one word, no spaces whatsoever. You can of course use underscores to separate words, so that's not a problem. Otherwise you will get an error. You just can't forget that, unless you like getting errors. Anyway, and there you see it. Using both methods, you can add any images that you want into your project.

So, now that we've done that, we can learn about the ImageView component. All right, so, adding an ImageView to this project. First of all, where is ImageView? Well, it is inside the palette window, and it's under the widgets on the left hand side of Android Studio. So, I am going to drag the   ImageView and drop it under the linear layout. So, that puts it as the first component. This is a linear layout and its orientation is vertical. So because of this, all the components are going to take a place from top to bottom. So, when I dropped the  ImageView, a new window opens up, and this window is the Resources window. So here, I need to choose a picture for this   ImageView, see how that works. Going to select the image that I just added to the project, click 'OK'.

So now, I can see this picture in the design area but there is a problem. Do you see it? Well, because I cannot see other components. All right. Now, what's the reason for that? The height of the   ImageView, wrap_content, also the size of my image, way too big. So, when the   ImageView uses wrap_content for height, the image covers all the screen from top to bottom. So, I need to change the layout height and layout width to 300. Okay, so now you can see all the components in the design area. Also, if you notice and when you pay attention to this.

So, the  ImageView component is in the center of the screen horizontally, because I choose the layout gravity property to center_horizontal. You remember that for this linear layout, last video. And that way all the components are placed center of the screen horizontally. So, if you look at it carefully, you can see that the image is placed inside the center of the ImageView. Now, if you want your image to cover all the   ImageView component, well, you should choose the size of the image exactly the same as the ImageView. Right? You know what I'm saying. Right? I'll give you an example.

If the size of your ImageView is 300 * 300, the size of your image should also be 300 * 300 or vice versa, whatever. But we could also do some arrangements within the   ImageView. So, I'm going to go to the scaleType property, and that's in the Attributes section, and choose from here a few options. Now, if I were to choose the fitStart, the image is going to take the place from the start position. If I choose the fitCenter, the image will be seen in the center. And if I choose the fitEnd option, it's going to take its place from the end position.

Now, what happens if I choose fitXY? Well, the   is going to cover all of the   ImageView, but the image will be enlarged and it might not look very good. So, because of this, the fitCenter option is often a very good option. But, naturally it's up to you and what the image is. All right. So, these are only some of the things we can do on the design page. We can also do a few things on the Kotlin side using Kotlin code. But before going to the Kotlin side, I will need to give an ID to this ImageView. So, I'm going to give the imageViewexample as the ID.

Okay. So, what can I do here? For example, when I click on the 'OK' button, the   in the image ImageView component is going to change. So, I will see another   image inside the ImageView. So, how do I do that? Well, we'll go to the MainActivity.kt file and start there. Okay. So first, I'll define this   ImageView on the comment side. I need to write lateinit var image : ImageView. I'll give image as its name and you can of course name it whatever you want. But now, I need to define its ID inside the on create method. And I'll write image = findViewById, and inside the parenthesis, R.Id.imageViewExample.

So now, I can do every operation on the   ImageView using the image word. Right? It's all right. Operation code's inside the click listener of the OK button. Now, let's turn the codes that we wrote in the previous lesson into a comment line. So, if you just put a // at the beginning of the code, you will only comment out a single line. If you use / and the *, you can also comment out multiple lines. Okay. So now, we can write the necessary code. I'm going to write image.setImage resource. And this function is used to change an image in the ImageView.

But before I continue with that, I do need to do one more thing. How about a second image to my project? So, I can right click on the drawable folder on the left side of Android Studio and choose 'Open In Explorer'. After that, the drawable folder's open. Inside the drawable folder, I have one picture. Its name is first_image. So, I can add a new image to this folder and make its name second_image. All right. That way when I close this folder, I can see the second image in my project. So now, I can call this image and I will write inside the parenthesis R.drawable.second_image. All right, so now that everything is okay, when I click on that 'OK' button, the image is going to change to the second_image. Let's run it and see how it works. So, the application opens when I click the 'OK' button, the image changes just like that.

All right, so that gives you an example of how it works and that'll work like that for a variety of operations. But it's enough for this video. So, I want to see you in the next video. All right, we're going to do some other stuff. See you on the other side.


About the Author
Learning Paths

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics