Expand/Collapse Recyclerview with custom animation

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.
Join the discussion