Expandable and Collapsible TextView with Ellipsis in a RecyclerView's CardView

Question

What is an optimal way to expand and collapse a TextView with ellipses in a RecyclerView's CardView programmatically?

For example: "...See more"

I was looking for some guides about how to make a functional expandable and collapsible "...See more" or "Continue Reading" features but I wasn't satisfied with most of them so I came up with my own and I'd like to share it with everyone especially those who use Firebase Recycler Adapter to display their data. Hope this helps someone who is undergoing the same problem I went through.

Answer 1

First thing you need to do is to set your CardView's height to wrap_content.
Everything else after that will be done programmatically using Java.

Next, you place this method inside your ViewHolder that extends RecyclerView.ViewHolder:

 private void Ellipsize(boolean activate, TextView textView){

        if (activate) {
            textView.setSingleLine(true);
            textView.setEllipsize(TextUtils.TruncateAt.END);
        }
        else{
            textView.setSingleLine(false);
            textView.setEllipsize(null);
        }
    }

Call the Ellipsize(boolean activate, TextView textView); and pass in the necessary arguments. Pass in true and your_long_text_view to give it an ellipsis.

void setText(String text){
        TextView textTV = itemView.findViewById(R.id.TEXTVIEW_ID);
        textTV.setText(text);
        Ellipsize(true, textTV);
    }

To give your TextView an Expand and Collapse functionality, add this method in your ViewHolder:
The boolean value of isExpanded is false and is declared globally.

    private void ExpandCollapse(final TextView textView, final View view){

        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isExpanded) {
                    TransitionManager.beginDelayedTransition((ViewGroup) view.getRootView(), new AutoTransition());
                    Ellipsize(false, textView);
                }
                else{
                    TransitionManager.beginDelayedTransition((ViewGroup) view.getRootView(), new AutoTransition());
                    Ellipsize(true, textView);
                }
                isExpanded = !isExpanded;
            }
        });

    }
  

After adding all the necessary methods, call them in your onBindViewHolder and pass in your TextView that is declared globally in your ViewHolder class as well as your itemView

 @Override
        protected void onBindViewHolder(@NonNull final ViewHolder holder, final int position, @NonNull final Model model) {
            holder.setText(model.getText());
            holder.ExpandCollapse(holder.textTV, holder.itemView);

        }