Android media viewer enabling image click


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 Tag


or you can run this command

git clone –branch


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


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


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



Add the onClickListener to the ViewHolder

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

      private final ImageView mImageView;

      public ViewHolder(View itemView) {

          mImageView = (ImageView) itemView.findViewById(;

      public ImageView getImageView() {
          return mImageView;

      public void onClick(View v) {


Implement the interface in the calling activity

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


   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>