Implement card flip animation between two Views using AnimatorSet

Question

I am making a kanji flashcards app. I want to have a LinearLayout representing the front and another representing the back of the card, both i have declared in one XML layout. Problem is, the second LinearLayout is always invisible, the first one animates normally. Is there anyway to make a method call while the animation is ongoing? I want to set the visibility of the first layout to GONE and the second to VISIBLE?

Or is there another better way to implement the flip card?

Below is my code. Thank in advance.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_container_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ff825e4e" >

        <LinearLayout
            android:id="@+id/card_front_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/card_shape_front">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="傘"
                android:textColor="#ff000000"
                android:textSize="200sp"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/card_back_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_margin="10dp"
            android:background="@drawable/card_shape_front">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="QWERTY"
                android:textColor="#ff000000"/>
        </LinearLayout>
</LinearLayout>

FlashcardsFragment.java

public class FlashcardsFragment extends Fragment
{
    private AnimatorSet showFrontAnim = new AnimatorSet();
    private AnimatorSet showBackAnim = new AnimatorSet();
    private boolean isShowingBack = false;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View v =  inflater.inflate(R.layout.fragment_flashcard, container, false);

        LinearLayout cardFront = (LinearLayout) v.findViewById(R.id.card_front_layout);
        LinearLayout cardBack = (LinearLayout) v.findViewById(R.id.card_back_layout);

        // Load the animator sets from XML and group them together

        AnimatorSet leftIn   = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_left_in);
        AnimatorSet rightOut = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_right_out);
        AnimatorSet leftOut  = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_left_out);
        AnimatorSet rightIn  = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_right_in);

        leftIn.setTarget(cardFront);
        rightOut.setTarget(cardBack);
        showFrontAnim.playTogether(leftIn, rightOut);

        leftOut.setTarget(cardFront);
        rightIn.setTarget(cardBack);
        showBackAnim.playTogether(leftOut, rightIn);

        LinearLayout cardContainer = (LinearLayout) 
                v.findViewById(R.id.card_container_layout);
        // Set the flip animation to be triggered on container clicking
        cardContainer.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (isShowingBack) {
                    showFrontAnim.start();
                    isShowingBack = false;
                }
                else {
                    showBackAnim.start();
                    isShowingBack = true;
                }
            }
        });

        return v;
    }
}

Answer 1

EDIT : My problem has been solved, i changed the container layout to FrameLayout, this way the two views can overlap each other. Thank you for all :))

Answer 2

In your AnimatorSet you could add an extra animation for setting the alpha to 0 or 1. Only use the startdelay method to set your 1 ms long animation in the middle of the total AnimationSet length.

If you want to improve your flip further look into the AdapterViewFlipper :)