Implement flip animation animation between two views using AnimatorSet

Question

I am making a kanji card application. I want to have a LinearLayout representing the front and the other the back of the map, as I stated in one XML layout. The problem is that the second LinearLayout always invisible, the first of them animates normally. Is there a way to make a method call during animation? 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 a flip card?

Below is my code. Thanks 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 is solved, I changed the layout of the container to FrameLayout , so that both views can overlap. Thank you for everything:))

Answer 2

In your AnimatorSet, you can add additional animation to set the alpha range to 0 or 1. Use only the startdelay method to set the animation to 1 ms in the middle of the total length of the AnimationSet.

If you want to improve your flip, check out AdapterViewFlipper :)

Answer 3

You can use:

 cardFront.setVisibility(View.VISIBLE); cardBack.setVisibility(View.GONE); 

This will change the visibility of your layouts inside the code anywhere you want.