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.)
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:
Right click the drawable folder, and select Open In > Explorer from the menu:
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):
Now go back to Android Studio and you should see it there:
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):
Drag an Image View to just below your Text View:
Let go of your left mouse button. As soon as you do, you should the following dialogue box appear:
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.)
Constraints
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:
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:
You should see an arrow connecting the two:
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):
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.
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:
And here is is in landscape mode:
In the next lesson, you'll learn about a different type of layout - LinearLayout.
< Layout Widgets | Linear Layouts >
Back to the Android Contents Page