How to Use ImageView in Android: Simple Guide with Example

In Android, use the ImageView widget to display images in your app's UI. Add <ImageView> in your layout XML and set the image source with android:src or programmatically with setImageResource().

Syntax

The ImageView is a UI element in Android used to display images. You add it inside your layout XML file. The key attribute is android:src, which sets the image resource to show. You can also control size with android:layout_width and android:layout_height.

Example attributes explained:

• android:id: Unique identifier for the ImageView.
• android:layout_width and android:layout_height: Define the size of the ImageView.
• android:src: The image resource to display.
• android:contentDescription: Text for accessibility describing the image.

xml

<ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"
    android:contentDescription="Description of image" />

Output

An ImageView showing the image named 'my_image' from drawable resources in the UI.

Example

This example shows a simple Android activity layout with an ImageView displaying an image from the drawable folder. The image is set in XML using android:src.

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/sampleImageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/sample_image"
        android:contentDescription="Sample image" />

</LinearLayout>

Output

A centered square ImageView of 200dp by 200dp showing the 'sample_image' drawable in the app screen.

Common Pitfalls

Common mistakes when using ImageView include:

• Forgetting to add the image file to the res/drawable folder.
• Using incorrect resource names or paths in android:src.
• Not setting android:contentDescription for accessibility.
• Setting fixed sizes without considering different screen sizes.

Also, loading large images without resizing can cause app slowdowns or crashes.

xml

<!-- Wrong: Missing image resource -->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/non_existent_image" />

<!-- Right: Correct image resource -->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"
    android:contentDescription="My image" />

Output

The first ImageView will cause a build error or show no image; the second correctly displays the image.

Quick Reference

Tips for using ImageView effectively:

• Use android:src to set images from drawable resources.
• Use setImageResource() in code to change images dynamically.
• Always provide android:contentDescription for accessibility.
• Use wrap_content or fixed dp sizes carefully for responsive design.
• Optimize image sizes to avoid performance issues.

Key Takeaways

Use ImageView in XML with android:src to display images.

Always add images to the res/drawable folder with correct names.

Set android:contentDescription for accessibility support.

Avoid large image files to keep app performance smooth.

Use proper layout sizes for responsive UI on different devices.