Coders' Guidebook

How to add images to your Android app

This tutorial will cover how to add an image to your Android app. If you do not already have an image in mind then feel free to use the one below of the world.

world.png

Import images into Android Studio

The first task will be to import the image into the Android Studio project. To do this, open up the drawable folder by clicking Project > app > res > drawable

drawable.png

Next, drag and drop your image into the drawable folder.

dropdrawable.png

A dialogue box should then open. Press OK to list your image in the drawable folder and make it available to your app.

drawableimage.png

Using the ImageView object

To use an image in your app, you need to add it to an XML layout file such as activity_main.xml. This file will often already be open when the app is loaded, but if it is not (or you wish to open up a different XML file) then simply go to Project > app > res > layout

activitymain.png

Open the file in Design mode and locate the ImageView object in the widgets category of the Palette.

imageview.png

Drag and drop the ImageView object onto the desired location in the layout editor.

dropimage.png

When the Resources dialogue box opens, expand the Project dropdown menu to view all the imported images. Our image of the world is included in this list. Select it then press OK.

resources.png

Resolving the contentDescription warning

After adding an image to your app, you may notice a yellow warning sign in the top right-hand corner.

imageadded.png

Clicking this warning sign opens an error message, which explains that the image is lacking a contentDescription attribute. Adding a content description is important for screen readers to work and helps users who require accessibility support. To add a content description, simply select the image, locate 'contentDescription' in the attributes panel and add your description.

contentdesc.png

This is one of those situations where solving one error creates another. Chances are if you have typed out your content description as a sentence then it will have created a hardcoded text warning. Hardcoded text can be resolved by expanding the warning message, pressing the 'Fix' button, and then pressing OK in the resulting Extract Resource window (see this tutorial for more information on hardcoded text warnings). This will convert the contentDescription attribute to a string and resolve the hardcoded text warning.

And that's it! We have now added an error-free image to our app.

<<< Previous

Next >>>