How to flip items in RecyclerView

Suchi Bansal
Sep 2, 2018 · 1 min read

I came across to the interesting requirement to flip all Recyclerview items with animation one by one on button click .So here i am sharing my code snippets and git repo URL .

Create Views:We need to create two views in one layout for front and back view in the list

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical"
app:cardElevation="7dp"
>

<RelativeLayout
android:id="@+id/card_back"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#551a8b"
>

<TextView
android:id="@+id/item_tx_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="bye"
android:textColor="@android:color/white"
/>

</RelativeLayout>

<RelativeLayout
android:id="@+id/card_front"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/holo_blue_dark"
>

<TextView
android:id="@+id/item_tx__front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="HI"
android:textStyle="bold"
/>

</RelativeLayout>

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

Create Animator files: We need to create for animation file ,i am using objectAnimator to animate object.Those files you can access from my github repo.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0"
/>
<objectAnimator
android:valueFrom="-180"
android:valueTo="0"
android:propertyName="rotationX"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full"
/>
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1"
/>
</set>

I am using EventBus here to get the tigger when the animation of first row is getting finished. I am not posting whole code here just shared some basic things to start you can download code from the my github repo.

Check out this video to see end result.

Check out my github repo for flip animation in recyclerview

https://github.com/Suchiq/RecycleViewFlipCardAnimation

Written by

Software Engineer (Android) -> Forever falling for waterfalls and wanderlust.” Contact me: suchibansal2007@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade