Android image viewer create custom image view

Nigel February 1, 2016 11:59 am

The android image viewer create custom image view tutorial describes how to create your own ImageView based on the View class.

The reason for creating a custom view class is because of the flexibility offered in a custom class of this type. For example for pinch zoom on a image a number of gestures will be required for monitoring when the user pinches and scrolls across the image.

And you also have full control over the resizing of your view.

In this android tutorial we will be explaining how to create a basic custom ImageView.

Get Code

The code can be found on github from the following instructions below

https://github.com/mobapptuts/android_image_viewer.git Tag

image-viewer-custom-imageview

or you can run this command

git clone https://github.com/mobapptuts/android_image_viewer.git –branch

image-viewer-custom-imageview

Code Samples

Create the custom ImageView class

public class PinchZoomImageView extends ImageView {
    public PinchZoomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

Add the custom ImageView to the layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="mobapptut.com.imageviewer.ImageViewMainActivity">

    <ImageView
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

    <mobapptut.com.imageviewer.PinchZoomImageView
        android:id="@+id/pinchZoomImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Create a new member for the custom ImageView

PinchZoomImageView mPinchZoomImageView;

Initialise the member with the settings from the layout

mPinchZoomImageView = (PinchZoomImageView) findViewById(R.id.pinchZoomImageView);

Use the Glide library to load the bitmap into the custom ImageView

@Override
  public void onActivityResult(int requestCode, int resultCode, Intent resultData) {
      if(requestCode == REQUEST_OPEN_RESULT_CODE && resultCode == RESULT_OK) {
          Uri uri = null;
          if(resultData != null) {
              uri = resultData.getData();
              /*
              try {
                  Bitmap bitmap = getBitmapFromUri(uri);
                  mImageView.setImageBitmap(bitmap);
              } catch (IOException e) {
                  e.printStackTrace();
              }
              */
              /*
              Glide.with(this)
                      .load(uri)
                      .into(mImageView);
                      */
              Glide.with(this)
                      .load(uri)
                      .into(mPinchZoomImageView);

          }
      }
  }