How to animate an ImageView so that once it reaches the upper end of the screen it starts showing from the bottom end of the screen?

Viewed 98

Here is what I could achieve:

package game.card.translationproblem;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.AnimatorInflater;
import android.animation.AnimatorSet;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

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


        ball = findViewById(R.id.coloured_ball);
        ball.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(MainActivity.this, R.animator.move_the_ball);
                set.setTarget(ball);
                set.start();
            }
        });

    }

}

Here is the animation file:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="0dp"
        android:valueTo="-500dp"
        android:duration="5000"/>

    <objectAnimator
        android:propertyName="translationY"
        android:valueFrom="320dp"
        android:valueTo="0dp"
        android:duration="5000"
        android:startOffset="5000"/>
</set>

And here is the layout file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="700dp"
        android:orientation="vertical"
        android:gravity="center">

        <ImageView
            android:id="@+id/coloured_ball"
            android:layout_width="138dp"
            android:layout_height="141dp"
            android:gravity="center"
            app:srcCompat="@drawable/ball" />
    </LinearLayout>


    </LinearLayout>

I want to perform a translation along the screen so that any portion of the image that goes past the upper edge of the screen immediately shows up from the bottom of the screen. I thought of using 2 identical images and show one from the bottom at the same time while the other is disappearing from the upper edge but the major objection to this solution is that I can not guarantee the size of the screen and I might just be showing two full images at the same time.

1 Answers

could create the animation via the screen size:

void moveBall(){
    // getScreenHeight
    Display display = getDisplay();
    Point outSize = new Point();
    display.getSize(outSize);
    int height = outSize.y;
    //create animator via height
    Animation animator = new TranslateAnimation(0F, 0F, 0F, -(height / 2 + ball.getMeasuredHeight()));
    animator.setDuration(2000);
    animator.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            Animation animator = new TranslateAnimation(0F, 0F, +(height / 2 + ball.getMeasuredHeight()), 0F);
            animator.setDuration(2000);
            ball.startAnimation(animator);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    ball.startAnimation(animator);
}
Related