Home and Learn: Android Course

Add images to your Android Project

We're now going to add a picture to Android Studio. This picture will be used in an Image View.

First, download this picture: (Right click and select Save Image As.)

Picture of Tower Bridge

Save it to your own computer and remember where you saved it to.

We need to import this picture into the res > drawable folder. Open up your Project Explorer again and locate the res > drawable folder:

The Android drawable folder

Right click the drawable folder, and select Open In > Explorer from the menu:

Context menu in Android Studio.

This will open a window showing a list of folders. The image below is from Windows 10:

Windows Explorer showing a list of Android folders

All of these folders are from your res directory. (The mipmap ones are used mainly for icons. You can create them in different sizes. We'll do this much later in the course.)

What you need to do is to copy and paste your image from where you saved it on your computer into the drawable folder (we're assuming you know how to copy and paste files from one folder to another):

An image copied to the drawable folder of Android Studio

Now go back to Android Studio and you should see it there:

An image copied to res > drawable

We can now use this image in our app.

Go back to your blueprint. Locate the Image View control in the Palette. You can find the Image View control under the Common category of the Palette (and under Widgets):

The ImageView widget in the Palette in Android Studio 3

Drag an Image View to just below your Text View:

Image View control being dragged on an app in Android Studio.

Let go of your left mouse button. As soon as you do, you should the following dialogue box appear:

The Pick a Resources dialogue box"

If you don't see the above dialog box, drag your ImageView control onto the Component Tree, just under your Text View.

The image you added earlier should be on the list. Select your image and click OK.Your blueprint will then look like this: (You won't see the image in Blueprint mode.)

Android Studio layout showing an ImageView on a Blueprint



Now we'll add a Constraint. Before we do so, make sure that pan mode toggled to OFF. To switch pan mode off, hover your mouse over the blueprint until you see the zoom controls appear. Click the hand icon to disable pan mode. In the image below, pan mode is selected, which means we can't drag the constraint handles:

Zoom controls in Android Studio.

OK, with pan mode off, we want to connect the top middle circle of the Image View to the bottom middle circle of the Text View. Hold your mouse over the top middle circle of the Image View. Now hold your left mouse button down. Keep it held down and drag to the bottom middle circle of the Text View:

Dragging from one Constraint Anchor to another

You should see an arrow connecting the two:

A Constraint added using Android  Studio

Now add a constraint from the left of the Image View to the left edge of the screen, just like you did for the Text View. Likewise, connect the right edge of the Image View to the right edge of the screen. Your blueprint will then look like this (if not, change the values in the dropdowns to match ours):

Adding left and right constraints

Like we did in the previous lesson, all the constraints have been set to a value of 8 from the dropdowns. The wiggly lines on the blueprint show that constraints have been added.

Before running your app, try this exercise.



If you look at the Component Tree, you'll see that it has a yellow warning sign in it. Hold you mouse over the yellow triangle and it will say, Image without content description. Can you see how you'd fix this? (HINT: the problem is the same as the hardcoded text in the TextView from the previous lesson.)


You can run your app now. In portrait mode, it should look like this:

Android App running in portrait mode.

And here is is in landscape mode:

Android App running in landscape mode.


In the next lesson, you'll learn about a different type of layout - LinearLayout.

Back to the Android Contents Page


Email us: enquiry at homeandlearn.co.uk