Android Studio - Flip Card

Question

I'm trying to make an effect on two images, as if it were a flip card annimation. Image 1 = "botaoiniciar" and Image 2 = "botaosair". At the moment when I click on the initial, it turns the second, but then it gets stuck on the second image and I would like it to come back. I am using the following code. I thank you for your attention.

final ImageView botaoiniciar = (ImageView) findViewById(R.id.botaoiniciar);

    botaoiniciar.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            final ObjectAnimator oa1 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 1f, 0f);
            final ObjectAnimator oa2 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 0f, 1f);
            oa1.setInterpolator(new DecelerateInterpolator());
            oa2.setInterpolator(new AccelerateDecelerateInterpolator());
            oa1.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    botaoiniciar.setImageResource(R.drawable.botaosair);
                    oa2.start();
                }
            });
            oa1.start();
        }
    });

Answer 1

You need to keep animators and change them when card flips. A Boolean can keeps the fliping state. Here is my example:

public class MyFragment extends Fragment {
@OnClick(R.id.frmMain) //onclick for container of two sides
public void onClick() {
    flipCard();  //call method that flips card base on current "mIsBackVisible" state 
}

@BindView(R.id.card_front)
FrameLayout mCardFront;
@BindView(R.id.card_back)
FrameLayout mCardBack;

AnimatorSet animFront;
AnimatorSet animBack;

private boolean mIsBackVisible = false; //keeping card flip state

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View root = inflater.inflate(R.layout.myLauyout, container, false);
    ButterKnife.bind(this, root);

    //important part is this two lines + onclick for container
    loadAnimations();       //initialize animations
    changeCameraDistance(); //optimize card appearance (optional)

    return root;
}

private void changeCameraDistance() {
    int distance = 8000;
    float scale = getResources().getDisplayMetrics().density * distance;
    mCardFront.setCameraDistance(scale);
    mCardBack.setCameraDistance(scale);
}

private void loadAnimations() {
    animBack = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_back);
    animFront = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_front);
}

public void flipCard() {
    if (!mIsBackVisible) {
        animBack.setTarget(mCardFront);
        animFront.setTarget(mCardBack);
        animBack.start();
        animFront.start();
        mIsBackVisible = true;
    } else {
        animBack.setTarget(mCardBack);
        animFront.setTarget(mCardFront);
        animBack.start();
        animFront.start();
        mIsBackVisible = false;
    }
}
}

and here is my animator in res/animator/flip_front.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="@integer/anim_length" />

<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:startOffset="@integer/anim_length_half"
    android:duration="0" />
</set>

res/animator/flip_back.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="@integer/anim_length" />

<objectAnimator
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:startOffset="@integer/anim_length_half"
    android:duration="0" />
</set>

If have any question, just comment. ;)