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.

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 add 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. To open the activity_main.xml file (or any other layout) then navigate through Project > app > res > layout and double-click the layout file.

activitymain.png

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

imageview.png

Next, 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! You have now added an error-free image to your app.

<<< Previous

Next >>>