Animation doesn’t end – Android

Tags: , , ,



In my app, I have a button to show a drop-down menu, inside of that menu we have some options, one of this is “flip A coin”, the purpose of this option is to flip a coin easy animation, that animation appears inside a textView, and show a head-side or a tail-side of a coin instead of the text in the textView. I have two problems:

  1. The animation doesn’t work how I want, it should appear in 1 second a coin instead of the text inside the textView, it stays there and after 2 seconds he disappears, but after the disappearance, the coin image come back inside the textView, it shouldn’t reappear.enter image description here
  2. This is not a real question for a problem but more an optional question like “you know how to do that?”. I ‘don’t know how to create a flip animation with a coin multiple rotations.

XML drop down menu:

   <item
       android:id="@+id/flipacoin"
       android:title="@string/flipACoin" />
   <item
       android:id="@+id/rolladice"
       android:title="@string/rollADice" />
   <item
       android:id="@+id/imagebackground"
       android:title="@string/changeImage" />

JAVA code that calls the animation function:

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()){
            case R.id.flipacoin:
                flipACoin();
                return true;

            case R.id.rolladice:
                Toast.makeText(this,"TODO roll a dice",Toast.LENGTH_SHORT).show();
                return true;
            case R.id.imagebackground:
                Toast.makeText(this,"TODO image background",Toast.LENGTH_SHORT).show();
                return true;
            default:
                return false;
        }
    }

JAVA animation function:

public void flipACoin(){
        coin.setText(null); //this is for remove the text inside the textView
        coin.setBackground(RANDOM.nextFloat() > 0.5f ? getResources().getDrawable(R.drawable.tails) : getResources().getDrawable(R.drawable.heads));
        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new DecelerateInterpolator());
        fadeIn.setDuration(1000);

        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setStartOffset(2000);
        fadeOut.setDuration(1000);

        AnimationSet animation = new AnimationSet(false); 
        animation.addAnimation(fadeIn);
        animation.addAnimation(fadeOut);
        coin.setAnimation(animation); 
    }

Answer

When You set background at the beginning it just stays after animation. To set back text and background to null You can add Animation listener. Below is sample application which does it:

public class MainActivity extends AppCompatActivity
{
    TextView coin;
    Random RANDOM;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RANDOM = new Random();

        coin = findViewById(R.id.coin);

        (findViewById(R.id.click)).setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                flipACoin();
            }
        });
    }

    public void flipACoin()
    {
        coin.setText(null);
        coin.setBackground(ResourcesCompat.getDrawable(getResources(),
                                                       RANDOM.nextFloat() > 0.5f ? R.drawable.ic_launcher_background : R.drawable.ic_launcher_foreground,
                                                       null
        ));

        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new DecelerateInterpolator());
        fadeIn.setDuration(1000);

        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setStartOffset(2000);
        fadeOut.setDuration(1000);

        AnimationSet animation = new AnimationSet(false);
        animation.addAnimation(fadeIn);
        animation.addAnimation(fadeOut);

        // listener, it will execute function when animation starts/ends/repeats
        animation.setAnimationListener(new Animation.AnimationListener()
        {
            @Override
            public void onAnimationStart(Animation animation)
            {
                Log.d("MyTag", "onAnimationStart:");
            }

            @Override
            public void onAnimationEnd(Animation animation) // when animation ends, set text and background to null
            {
                Log.d("MyTag", "onAnimationEnd:");
                coin.setBackground(null);
                coin.setText("Default");
            }

            @Override
            public void onAnimationRepeat(Animation animation)
            {
                Log.d("MyTag", "onAnimationRepeat:");
            }
        });
        coin.setAnimation(animation);
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <Button
        android:id="@+id/click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="click"
        />

    <TextView
        android:id="@+id/coin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Default"
        />

</androidx.appcompat.widget.LinearLayoutCompat>


Source: stackoverflow