How to Add an Image to Your Android Application

By Michael Burton

Adding images to an Android app is simple: Drag them from the folder where they’re stored to the src/main/res/drawable-xxhdpi folder, as shown in the following figure.

image0.jpg

For the Silent Mode Toggle application, you need two ringer images: off and on. Be sure to put both images in the src/main/res/drawable-xxhdpi folder.

When you drag images into Android Studio, it regenerates the build/generated folder, and the R.java file is updated to include a reference to the two new images you added.

You can use the references to these resources to add images to your layout in code or in XML definition. You declare them in the XML layout.

To add an image to the layout, type the following into the activity_main.xml file, overwriting the current content of the file:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/content"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:foreground="?android:attr/selectableItemBackground"
    >
    <ImageView
        android:id="@+id/phone_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ringer_on"/>
</FrameLayout>

This code adds the ImageView inside the FrameLayout. An ImageView allows you to project an image to the screen on the device.

Setting image properties

Your ImageView contains a few new parameter attributes:

  • The android:id=”@+id/phone_icon” property: The id attribute defines the unique identifier for the view in the Android system.

  • The layout_width and layout_height properties: You used layout_width and layout_height in your FrameLayout, but there you set them to match_parent. For the ImageView, you want the ImageView’s size to be the same as the image it’s showing, so set it to have a layout_width and layout_height of wrap_content to “wrap” the content inside the view. If you had set the height and width to be match_parent, Android would have scaled the image up much too large to take up the full screen. Try it!

  • The layout_gravity property: This property defines how to place the view (both its x– and y-axes) with its parent. In this example, the value is defined as the center constant. Since the ImageView is smaller than the FrameLayout, using layout_gravity=center instructs the Android system to place the ImageView in the center of the FrameLayout rather than in the default location of the upper left. You can use many other constants, such as center_vertical, center_horizontal, top, bottom, left, right, and many more. See the FrameLayout.LayoutParams Android documentation for a full list.

  • The android:src=”@drawable/ringer_on” property: You use this property to set the image that you want to show up on the screen.

Notice the value of the src property — “@drawable/ringer_on”. You can reference drawable resources via XML by typing the “at” symbol (@) and the type and id of the resource you want.

Certain Android attributes begin with the layout_ prefix — android: layout_width, android:layout_height, and android:layout_ gravity are all examples. The layout_ convention tells you that the attribute relates to the view’s parent. Attributes that don’t begin with layout_ pertain to the view itself. So the ImageView’s android:src attribute tells the ImageView which image to use, but its android:layout_gravity tells the ImageView’s parent (the FrameLayout, in this case) to lay out the ImageView in the center of the parent.

Setting drawable resources

In your ImageView, you set your image src to @drawable/ringer_on. You don’t type @drawable-xxhdpi/ringer_on for the drawable resource identifier, because it’s Android’s job (not yours) to figure out the correct size image for the current device’s screen. At runtime, Android determines which density is correct for that device, and loads the closest matching drawables.

For example, if the app is running on a medium-density device and the requested drawable resource is available in the drawable-mdpi folder, Android uses that resource. Otherwise, it uses the closest match it can find. Support for various screen sizes and densities is a broad topic (and can be complex!).

The ringer_on portion of the identifier identifies the drawable you want to use. The image filename is ringer_on.png. If you were to open the R.java file in the build/generated folder, you would see a static field with the name phone_on.

You can use code completion to see the available resources in Android Studio. Place the cursor directly after @drawable/ in the src property of the ImageView in the Android Studio editor, and press Ctrl+spacebar. The code-completion window opens, as shown. The other resource names in the window are other options you could choose for the src portion of the drawable definition.

image1.jpg