androidandroid-recyclerviewtextviewandroid-linearlayoutanimator

android recyclerview - TextView is not expanding properly with setmaxlines method


I am new to android development. For my learning purpose, I am developing an android application to list the fibonacci numbers in a recycler view. The list gets appended with new numbers as the user scrolls down the recycler view.

The image shows the app displaying the index and respective fibonacci number for the index in the recycler view

enter image description here

This is the layout xml of single item in recycler view.

<?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="horizontal"
    android:clickable="false"
    android:focusable="false"
    android:padding="5dp">

    <TextView
        android:id="@+id/info_index"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:background="#CDD6D5"
        android:gravity="center"
        android:maxLines="1" />

    <TextView
        android:id="@+id/info_value"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#CDD6D5"
        android:gravity="center"
        android:maxLines="1" />

</LinearLayout>

Excerpt from the adaptor class,

public class ViewHolder extends RecyclerView.ViewHolder {
        final TextView index;
        final TextView value;

        ViewHolder(View itemView) {
            super(itemView);
            index = itemView.findViewById(R.id.info_index);
            value = itemView.findViewById(R.id.info_value);
        }
    }

    public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
        final TextView value = holder.value;
        final TextView index = holder.index;
        value.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.KITKAT)
            @Override
            public void onClick(View v) {
                if (value.getMaxLines() == 1000) {
                    value.setMaxLines(1);
                    notifyItemChanged(position);
                } else {
                    value.setMaxLines(1000);
                    notifyItemChanged(position);
                }
            }
        });
        Log.d(TAG, "position-value:" + String.valueOf(position));

        holder.index.setBackgroundColor(Color.WHITE);
        holder.index.setText(String.valueOf(position + 1));
        holder.value.setBackgroundColor(Color.WHITE);
        holder.value.setText(mData.get(position));

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            holder.index.setTextAlignment(View.TEXT_ALIGNMENT_TEXT_START);
            holder.value.setTextAlignment(View.TEXT_ALIGNMENT_TEXT_START);
        }

    }

When I click on the value textview, the textview does not expand on the first click, instead I have to press two times to make it expand. The first time only the flickering happens. I have tried disabling the animator for recyclerview, tried re using the same view in the recycler view, but nothings helps.

My requirement is to expand fibonacci-value textview on click. By default it should be 1 line and when clicked it should show the whole content with multiple lines (as many as required).

currently this happens with two clicks. first time flickering and second time expands.

I believe this is a bug in android code. But just want to confirm here for any solutions that I might have missed.


Solution

  • The reason of the flickering is that, each time an item is clicked, just after setting maxLines, you are calling notifyItemChanged (which is the correct thing to do), but as a result, before redrawing the item onBindViewHolder is called again. So, when it is called again, there should be a way to know current max lines for that item.

    Besides, if you try adding lots of items and scroll up and down, you'll see more bugs (since viewholders are reused) Thus, it is important to set/reset maxlines for each item inside onBindViewHolder (but outside click listener)

    Secondly, DefaultItemAnimator of RecyclerView uses cross-fade animation when an item changes and by default, it creates two viewholders for that position for cross-fading between the two. So, above, you set a clicklistener on your "value" textview and interfere with the textview inside onClick callback. However, when you later click and inform adapter that the item is changed, it binds the second viewholder instance. So when you click, your click is consumed with the previous "value" instance, and right afterwards a new instance is bound and you set a new clicklistener to this second viewholder instance.

    This is one of many reasons that interfering with viewholder items inside the click listener is error-prone. Sometimes people solve this kind of problems with setTag/getTag but I think it is similarly error-prone as well.

    I think the easiest solution is to use a POJO (plain old java object) for each item and include the maxLine state in this POJO. Something like FibonacciItem with fields such as int: index, String: fibonacciNumber, boolean : expanded. Then you will provide the list as a list of FibonacciItems. And inside your click listener, you'll update maxlines of the clicked item. Something like this:

    public void onClick(View v) {
          if (mList.get(position).isExpanded()) {
              mList.get(position).setExpanded(false);
              notifyItemChanged(position);
          } else {
              mList.get(position).setExpanded(true);
              notifyItemChanged(position);
          }
    

    }

    And inside your onBindViewHolder, (but outside your click listener) you should set max lines for each item according to this value:

    if(mList.get(position).isExpanded(){
        holder.value.setMaxLines(1);
     } else {
        holder.value.setMaxLines(1000);
     }
    

    This will solve the issue. Besides, we usually use POJOs (or data classes) for each item in a list. It is easier to manage.