Home » Android » Not able to perform multiple animations on multiple views parallely

Not able to perform multiple animations on multiple views parallely

Posted by: admin November 1, 2017 Leave a comment

Questions:

Requirement: I want to move clouds (ImageViews) across an activity in parallel. They are to start at some (x,y) point and they are to translate(move) to another location as animation.

What have I done until now:

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

    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int width = size.x;
    int height = size.y;
    float newX1 = (width)*(float)0.2; float newY1 = (height)*(float)0.2;
    cloud1 = (ImageView) findViewById(R.id.cloud1); cloud1.setX(newX1); cloud1.setY(newY1);
    float newX2 = (width)*(float)0.5; float newY2 = (height)*(float)0.3;
    cloud2 = (ImageView) findViewById(R.id.cloud2); cloud2.setX(newX2); cloud2.setY(newY2);
    float newX3 = (width)*(float)0.1; float newY3 = (height)*(float)0.4;
    cloud3 = (ImageView) findViewById(R.id.cloud3); cloud3.setX(newX3); cloud3.setY(newY3);
    float newX4 = (width)*(float)0.5; float newY4 = (height)*(float)0.5;
    cloud4 = (ImageView) findViewById(R.id.cloud4); cloud4.setX(newX4); cloud4.setY(newY4);
    float newX5 = (width)*(float)0.35; float newY5 = (height)*(float)0.7;
    cloud5 = (ImageView) findViewById(R.id.cloud5); cloud5.setX(newX5); cloud5.setY(newY5);
    float newX6 = (width)*(float)0.75; float newY6 = (height)*(float)0.2;
    cloud6 = (ImageView) findViewById(R.id.cloud6); cloud6.setX(newX6); cloud6.setY(newY6);

    btnStart = (Button) findViewById(R.id.btnStart);

    animation_cloud1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud1);
    animation_cloud2 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud2);
    animation_cloud3 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud3);
    animation_cloud4 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud4);
    animation_cloud5 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud5);
    animation_cloud6 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_cloud6);

    // set animation_cloud1 listener
    animation_cloud1.setAnimationListener(this);
    animation_cloud2.setAnimationListener(this);
    animation_cloud3.setAnimationListener(this);
    animation_cloud4.setAnimationListener(this);
    animation_cloud5.setAnimationListener(this);
    animation_cloud6.setAnimationListener(this);

    // button click event
    btnStart.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            cloud1.setVisibility(View.VISIBLE);
            cloud2.setVisibility(View.VISIBLE);
            cloud3.setVisibility(View.VISIBLE);
            cloud4.setVisibility(View.VISIBLE);
            cloud5.setVisibility(View.VISIBLE);
            cloud6.setVisibility(View.VISIBLE);
            // start the animation_cloud1
            cloud1.startAnimation(animation_cloud1);
            cloud2.startAnimation(animation_cloud2);
            cloud3.startAnimation(animation_cloud3);
            cloud4.startAnimation(animation_cloud4);
            cloud5.startAnimation(animation_cloud5);
            cloud6.startAnimation(animation_cloud6);
        }
    });
}

@Override
public void onAnimationEnd(Animation animation) {
    // check for fade in animation_cloud1
    if (animation == animation_cloud1) {
        cloud1.clearAnimation();
        cloud2.clearAnimation();
        cloud3.clearAnimation();
        cloud4.clearAnimation();
        cloud5.clearAnimation();
        cloud6.clearAnimation();
        Toast.makeText(getApplicationContext(), "Animation Stopped", Toast.LENGTH_SHORT).show();
        cloud1.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v){
                cloud1.setVisibility(View.GONE);
                Toast.makeText(getApplicationContext(), "Cloud1 is set to INVISIBLE", Toast.LENGTH_SHORT).show();
            }
        });

    }

The Problem: Only the first two clouds(views) are animated together. The rest appear on the screen, after the first cloud’s animation is completed.

Where have I looked to solve this problem:

  1. How to start two animations at same time in android?

  2. https://www.programcreek.com/java-api-examples/index.php?api=android.animation.AnimatorSet

  3. https://book2s.com/java/api/android/animation/animatorset/playtogether-1.html

Note: I’ve started android development last week.

Answers: