RecyclerView bug on selected item

Question

I've implemented an HorizontalScrollView with a RecyclerView data, the problem is that on my Adapter code, I've implemented a logic that when an item is clicked it zooms. The problem is crearly on this video, I have no clue what's going on - I tested everything with a class with a boolean or int saying that this item is clicked and then on theonBindViewHolder ask for this item and if it's clicked, then zoom again, and if it's not then zoom.

I know it's confusing, but with the video helps explain.

My list_row.xml is :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/RLimage"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        >

        <ImageView
            android:layout_centerInParent="true"
            android:id="@+id/thumbnail"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            />

    </RelativeLayout>
    <RelativeLayout
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/RLimage"
        >
        <TextView
            android:layout_marginTop="14dp"
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=""
            android:textColor="#222"
            android:textSize="12sp"/>
    </RelativeLayout>


</RelativeLayout>

The fragment where I have this RecyclerView is this :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_weight="1">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcyList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="-20dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />

</FrameLayout>

This is my onCreateView() from my Fragment

@Override
public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
    this.mContext = getActivity();
    View rootView = inflater.inflate(R.layout.fragment_carta, container, false);
    rv = (RecyclerView) rootView.findViewById(R.id.rcyList);
    CustomLinearLayoutManager layoutManager = new CustomLinearLayoutManager(mContext);
    layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    rv.setLayoutManager(layoutManager);
    // Adding code here
    dataModelList = new ArrayList<dataModel>();
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    dataModelList.add(new dataModel(ContextCompat.getDrawable(mContext, R.mipmap.ic_launcher),"1234"));
    adapter = new MyRecyclerViewAdapter(mContext, dataModelList);
    rv.setAdapter(adapter);

    return rootView;

}

And the adapter is this :

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.CustomViewHolder> {

private Context mContext;
View animatedView = null;
private List<dataModel> dataModelList;
int animatedIndex = -1; // Initially no view is clicked so -1
//private PopulateListView populateListview;


public MyRecyclerViewAdapter(Context context, List<dataModel> items) {
    this.dataModelList = items;
    this.mContext = context;
    //this.populateListview = populateListview;
}

@Override
public CustomViewHolder onCreateViewHolder(ViewGroup viewGroup, final int i) {
    //View per each row
    final View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, null);
    CustomViewHolder viewHolder = new CustomViewHolder(view);
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if (animatedView == null) {
                animatedView = view;
            } else {
                animatedView.setAnimation(null);
                animatedView = view;
            }
            ScaleAnimation fade_in = new ScaleAnimation(1f, 1.2f, 1f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            fade_in.setDuration(200);     // animation duration in milliseconds
            fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            view.startAnimation(fade_in);
        }
    });
    return viewHolder;
}


@Override
public void onBindViewHolder(final CustomViewHolder customViewHolder, final int i) {
    //Setting text view title and drawable
    dataModel dataModel = dataModelList.get(i);
    customViewHolder.imageView.setImageDrawable(dataModel.icon);
    customViewHolder.textView.setText(dataModel.title);

    if(animatedIndex == i){
        ScaleAnimation fade_in = new ScaleAnimation(1f, 1.2f, 1f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        fade_in.setDuration(200);     // animation duration in milliseconds
        fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
        customViewHolder.itemView.startAnimation(fade_in);
    }

    customViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            animatedIndex = i;
            if (animatedView == null) {
                animatedView = customViewHolder.itemView;
            } else {
                animatedView.setAnimation(null);
                animatedView = customViewHolder.itemView;
            }
            //populateListview.PopulateListView(String.valueOf(i));
            ScaleAnimation fade_in = new ScaleAnimation(1f, 1.2f, 1f, 1.2f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            fade_in.setDuration(200);     // animation duration in milliseconds
            fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
            customViewHolder.itemView.startAnimation(fade_in);
        }
    });
}

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

public class CustomViewHolder extends RecyclerView.ViewHolder {
    protected ImageView imageView;
    protected TextView textView;

    public CustomViewHolder(View view) {
        super(view);
        this.imageView = (ImageView) view.findViewById(R.id.thumbnail);
        this.textView = (TextView) view.findViewById(R.id.title);
    }
}

NOTE : I'm also using this class to avoid the scroll if it's not on the RecyclerView

TL;DR

The main problem is that with this code I can zoom an item BUT there are moments that when I'm scrolling (left or right) this item losses the zoom and I don't know why. The bug that is shown on the video is the critical bug I guess...

Answer 1

This is happening because your RecyclerView, by definition, is recycling its views. When a view pops out of the bounds of the RecyclerView, it is scrapped, and then bound with a different data model. The view's transformation data (translate, scale, rotation) is reset when this happens.

To overcome this issue, you'll need add some indication that the view is zoomed to the data model (such as isSelected).

In your onBindViewHolder method, you'll need to check the data model if the view is selected, and if so, set the scale of the view to 1.2, otherwise, 1.0. Note that here you'll want to SET the scale, not animate the scale, because we assume that the animation already occurred when the user touched the view. When we are binding the data on the view, we're merely trying to recreate the state of the view to what it was last time it was bound.

In your onCreateViewHolder method, you're setting the onClickListener on the inflated view. Inside this new onClick method, you should set the new "isSelected" field to true / false depending on the previous value.

In your onBindViewHolder method, you should remove the code adding a new onClickListener (because this is redundant). Here you should check if the dataModel.isSelected value and set the scaleX/scaleY accordingly.

Remember, the views inside the RecyclerView should be considered raw templates, and driven by the data that you bind them with in the onBindViewHolder method. You cannot rely on what already exists in them (such as their animation value, etc).