Make image as marked when clicked on in a recyclerview

Question

I have a horizontal recyclerview with images and text, when i click on any item , i want it to be shown as marked. I don't want to select multiple items. Only one item at a time! Here is example i want to achieve Currently i am showing images in horizontal recyclerView

public class FilterPageHorizontalRecyclerViewAdapter extends RecyclerView.Adapter<FilterPageHorizontalRecyclerViewAdapter.ViewHolder>
        {
            private int selectedPosition = -1;
    private static final String TAG = "RecyclerViewAdapter";

    //vars
    private ArrayList<String> mNames = new ArrayList<>();
    private ArrayList<Integer> mImageUrls = new ArrayList<>();
    private Context mContext;

    public FilterPageHorizontalRecyclerViewAdapter(Context context, ArrayList<String> names, ArrayList<Integer> imageUrls) {
        mNames = names;
        mImageUrls = imageUrls;
        mContext = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.horizontal_recycler_layout, parent, false);
        return new ViewHolder(view);
    }


    @Override
    public void onBindViewHolder(final ViewHolder holder, final int position) {
        Log.d(TAG, "onBindViewHolder: called.");

        Glide.with(mContext)
                .asBitmap()
                .load(mImageUrls.get(position))
                .into(holder.image);

        holder.name.setText(mNames.get(position));

        holder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selectedPosition = position;
                Log.d(TAG, "onClick: clicked on an image: " + mNames.get(position));
                Toast.makeText(mContext, mNames.get(position), Toast.LENGTH_SHORT).show();
                holder.image.setImageResource(R.drawable.ic_bed);
                notifyDataSetChanged();
            }
        });
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder{

        CircleImageView image;
        TextView name;

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

            image = itemView.findViewById(R.id.image_view);
            name = itemView.findViewById(R.id.name);
        }

    }
}




public class HorizontalRecyclerView extends AppCompatActivity {
    private ArrayList<String> mNames = new ArrayList<>();
    private ArrayList<Integer> mImageUrls = new ArrayList<Integer>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_horizontal_recycler_view);
        getImages();

        }

        private void getImages(){


            mImageUrls.add(R.drawable.home);
            mNames.add("Havasu Falls");

            mImageUrls.add(R.drawable.home);
            mNames.add("Trondheim");

            mImageUrls.add(R.drawable.home);
            mNames.add("Portugal");

            mImageUrls.add(R.drawable.home);
            mNames.add("Rocky Mountain National Park");


            mImageUrls.add(R.drawable.home);
            mNames.add("Mahahual");

            mImageUrls.add(R.drawable.home);
            mNames.add("Frozen Lake");


            mImageUrls.add(R.drawable.home);
            mNames.add("White Sands Desert");

            mImageUrls.add(R.drawable.home);
            mNames.add("Austrailia");

            mImageUrls.add(R.drawable.home);
            mNames.add("Washington");

            initRecyclerView();

        }

        private void initRecyclerView(){


            LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
            RecyclerView recyclerView = findViewById(R.id.recyclerView);
            recyclerView.setLayoutManager(layoutManager);
            FilterPageHorizontalRecyclerViewAdapter adapter = new FilterPageHorizontalRecyclerViewAdapter(this, mNames, mImageUrls);
            recyclerView.setAdapter(adapter);
        }`enter code here`
    }

please see the example image in section Property types

you need to modify your current layout from your ViewHolder, and setOnClickListener to the parent layout in your ViewHolder in onBIndViewHolder, after that make the required changes in the layout — Vedprakash Wagh, Jun 08 '19 at 09:41
yes i saw that. I'll just give you basic idea though. Not complete code for that. You need to do other stuff own your own. — Vedprakash Wagh, Jun 08 '19 at 09:54
Just let me know how can i select one item at a time and mark it as ticked and when i change the selection, previous one should be unticked automatically — Muhammad Iqbal, Jun 08 '19 at 10:02

Vedprakash Wagh · Accepted Answer · 2019-06-08T10:18:02.703

Change your R.layout.horizontal_recycler_layout and make it like the one you want to achieve. Make sure the visibility of checkmark is GONE.
After doing that, change your ViewHolder to this.

public class ViewHolder extends RecyclerView.ViewHolder{
    View main;
    CircleImageView image;
    TextView name;

    public ViewHolder(View itemView) {
        super(itemView);
        main = itemView;
        image = itemView.findViewById(R.id.image_view);
        name = itemView.findViewById(R.id.name);
    }

}

Now, you saved the base view in a variable so that you can set OnClickListener to complete layout inside ViewHolder

After doing that, inside your onBindViewHolder, set onClickListener to your main from ViewHolder. Here's how,

holder.main.setOnClickListener(new View.OnClickListener...
        onClick(View view){
             iconOfCheckMark.setVisibility(View.Visible);
             holder.main.setBackgroundTintList(contextInstance.getResources().getColorStateList(R.color.your_xml_name));
        }
);

That will change tint of your complete View(make it blue), and you can see this to how to give tint properly.

To make it so it only selects one item at a time, you can check out the sites below:

Single Selection in RecyclerView

Will this ensure that only one item is selected at a time? – Muhammad Iqbal Jun 08 '19 at 10:07 — Muhammad Iqbal, Jun 08 '19 at 10:07

Make image as marked when clicked on in a recyclerview

1 Answers1