如何在RecyclerView中展开和折叠卡片？

Question

I have gone through 20-30 links on internet but none of them was helpful as every code has certain limitations. I have cards in a RelativeLayout in RecyclerView which i want to expand on clicking the Details button. CardViews have simply textViews and Buttons inside them NOT Lists. Please have a look at my code and help me in how can i achieve this.

activity_phrase_search.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_phrase_search"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="in.hkcl.pdfsearcher.PhraseSearchActivity"
    android:background="#EEEEEE">

    <include android:id="@+id/toolbar"
        layout="@layout/toolbar_layout"></include>

    <EditText
        android:id="@+id/inputSearchPhrase"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:gravity="center_vertical"
        android:maxLines="1"
        android:padding="5dp"
        android:textColor="#004D40"
        android:inputType="text"
        android:ellipsize="end"
        android:scrollHorizontally="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/search_edittext"
        android:ems="10"
        android:hint="Search your phrase here ..."
        android:drawableLeft="@drawable/search"
        android:drawableRight="@drawable/deletetext"
        android:drawablePadding="12dp"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclrviewPhrase"
        android:layout_marginTop="8dp"
        android:layout_below="@id/inputSearchPhrase"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:behavior_overlapTop="14dp" />

component_phrase_list.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#9E9E9E"
    android:clickable="true"
    android:focusable="true"
    android:paddingBottom="4dp"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:paddingTop="8dp"
    >
    <android.support.v7.widget.CardView
        android:id="@+id/outerBoundaryCard"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:elevation="4dp"
        android:background="?android:attr/selectableItemBackground">
        <RelativeLayout
            android:id="@+id/visible_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="10dp">
    <TextView
        android:id="@+id/documentName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:gravity="center_vertical"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/details_btn"
        android:layout_below="@id/documentName"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginTop="5dp"
        android:text="Details"
        android:textColor="#FFFFFF"
        android:background="#FBCC38"
        android:textStyle="bold"/>

    <ImageButton
        android:id="@+id/link_btn"
        android:layout_below="@id/documentName"
        android:src="@drawable/link"
        android:layout_toLeftOf="@id/details_btn"
        android:layout_marginTop="5dp"
        android:layout_marginRight="10dp"
        android:layout_width="50dp"
        android:layout_height="40dp"
        android:background="#FFFFFF"/>

        </RelativeLayout>

    </android.support.v7.widget.CardView>

    <LinearLayout
        android:id="@+id/hidden_layout"
        android:layout_below="@id/outerBoundaryCard"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <TextView
        android:id="@+id/expanded_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"/>
    </LinearLayout>

    <View
        android:id="@+id/hr"
        android:layout_below="@id/hidden_layout"
        android:layout_marginTop="5dp"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#FFFFFF"></View>

</RelativeLayout>

RecyclerViewAdapterPhraseList.java :

package in.hkcl.pdfsearcher;

import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.support.transition.TransitionManager;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

/**
 * Created by Android on 11/17/2017.
 */

public class RecyclerViewAdapterPhraseList extends RecyclerView.Adapter<RecyclerViewAdapterPhraseList.PhraseListHolder> {

    private ArrayList<PhraseModel.PhraseList> mPhraseList;
    public  boolean isExpanded=false;


    public class PhraseListHolder extends RecyclerView.ViewHolder {
        TextView documentName,expanded_text;
        Button detailsBtn;
        ImageButton linkBtn;
        LinearLayout hidden_layout;

        /*RelativeLayout expandable_view;*/

        public PhraseListHolder(View itemView) {
            super(itemView);
            documentName=(TextView)itemView.findViewById(R.id.documentName);
            detailsBtn=(Button)itemView.findViewById(R.id.details_btn);
            linkBtn=(ImageButton)itemView.findViewById(R.id.link_btn);
            expanded_text=(TextView)itemView.findViewById(R.id.expanded_text);
            hidden_layout=(LinearLayout)itemView.findViewById(R.id.hidden_layout);
            /*expandable_view=(RelativeLayout)itemView.findViewById(R.id.expandable_view);*/
        }
    }

    public RecyclerViewAdapterPhraseList(ArrayList<PhraseModel.PhraseList> mPhraseList) {
        this.mPhraseList = mPhraseList;
    }

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

