Strange shadow behavior during a flip card

Question

I implemented flip card animation as described here . Everything seems to work just fine, except for shadows that behave strangely during flip (as you can see here ). Since these shadows are caused by the rise, this graphic error disappears when I set the height to 0. However, I would prefer not to turn off the shadows.

How can I fix this animation without turning off the height, or is it 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 placing 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>