Expand/Collapse Recyclerview with custom animation

Written by

Hey guys, I was playing with Recyclerview. In this view Recyceerview can expand to particular and can collapse to its original state. It was a fun task.! I hope you are familiar with RecyclerView.

Now we will step into RecylerView adapter which is holding your item, and you can start coding inside ViewHolder of a card,

Lets first create slide up and slide down xml files.

//slide up xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <scale
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="0.0" />

</set>

//slide down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

2. Let design the layout part.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_item_order"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/selectableItemBackground">

    <com.dev.gonatuur.views.GoNatuurMontserratSemiBoldTextView
        android:id="@+id/tv_order"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:gravity="center_vertical"
        android:paddingBottom="8dp"
        android:paddingLeft="10dp"
        android:paddingTop="8dp"
        android:text="@string/purchase_order"
        android:textColor="@color/colorBlack"
        android:textSize="@dimen/font_medium" />

    <com.dev.gonatuur.views.GoNatuurMontserratRegularTextViewNew
        android:id="@+id/tv_orderId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@+id/toggle"
        android:layout_toRightOf="@+id/tv_order"
        android:gravity="center_vertical"
        android:paddingBottom="12dp"
        android:paddingLeft="2dp"
        android:paddingRight="0dp"
        android:paddingTop="12dp"
        android:text=""
        android:textColor="@color/colorBlack"
        android:textSize="@dimen/font_medium" />

    <com.dev.gonatuur.views.GoNatuurMontserratRegularTextViewNew
        android:id="@+id/tv_orderDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_order"
        android:paddingBottom="20dp"
        android:paddingLeft="10dp"
        android:text=""
        android:textColor="@color/colorBlack"
        android:textSize="@dimen/font_normal" />

    <LinearLayout
        android:id="@+id/ll_expandView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_orderDate"
        android:background="@color/colorLightPink"
        android:orientation="vertical"
        android:padding="10dp"
        android:visibility="gone"
        tools:visibility="visible">

        <LinearLayout
            android:id="@+id/ll_upper_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2"
            android:baselineAligned="false">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.3"
                android:orientation="vertical">

                <com.dev.gonatuur.views.GoNatuurMontserratSemiBoldTextView
                    android:id="@+id/tv_ship_heading"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:paddingTop="10dp"
                    android:text="@string/label_ship_to"
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_medium" />

                <com.dev.gonatuur.views.GoNatuurTextView_Montserrat_Light
                    android:id="@+id/tv_ship_data"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="2"
                    android:paddingBottom="5dp"
                    android:text=""
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_normal" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_lower_layout"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:orientation="vertical">

                <com.dev.gonatuur.views.GoNatuurMontserratSemiBoldTextView
                    android:id="@+id/tv_price_heading"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:paddingTop="10dp"
                    android:text="@string/label_status"
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_medium" />

                <com.dev.gonatuur.views.GoNatuurTextView_Montserrat_Light
                    android:id="@+id/tv_status_data"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:text=""
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_normal" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2"
            android:baselineAligned="false">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.3"
                android:orientation="vertical">

                <com.dev.gonatuur.views.GoNatuurMontserratSemiBoldTextView
                    android:id="@+id/tv_billing_heading"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:paddingTop="10dp"
                    android:text="@string/label_bill_to"
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_medium" />

                <com.dev.gonatuur.views.GoNatuurTextView_Montserrat_Light
                    android:id="@+id/tv_billing_value"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="2"
                    android:paddingBottom="5dp"
                    android:text=""
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_normal" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:orientation="vertical">

                <com.dev.gonatuur.views.GoNatuurMontserratSemiBoldTextView
                    android:id="@+id/tv_status_heading"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:lines="1"
                    android:paddingBottom="5dp"
                    android:paddingTop="10dp"
                    android:text="@string/label_price"
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_medium" />

                <com.dev.gonatuur.views.GoNatuurTextView_Montserrat_Light
                    android:id="@+id/tv_priceValue"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="1"
                    android:paddingBottom="5dp"
                    android:text=""
                    android:textColor="@color/colorBlack"
                    android:textSize="@dimen/font_normal" />
            </LinearLayout>
        </LinearLayout>

        <com.dev.gonatuur.views.GoNatuurMontserratRegularTextViewNew
            android:id="@+id/tv_view_more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_drawable_selector_more"
            android:paddingBottom="5dp"
            android:paddingLeft="7dp"
            android:paddingRight="7dp"
            android:paddingTop="5dp"
            android:text="@string/view_more"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textSize="@dimen/font_small" />
    </LinearLayout>

    <ImageView
        android:id="@+id/toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/tv_orderId"
        android:layout_alignEnd="@+id/view2"
        android:layout_marginRight="10dp"
        android:contentDescription="@null"
        android:src="@drawable/ic_arrow" />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@+id/tv_orderDate"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/colorGray" />
</RelativeLayout>

3. Let initialling animation in Adapter class.

final Animation animationUp;
animationUp = AnimationUtils.loadAnimation(context, R.anim.slide_up);
holder.getExpand().setVisibility(View.GONE);
holder.getExpand().startAnimation(animationUp);
RotateAnimation ra = new RotateAnimation(90, 0);
ra.setFillAfter(true);
ra.setDuration(500);//set duration for delay.
holder.getToggle().startAnimation(ra);

Hope this code snippet will be helpful if you wanna try something like this in your Recyclerview.

November 1, 2017

in:

Android Studio

Share on:

Expand/Collapse Recyclerview with custom animation

Like this:

Join the discussion

Leave a Reply Cancel reply

Expand/Collapse Recyclerview with custom animation

Share this:

Like this:

Join the discussion

Leave a Reply Cancel reply