How to select a selected item in a RecyclerView

Question

I used RecyclerView to show thumbnails in an image editing application. Each element consists of an ImageView (thumbnail) and a text element. In my application, I want to highlight only the currently selected thumbnail when I click on all related posts on SO, but could not find a better solution.

My adapter class

public class FiltersAdapter extends RecyclerView.Adapter<FiltersAdapter.ViewHolder> { private Context mContext; private List<Type> mDataSet; private Uri selectedPhoto; public enum Type { Original, Grayscale, Sepia, Contrast, Invert, Pixel, Sketch, Swirl, Brightness, Vignette } public FiltersAdapter(Context context, List<Type> dataSet, Uri selectedPhoto) { mContext = context; mDataSet = dataSet; this.selectedPhoto = selectedPhoto; } @Override public FiltersAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v = LayoutInflater.from(mContext).inflate(R.layout.list_item_layout, parent, false); return new ViewHolder(v); } @Override public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) { switch (mDataSet.get(position)) { case Original: holder.image.setImageResource(R.drawable.no_filter); break; case Grayscale: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new GrayscaleTransformation()) .into(holder.image); break; case Sepia: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SepiaFilterTransformation(mContext)) .into(holder.image); break; case Contrast: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new ContrastFilterTransformation(mContext, 2.0f)) .into(holder.image); break; case Invert: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new InvertFilterTransformation(mContext)) .into(holder.image); break; case Pixel: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new PixelationFilterTransformation(mContext, 20)) .into(holder.image); break; case Sketch: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SketchFilterTransformation(mContext)) .into(holder.image); break; case Swirl: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SwirlFilterTransformation(mContext, 0.5f, 1.0f, new PointF(0.5f, 0.5f))) .into(holder.image); break; case Brightness: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new BrightnessFilterTransformation(mContext, 0.5f)) .into(holder.image); break; case Vignette: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new VignetteFilterTransformation(mContext, new PointF(0.5f, 0.5f), new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f)) .into(holder.image); break; default: holder.image.setImageResource(R.drawable.no_filter); break; } holder.title.setText(mDataSet.get(position).name()); } @Override public void onViewAttachedToWindow(ViewHolder holder) { super.onViewAttachedToWindow(holder); } @Override public int getItemCount() { return mDataSet.size(); } @Override public int getItemViewType(int position) { return position; } static class ViewHolder extends RecyclerView.ViewHolder { public ImageView image; public TextView title; ViewHolder(View itemView) { super(itemView); image = (ImageView) itemView.findViewById(R.id.thumbnailImage); title = (TextView) itemView.findViewById(R.id.title); } } } 

Fragment Code

 horizontalFilters = (RecyclerView) mView.findViewById(R.id.rvHorizontal); LinearLayoutManager horizontalLayoutManagaer = new LinearLayoutManager(getContext(), LinearLayoutManager.HORIZONTAL, false); horizontalFilters.setLayoutManager(horizontalLayoutManagaer); List<Type> dataSet = new ArrayList<>(); dataSet.add(Type.Original); dataSet.add(Type.Grayscale); dataSet.add(Type.Sepia); dataSet.add(Type.Contrast); dataSet.add(Type.Invert); dataSet.add(Type.Pixel); dataSet.add(Type.Sketch); dataSet.add(Type.Swirl); dataSet.add(Type.Brightness); dataSet.add(Type.Vignette); horizontalFilters.setAdapter(new FiltersAdapter(act, dataSet, selectedPhotoUri)); horizontalFilters.addOnItemTouchListener(new RecyclerClick(act, horizontalFilters, new RecyclerClickListener() { @Override public void onClick(View view, int position) { switch (position){ case 0: photo.setImageDrawable(drawable); break; case 1: Picasso.with(act) .load(selectedPhotoUri) .transform(new GrayscaleTransformation()) .into(photo); break; case 2: Picasso.with(act) .load(selectedPhotoUri) .transform(new SepiaFilterTransformation(act)) .into(photo); break; case 3: Picasso.with(act) .load(selectedPhotoUri) .transform(new ContrastFilterTransformation(act, 2.0f)) .into(photo); break; case 4: Picasso.with(act) .load(selectedPhotoUri) .transform(new InvertFilterTransformation(act)) .into(photo); break; case 5: Picasso.with(act) .load(selectedPhotoUri) .transform(new PixelationFilterTransformation(act, 20)) .into(photo); break; case 6: Picasso.with(act) .load(selectedPhotoUri) .transform(new SketchFilterTransformation(act)) .into(photo); break; case 7: Picasso.with(act) .load(selectedPhotoUri) .transform(new SwirlFilterTransformation(act, 0.5f, 1.0f, new PointF(0.5f, 0.5f))) .into(photo); break; case 8: Picasso.with(act) .load(selectedPhotoUri) .transform(new BrightnessFilterTransformation(act, 0.5f)) .into(photo); break; case 9: Picasso.with(act) .load(selectedPhotoUri) .transform(new VignetteFilterTransformation(act, new PointF(0.5f, 0.5f), new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f)) .into(photo); break; default: photo.setImageDrawable(drawable); break; } } @Override public void onLongClick(View view, int position) { } })); } 

