Circle View not sure why

[RobertoAlvarezCeballos]

Hi,

First of all thanks for the library.

I'm trying to create a simple demo to see how it works. I have your view declared as a row of a RecyclerView adapter.

<eu.davidea.flipview.FlipView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:animateFirstView="false"
    android:clickable="false"
    app:frontLayout="@layout/view_list_word_front"
    app:rearLayout="@layout/view_list_word_back">

</eu.davidea.flipview.FlipView>

The front and back are both just a simple CardView, empty.

If I run the code I see a circle shape with the front view as part of it. Where is this circle coming from? Why that shape? Why is not just showing the shape of the CardView?

Thanks

[davideas]

Thanks @RobertoIDL

🚴‍♂️ Short answer version: to animate big containers, the layouts have to stay as child views of FlipView, the properties frontLayout and rearLayout are intended for small Views like ImageView or TextView, possibly wrapped by a ViewGroup as well, but only for elevation purposes.
In order to activate the child views specified at design time, you need to set app:animateDesignLayoutOnly="true" (default=false). When false, the circle image is generated at runtime to simplify the customization for simple views instead.

Check content_flipviews.xml example, you will see the differences.

🚶‍♂️ Long version: when I created this project, I only wanted an ImageView that flipped as Gmail App was doing since no library was doing it nicely.
When I analyzed the different solutions, I found that ViewFlipper already works with child views, so I created the frontLayout and rearLayout properties to add some extra customization (elevation and text) and automatic round shape, but they are always added as first and second child view of the FlipView container with the only difference that, the view treats them as simple views. So I had to distinguish the 2 modes with the property animateDesignLayoutOnly.

💁‍♂️ Tips:
To add CardView, you should add the 2 CardView widgets as child views and activate the property designLayoutOnly and a padding with the clip setting to FlipView. And if you want the view flips when clicked, remember to set clickable=true:

<eu.davidea.flipview.FlipView
    ...
    android:padding="4dp"
    android:clipToPadding="false"
    android:clickable="true"
    app:animateDesignLayoutOnly="true">

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

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

</eu.davidea.flipview.FlipView>