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,
//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.
Written By
Android App development is today key of the market. There are huge kinds of applications available in a market as per your requirement. But usability of application depends on two things one is its Ui/Ux and second is the performance. As the designer is designing such as fascinating designs for apps. But after that designer need help to developer also for its slicing and further things as such as ...
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...
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.Now what do we need for Android programming: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.When we are use Web Services to handle...