Create onClickListener in RecyclerView

Question

I tried to make a setListener on adapter to make something Action on the app. But the problem was when using this line of code to call setClickListener

adapter.setClickListener(this);

it gives me this error when using (this)

Required type:   ItemClickListener

Provided:        HomeImagesFragment

Here are my codes

Picassotest "Adapter for RecyclerView"

public class Picassotest extends RecyclerView.Adapter<Picassotest.ViewHolder> {

private String[] mData;
private Context context;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;


// data is passed into the constructor
public Picassotest(Context context, String[] data) {
    this.mInflater = LayoutInflater.from(context);
    this.mData = data;
    this.context = context;
}

// inflates the cell layout from xml when needed
@Override
@NonNull
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view = mInflater.inflate(R.layout.images_list, parent, false);
    return new ViewHolder(view);
}

// binds the data to the TextView in each cell
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
    Picasso
            .with(context)
            .load(mData[position])
            .fit() // to resize the image to imageView
            .placeholder(R.drawable.loading_image) // load image
            .transform(new PicassoRoundedTransformation(20, 0)) // Add radius to the images
            .noFade()
            .into(holder.mimageView);
}

// total number of cells
@Override
public int getItemCount() {
    return mData.length;
}

// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    ImageView mimageView;

    ViewHolder(View itemView) {
        super(itemView);
        mimageView = itemView.findViewById(R.id.list_image);
        itemView.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
    }
}

// convenience method for getting data at click position
public String getItem(int id) {
    return mData[id];
}

// allows clicks events to be caught
public void setClickListener(ItemClickListener itemClickListener) {
    this.mClickListener = itemClickListener;
}

// parent activity will implement this method to respond to click events
public interface ItemClickListener {
    void onItemClick(View view, int position);
 }

}

HomeImagesFragment "Fragment"

public class HomeImagesFragment extends Fragment {

private Picassotest adapter;
String[] chooseImages;

public HomeImagesFragment(String[] chooseImages) {
    this.chooseImages = chooseImages;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.images_fragment_home, container, false);

    /* ArrayList for chooseImages */
    chooseImages = new String[]{
            "https://quotess.cc/wp-content/uploads/2020/01/4688.jpg",
            "https://whatt.cc/wp-content/uploads/2018/07/4443.jpg",
            "https://quotess.cc/wp-content/uploads/2020/01/4688.jpg",
    };

    /* make new object and find the view "GridView" */
    RecyclerView recyclerView = rootView.findViewById(R.id.recyclerview_image_choose);
    // Calculate the items and auto-fit it on the screen
    int mNoOfColumns = Utility.calculateNoOfColumns(getActivity(), 140);
    recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), mNoOfColumns));
    adapter = new Picassotest(getActivity(), chooseImages);
    adapter.setClickListener(this);
    recyclerView.setAdapter(adapter);

    return rootView;
}

public void onItemClick(int position) {
    // get the image
    String image = chooseImages[position];
    Intent intent = new Intent(getActivity(), PicassoImageDisplayWallpaperAdapter.class);
    intent.putExtra("imageUrl", image);
    getActivity().startActivity(intent);
}

@NileshRathod I toke the code from here https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the — Moataz, Jun 09 '20 at 06:23

score 2 · Accepted Answer · answered Jun 09 '20 at 06:29

You need to create an interface like below code

interface  ItemClickListener{
    public void onItemClick(int position);
}

You need to implements ItemClickListener in your HomeImagesFragment

SAMPLE CODE

public class HomeImagesFragment extends Fragment implements ItemClickListener{

private Picassotest adapter;
String[] chooseImages;

public HomeImagesFragment(String[] chooseImages) {
    this.chooseImages = chooseImages;
}

@Override
public void onItemClick(int position) {
 // you will clikcked item position here   
 String image = chooseImages[position];
Intent intent = new Intent(getActivity(), PicassoImageDisplayWallpaperAdapter.class);
intent.putExtra("imageUrl", image);
getActivity().startActivity(intent);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.images_fragment_home, container, false);

    /* ArrayList for chooseImages */
    chooseImages = new String[]{
            "https://quotess.cc/wp-content/uploads/2020/01/4688.jpg",
            "https://whatt.cc/wp-content/uploads/2018/07/4443.jpg",
            "https://quotess.cc/wp-content/uploads/2020/01/4688.jpg",
    };

    /* make new object and find the view "GridView" */
    RecyclerView recyclerView = rootView.findViewById(R.id.recyclerview_image_choose);
    // Calculate the items and auto-fit it on the screen
    int mNoOfColumns = Utility.calculateNoOfColumns(getActivity(), 140);
    recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), mNoOfColumns));
    adapter = new Picassotest(getActivity(), chooseImages);
    adapter.setClickListener(this);
    recyclerView.setAdapter(adapter);

    return rootView;
}

public void onItemClick(int position) {
    // get the image
    String image = chooseImages[position];
    Intent intent = new Intent(getActivity(), PicassoImageDisplayWallpaperAdapter.class);
    intent.putExtra("imageUrl", image);
    getActivity().startActivity(intent);
}

Thank you very mutch :D, the problem was in "implements Picassotest.ItemClickListener", I add it and it is work perfectly, really you saved my day — Moataz, Jun 09 '20 at 06:47

score 2 · Answer 2 · edited Jun 09 '20 at 14:03

(Additional) Another way if you use Kotlin:

Sample Code

In Adapter class (Picassotest):

class Picassotest : RecyclerView.Adapter<Picassotest.ViewHolder>{

    internal var itemClickListener: (Int) -> Unit = {}


    inner class ViewHolder(itemView:View):RecyclerView.ViewHolder(itemView){
        init{
            itemView.setOnClickListener{
                itemClickListener.invoke(adapterPosition)
            }
        }
    }

}

In HomeImagesFragment:

class HomeImagesFragment{

adapter = new Picassotest(getActivity(), chooseImages)
adapter.itemClickListener = { position->
                             //TODO handle item on click here        
    }

}

Create onClickListener in RecyclerView

2 Answers2