CODEWITHSUNDEEP
android-recyclerviewviewflipper
Vishwanath.M
Vishwanath.M

Reputation: 6317

Flip animation for Cards in RecyclerView

Am having a horizontal recycler view of 5 cards, On click on each card i have to flip that card and show new card in that clicked card position, How do i do this.?

I had tried with ViewFlipper, But no luck.

Upvotes: 2

Views: 3366

Answers (1)

mr.kostua
mr.kostua

Reputation: 724

Possible solution is to use this library : EasyFlipView

Short example of how to use it in RecycleView :

Use this .xml layout as Adapter view item. Pay attention to adding back side layout (back side of card to flip) as first after EasyFlipView, because it is the way this library recognize which layout will be Front or Back.

<com.wajahatkarim3.easyflipview.EasyFlipView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/flipView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flipDuration="400"
    app:flipEnabled="true"
    app:flipType="horizontal"
    app:flipOnTouch="false">
    <!--Back-->
    <include
        android:id="@+id/backSide"
        layout="@layout/back_activity" />

    <!--Front-->
    <include
        android:id="@+id/frontSide"
        layout="@layout/front_activity" />

</com.wajahatkarim3.easyflipview.EasyFlipView>

After in your CustomRecycleViewAdapter where you will bind your view. Set ClickListener for backSide and frontSide with body to flip the card as shown bellow (example in Kotlin) : 

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    holder.bind(data[position])
}

inner class ViewHolder(private val view: View) : 
       RecyclerView.ViewHolder(view) {
 private val backSide: ConstraintLayout = view.findViewById(R.id.backSide)
 private val frontSide: ConstraintLayout = view.findViewById(R.id.frontSide)
 private val flipView: EasyFlipView = view.findViewById(R.id.flipView)

 init{
  backSide.setOnClickListener {
            flipView.flipDuration = 1000
            flipView.flipTheView()
        }
   frontSide.setOnClickListener {
            flipView.flipDuration = 1000
            flipView.flipTheView()
        }
 }
 fun bind(item: SomeData) {//.... }

}

All credit to author of this library, link - https://github.com/wajahatkarim3/EasyFlipView

Upvotes: 2

Related Questions