Strange shadow behaviour during card flip

Question

I have implemented a card flip animation, like described here. Everything seems to work fine, except the shadows, which behave strangely during the flip (as can be seen here). Because these shadows are caused by the elevation, this graphical error disappears when I set the elevation to 0. However, I would prefer not to disable the shadows.

How can I fix this animation without disabling the elevation, or is this impossible?

FlashcardFragment.java

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    this.cardFront = (CardView) this.getView().findViewById(R.id.flashcard_front);
    this.cardBack  = (CardView) this.getView().findViewById(R.id.flashcard_back );

    this.getView().setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View view){
            flip();
        }
    });

    float scale = this.getResources().getDisplayMetrics().density * 8000;
    this.cardFront.setCameraDistance(scale);
    this.cardBack.setCameraDistance(scale);
    this.cardBack.setAlpha(0.0f); // hides back of card
}

public void flip() {
    if (this.flipped) return;
    this.flipped = true;

    AnimatorSet animationOut = (AnimatorSet) AnimatorInflater.loadAnimator(this.getContext(), R.animator.flashcard_flip_out);
    AnimatorSet animationIn  = (AnimatorSet) AnimatorInflater.loadAnimator(this.getContext(), R.animator.flashcard_flip_in );

    animationOut.setTarget(this.cardFront);
    animationIn.setTarget(this.cardBack);

    animationOut.start();
    animationIn.start();
}

flashcard_flip_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:repeatMode="reverse"
        android:duration="1000" />

    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="0" />

</set>

flashcard_clip_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:duration="1000" />

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="0" />

</set>

fragment_flashcard.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.project.FlashcardFragment" >

    <include layout="@layout/flashcard"
        android:id="@+id/flashcard_back" />

    <include layout="@layout/flashcard"
        android:id="@+id/flashcard_front" />

</FrameLayout>

flashcard.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardElevation="@dimen/card_elevation_raised"
    card_view:cardUseCompatPadding="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/padding_default" >

        <TextView style="@android:style/TextAppearance.Large"
            android:id="@+id/flashcard_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

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

Answer 1

Try putting your CardView in a container layout:

<FrameLayout
    android:id="@+id/card_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp">

    <include layout="@layout/flashcard" />

</FrameLayout>