Image in Cardview OnClickListener

Question

How do i insert a "onclicklistener" on the imageviews in a cardview?

Context: I extracted frames from a video using ffmpeg, and have images displayed in a cardview, now i need to set a onclicklistener to get the bitmap of the image I clicked.

If i simply applied onClickListener to the view, like so:

view.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                // item clicked
            }
        });

Will it give me the correct image bitmap that i clicked?

I currently display images in a cardview using an adapter:

Activity

public class PreviewImageActivity extends AppCompatActivity {

    private static final String FILEPATH = "filepath";
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_gallery);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
            TextView tvInstruction=(TextView)findViewById(R.id.tvInstruction) ;

            GridLayoutManager lLayoutlLayout = new GridLayoutManager(PreviewImageActivity.this, 4);
            RecyclerView rView = (RecyclerView)findViewById(R.id.recycler_view);
            rView.setHasFixedSize(true);
            rView.setLayoutManager(lLayoutlLayout);
            String filePath = getIntent().getStringExtra(FILEPATH);
            ArrayList<String> f = new ArrayList<String>();

            File dir = new File(filePath);
            tvInstruction.setText("Images stored at path "+filePath);
            File[] listFile;

                listFile = dir.listFiles();



            for(File e:listFile)
            {
                f.add(e.getAbsolutePath());
            }

            PreviewImageAdapter rcAdapter = new PreviewImageAdapter( f);
            rView.setAdapter(rcAdapter);


        }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // handle arrow click here
        if (item.getItemId() == android.R.id.home) {
            finish(); // close this activity and return to preview activity (if there is any)
        }

        return super.onOptionsItemSelected(item);
    }
}

Adapter

public class PreviewImageAdapter extends RecyclerView.Adapter<PreviewImageAdapter.MyViewHolder> {

    private ArrayList<String> paths;

    public PreviewImageAdapter( ArrayList<String> paths) {
        this.paths = paths;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_gallery, parent, false);

        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Bitmap bmp = BitmapFactory.decodeFile(paths.get(position));
        holder.ivPhoto.setImageBitmap(bmp);
    }

    @Override
    public int getItemCount() {
        return paths.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        private ImageView ivPhoto;

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

            ivPhoto = (ImageView) itemView.findViewById(R.id.ivPhoto);
        }
    }

}

XML

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="@dimen/dp4"
    android:layout_margin="@dimen/dp8">
    <ImageView
        android:id="@+id/ivPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
      />
</android.support.v7.widget.CardView>

I don't really know how to go about adding an onClickListener to the imageview in the cardview. — Tix, Jul 23 '17 at 08:35

score 2 · Accepted Answer · answered Jul 23 '17 at 08:38

2

You should add the OnClickListener in the PreviewImageAdapter onBindViewHolder method, where you have access to the imageview.

holder.ivPhoto.setOnClickListener(new View.OnClickListener())...

answered Jul 23 '17 at 08:38

Farhad

12,178
5
32
60

Thank you that seems to work! Just a quick question though, do you know how I could get the bitmap of the image i clicked? i can do holder.ivPhoto.setImageBitmap, but i dont see a function for getImageBitmap. – Tix Jul 23 '17 at 08:53
read this question and answers https://stackoverflow.com/questions/8306623/get-bitmap-attached-to-imageview – Farhad Jul 23 '17 at 08:57
Okay got it! Thanks for the help. – Tix Jul 23 '17 at 09:02

score 0 · Answer 2 · answered Jul 23 '17 at 09:35

another workaround is to implement onClickListener on your ViewHolder class and then switch/case the view ids for different actions like:

class viewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

  ...
  
  @Override
  public void onClick(View v) {
    switch (v.getId()) {
        case R.id.v1:
          // Your code
          break;
        case R.id.v2:
          // Your Code
          break;
    }
  }
}

Image in Cardview OnClickListener

2 Answers2