    @Override
    public void onBindViewHolder(final RecyclerViewAdapterPhraseList.PhraseListHolder holder, final int position) {
        String documentNameWithoutUrl=mPhraseList.get(position).documentName;

        holder.documentName.setText(documentNameWithoutUrl.substring(documentNameWithoutUrl.lastIndexOf('/')+1, documentNameWithoutUrl.length()));
        holder.linkBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse(mPhraseList.get(position).getDocumentName()));
                v.getContext().startActivity(i);

            }
        });

        holder.detailsBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*Intent j = new Intent (v.getContext(), OccurenceDetailsActivity.class);
                j.putParcelableArrayListExtra("occurences",mPhraseList.get(position).getOccurenceDetails());
                v.getContext().startActivity(j);*/
                holder.expanded_text.setVisibility(View.VISIBLE);
                holder.expanded_text.setEnabled(true);
                holder.expanded_text.setText(mPhraseList.get(position).getNoOfOccurences());

            }
        });
    }

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

Earlier links on stackoverflow are not according to my code so i am facing a lot of issues in implementing them. Plz help how can i do this?

Answer 1

In my opinion, the expansion and collapsing of the Card can be be done by animating the height of the TextView with the id expanded_text instead of just toggling the visibility.

The implementation of the expanding/collapsing animation can be done in the following manner:

holder.detailsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            /*Intent j = new Intent (v.getContext(), OccurenceDetailsActivity.class);
            j.putParcelableArrayListExtra("occurences",mPhraseList.get(position).getOccurenceDetails());
            v.getContext().startActivity(j);*/


            holder.expanded_text.setText(mPhraseList.get(position).getNoOfOccurences());

            // Object Animator to animate the expanded_text TextView 
            ObjectAnimator scaleHeightAnim;

            // Checking if the TextView is already visible, if "yes", 
            //animating and collapsing the TextView, else expanding the TextView. 
            if (expanded_text.getVisibility() == View.VISIBLE) {

                AnimatorSet animatorSet = new AnimatorSet();

                scaleHeightAnim = ObjectAnimator.ofFloat(expanded_text, "height", expanded_text.getHeight(), 0);

                animatorSet.play(scaleHeightAnim);
                animatorSet.setDuration(1000);
                animatorSet.start();

                animatorSet.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);
                        expanded_text.setVisibility(View.GONE);
                    }
                });

            } else {

                AnimatorSet animatorSet = new AnimatorSet();

                expanded_text.setVisibility(View.VISIBLE);
                scaleHeightAnim = ObjectAnimator.ofFloat(expanded_text, "height", 0, expanded_text.getHeight());

                animatorSet.play(scaleHeightAnim);
                animatorSet.setDuration(1000);
                animatorSet.start();
            }

        }
    });

I hope this tip helps you add soft animation effect to the expansion/collapse of the details text in the CardView. Let me know if there are any concerns.

Thank you. :)

Answer 2

I have made some changes in your layout and adapter

// here is your hidden layout

<LinearLayout
        android:id="@+id/hidden_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/outerBoundaryCard"
        android:background="@color/colorPrimaryDark"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/expanded_text"
            />
    </LinearLayout>

// here is your viewholder

public class PhraseListHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
    TextView documentName, expanded_text;
    Button detailsBtn;
    ImageButton linkBtn;
    LinearLayout hidden_layout;

    /*RelativeLayout expandable_view;*/

    public PhraseListHolder(View itemView) {
        super(itemView);
        documentName = itemView.findViewById(R.id.documentName);
        detailsBtn = itemView.findViewById(R.id.details_btn);
        linkBtn =  itemView.findViewById(R.id.link_btn);
        expanded_text = itemView.findViewById(R.id.expanded_text);
        hidden_layout = itemView.findViewById(R.id.hidden_layout);

        detailsBtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        hidden_layout.setVisibility(View.VISIBLE);
        hidden_layout.setEnabled(true);
     expanded_text.setText(mPhraseList.get(getAdapterPosition()).getNoOfOccurences());
    }
}

tell me if it solves your problem

Answer 3

Your code is working fine, you already have expansion code on your detailsBtn click. Just check for the value of "mPhraseList.get(position).getNoOfOccurences()" for empty, I think it gives you empty string.