Expand/Collapse Recyclerview with custom animation

Android Studio

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,

  1. 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.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Android
Android: Overdraw, Why Should We Care?

Recently I am looking for new stuff for you and i found really interesting fact of our android app. Which is very interesting, Have you look it your android app, why it is slow or and crashes happens some time, all those dispute things happen because we are doesn’t carrying …

Android
Android basic app

Today I’ll tell you how to start with Android. For the readers who are familiar with basics of Java, it will be easier for them as code is written for Android apps requires Java programming.

Android
2
Animated Splash Screen to you Android App using Android Studio

Today I am switching you to one finest technology of this world and that is Android. In this tutorial I am showing you how you can create a animated Splash screen which is the first part of any android application creation.