ImageView Tutorial and Examples

ImageView is a versatile widget in Android that is used to display images. It is a subclass of the View class and is present in the android.widget package. ImageView can be used to display both static and dynamic images in various formats like JPEG, PNG, and GIF. This article will provide a detailed overview of ImageView in Android and provide code examples in Kotlin and Java.

Basic Usage

To use ImageView in your Android application, you need to add it to your XML layout file. The following XML code snippet shows how to add an ImageView to your layout:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image" />

In the above code, the android:id attribute is used to give a unique identifier to the ImageView. The android:layout_width and android:layout_height attributes specify the width and height of the ImageView. The android:src attribute is used to specify the source of the image that needs to be displayed in the ImageView. Here, we have used a drawable resource my_image as the source.

Loading Images from URL

ImageView can also be used to display images that are loaded from a URL. To do this, you need to use a library like Glide or Picasso. In this article, we will use the Glide library to load images from a URL.

First, you need to add the Glide dependency to your app-level build.gradle file:

implementation 'com.github.bumptech.glide:glide:4.12.0'

After adding the dependency, you can load an image from a URL using the following code:

Glide.with(this)
    .load("https://example.com/my_image.jpg")
    .into(imageView)

Here, we have used the with() method to get an instance of Glide and passed the context of the activity as a parameter. The load() method is used to specify the URL of the image that needs to be loaded. Finally, the into() method is used to specify the ImageView where the loaded image needs to be displayed.

Scaling Images

ImageView provides various scaling options to display images in different sizes. The following XML attributes can be used to specify the scaling options:

• android:scaleType: This attribute is used to specify how the image should be scaled to fit the ImageView. The following are the available options:
  • center
  • centerCrop
  • centerInside
  • fitCenter
  • fitEnd
  • fitStart
  • fitXY
  • matrix

The following code snippet shows how to set the android:scaleType attribute to centerCrop:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"
    android:scaleType="centerCrop" />

Adding Click Listener

ImageView can also be used to capture click events. To do this, you need to add an OnClickListener to the ImageView. The following code snippet shows how to add a click listener to the ImageView in Kotlin:

imageView.setOnClickListener {
    // Code to handle click event
}

In Java, you can add a click listener to the ImageView as follows:

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Code to handle click event
    }
});

Quick ImageView Examples and HowTo's

Lets start by looking at quick custom ImageView examples:

1. How to create a Square ImageView

Let's say we want to create a square imageview. That is an imageview where both width and height are the same.

First we will have our SquareHelper class:

import android.content.res.TypedArray;
import android.support.annotation.IntDef;
import android.util.AttributeSet;
import android.view.View;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

import online.sniper.R;

/**
 * Square view helper class
 */
public class SquareHelper {

    public static final int BASE_WIDTH = 0;
    public static final int BASE_HEIGHT = 1;
    public static final int BASE_MIN_EDGE = 2;
    public static final int BASE_MAX_EDGE = 3;

    @IntDef({BASE_WIDTH, BASE_HEIGHT, BASE_MAX_EDGE, BASE_MIN_EDGE})
    @Retention(RetentionPolicy.SOURCE)
    public @interface SquareViewEdge {

    }

    private View mView;
    private int mBaseEdge = BASE_WIDTH;

    public SquareHelper(View view, AttributeSet attrs) {
        mView = view;
        TypedArray a = view.getContext().obtainStyledAttributes(attrs, R.styleable.SquareView);
        try {
            mBaseEdge = a.getInt(R.styleable.SquareView_baseEdge, BASE_WIDTH);
        } finally {
            a.recycle();
        }
    }

    public void setBaseEdge(@SquareViewEdge int baseEdge) {
        mBaseEdge = baseEdge;
    }

    public int getMeasuredSize() {
        switch (mBaseEdge) {
            caseBASE_WIDTH:
                return mView.getMeasuredWidth();
            caseBASE_HEIGHT:
                return mView.getMeasuredHeight();
            caseBASE_MIN_EDGE:
                return Math.min(mView.getMeasuredWidth(), mView.getMeasuredHeight());
            caseBASE_MAX_EDGE:
                return Math.max(mView.getMeasuredWidth(), mView.getMeasuredHeight());
            default:
                returnmView.getMeasuredWidth();
        }
    }

}

Then our SquareImageView

import android.content.Context;
import android.support.v7.widget.AppCompatImageView;
import  android.util.AttributeSet ;

public class SquareImageView extends AppCompatImageView {

    private final SquareHelper mHelper ;

    public SquareImageView(Context context) {
        this(context,null);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context,attrs);
        mHelper = new SquareHelper(this, attrs);
    }

    @Override
    protectedvoid onMeasure(intwidthMeasureSpec,intheightMeasureSpec){
        super.onMeasure(widthMeasureSpec,heightMeasureSpec);
        int size = mHelper.getMeasuredSize();
        setMeasuredDimension(size, size);
    }

}

Conclusion

In this article, we have provided a detailed overview of ImageView in Android and demonstrated how to use it to display static and dynamic images, load images from a URL, scale images, and capture click events. We have also provided code examples in Kotlin and Java. With this knowledge, you can now start using ImageView in your Android applications to display images.