Answer 1

Just add this line below to bindView

 holder.itemView.setBackgroundColor(Color.parseColor("#000000")); 

will work for you.

if you want to highlight the selected item just follow below

set global

 int selectedPosition=-1; 

inside onBindViewHolder -

 public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) { if(selectedPosition==position) holder.itemView.setBackgroundColor(Color.parseColor("#000000")); else holder.itemView.setBackgroundColor(Color.parseColor("#ffffff")); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { selectedPosition=position; notifyDataSetChanged(); } }); } 

Answer 2

Use the background selector and set it in the android: background property in the xml layout for the recyclerview element

background_selector.xml

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="false" android:state_selected="true"> <shape> <solid android:color="@color/lightPrimaryColor" /> </shape> </item> <item android:state_selected="false"> <shape> <solid android:color="@android:color/transparent" /> </shape> </item> </selector> 

recyclerview_item.xml (background_selector set to android: background property)

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/background_selector" android:orientation="vertical" android:paddingBottom="8dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="8dp"> 

And then the place where you get the click event, you can set it as selected using the View function

view.setSelected (true)

You will need to implement the logic when you want to deselect / select an element while maintaining the position of the selected elements

Answer 3

first update your list of enums for the class

 public class Type { public int type; // 0-Original,1-Grayscale,2-Sepia.... same as enum public int selected; } 

now in the adapter

 @Override public void onBindViewHolder(FiltersAdapter.ViewHolder holder, int position) { int typeOfItem = mDataSet.get(position).type switch (mDataSet.get(position)) { case 0: holder.image.setImageResource(R.drawable.no_filter); break; case 1: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new GrayscaleTransformation()) .into(holder.image); break; case 2: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SepiaFilterTransformation(mContext)) .into(holder.image); break; case 3: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new ContrastFilterTransformation(mContext, 2.0f)) .into(holder.image); break; case 4: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new InvertFilterTransformation(mContext)) .into(holder.image); break; case 5: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new PixelationFilterTransformation(mContext, 20)) .into(holder.image); break; case 6: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SketchFilterTransformation(mContext)) .into(holder.image); break; case 7: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new SwirlFilterTransformation(mContext, 0.5f, 1.0f, new PointF(0.5f, 0.5f))) .into(holder.image); break; case 8: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new BrightnessFilterTransformation(mContext, 0.5f)) .into(holder.image); break; case 9: Picasso.with(mContext) .load(R.drawable.no_filter) .transform(new VignetteFilterTransformation(mContext, new PointF(0.5f, 0.5f), new float[]{0.0f, 0.0f, 0.0f}, 0f, 0.75f)) .into(holder.image); break; default: holder.image.setImageResource(R.drawable.no_filter); break; } holder.title.setText(mDataSet.get(position).name()); if(mDataSet.get(position).selected == 0){ holder.title.setTypeface(null, Typeface.BOLD); } else { holder.title.setTypeface(null,Typeface.NORMAL); } } 

not on every click or select update your list, then call the adapter notifydatasetChanged ()