Android media viewer enabling image click

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();
   }

 

Android media viewer enabling image click summary

In this tutorial we discussed how to use a interface to provide adapter information back to the calling activity. In this case it will be the image Uri which is returned back to the calling activity.

The following tutorial will use the Uri supplied from the activity and use that to open a full size version of the image in a new activity.

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>