Flipping CardView in RecyclerView
Asked Answered
I

2

4

I am trying to implement a CardView flip in a RecyclerView. I just cannot figure out a simple solution. I have a working CardView where i can display a list of card using the recycler view. The problem is, how to show the back of the card if user click the card. I want to use animation and change the front of the card to the back of the card. Can someone give a simple animation and example of the card layout. My current example is pretty much copy of this example where a new activity is being created. Where as i need the card to flip 180 degree and show the description. Is the a way to achieve it?

+------------------+ +------------------+
|+----------------+| |+----------------+|
||  front         || ||  back          ||
|+----------------+| |+----------------+|
|+----------------+| |+----------------+|
||  front         || ||  front         ||
|+----------------+| |+----------------+|
Idyllist answered 9/7, 2015 at 18:19 Comment(1)
No one should do this for you. Read thisKelliekellina
S
2

I know this is an old question,but this answer may help someone in future.

You can make use of this library

https://github.com/sachinvarma/EasyFlipView

Put this inside your gradle,

compile 'com.github.sachinvarma:EasyFlipView:2.0.4'

The xml will be like,

<com.wajahatkarim3.easyflipview.EasyFlipView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flipOnTouch="true"
    app:flipEnabled="true"
    app:flipDuration="400"
    app:flipType="vertical" //horizontal or vertical
    >

    <!-- Back Layout Goes Here -->
    <include layout="@layout/flash_card_layout_back"/>

    <!-- Front Layout Goes Here -->
    <include layout="@layout/flash_card_layout_front"/>

</com.wajahatkarim3.easyflipview.EasyFlipView>

You can see a demo gif here.

Thanks to Wajahat karim.

Sweatt answered 18/12, 2017 at 12:4 Comment(0)
T
0

You could use a ViewFlipper. It's a standard Android widget.

Teth answered 9/7, 2015 at 22:7 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.