Android media viewer enabling image click

Nigel August 31, 2016 2:04 am

Introduction

The android media viewer enabling image click tutorial series describes how to add an onClickListener to the image thumbnail inside the adapter.

The onClickListener will be used to pass the Uri of the image or video back to the calling activity.

Get Code

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

https://github.com/mobapptuts/media-thumbnail-viewer.git Tag

media-viewer-onclick

or you can run this command

git clone https://github.com/mobapptuts/media-thumbnail-viewer.git –branch

media-viewer-onclick

This video describes how to import the code from github using android studio and also how to use git tags

Steps

Define an interface in the adapter

public interface OnClickThumbListener {
        void OnClickImage(Uri imageUri);
    }

Setup a listener member variable

private OnClickThumbListener mOnClickThumbListener;

Initialise the interface from the calling activity

public MediaStoreAdapter(Activity activity) {
       this.mActivity = activity;
       this.mOnClickThumbListener = (OnClickThumbListener)activity;
   }

Add a method for passing the adapters click position

We want to method to support clicks from both image & video thumbnails. And for image thumbnails pass the id back to the calling activity

private void getOnClickUri(int position) {
       int mediaTypeIndex = mMediaStoreCursor.getColumnIndex(MediaStore.Files.FileColumns.MEDIA_TYPE);
       int dataIndex = mMediaStoreCursor.getColumnIndex(MediaStore.Files.FileColumns.DATA);

       mMediaStoreCursor.moveToPosition(position);

       switch (mMediaStoreCursor.getInt(mediaTypeIndex)) {
           case MediaStore.Files.FileColumns.MEDIA_TYPE_IMAGE:
               String dataString = mMediaStoreCursor.getString(dataIndex);
               Uri imageUri = Uri.parse("file://" + dataString);
               mOnClickThumbListener.OnClickImage(imageUri);
               break;
           case MediaStore.Files.FileColumns.MEDIA_TYPE_VIDEO:
               break;
           default:
       }

   }

Add the onClickListener to the ViewHolder

public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

      private final ImageView mImageView;

      public ViewHolder(View itemView) {
          super(itemView);

          mImageView = (ImageView) itemView.findViewById(R.id.mediastoreImageView);
          mImageView.setOnClickListener(this);
      }

      public ImageView getImageView() {
          return mImageView;
      }

      @Override
      public void onClick(View v) {
          getOnClickUri(getAdapterPosition());
      }
  }

Implement the interface in the calling activity

public class MediaThumbMainActivity extends AppCompatActivity
    implements LoaderManager.LoaderCallbacks<Cursor>, MediaStoreAdapter.OnClickThumbListener {

@Override
   public void OnClickImage(Uri imageUri) {
       Toast.makeText(MediaThumbMainActivity.this, "Image uri = " + imageUri.toString(), Toast.LENGTH_SHORT).show();
   }