Praveen Pandey Praveen Pandey - 2 months ago 9
Java Question

Android move background continuously with animation

What I want to do is move the background horizontally and have it repeat infinitely.

I tried using an

ImageSwitcher
with animation to give this effect, but couldn't get it to work right. This is the code I have so farL

public class MainActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory {

private Animation animSlide;
private ImageSwitcher image;
private ImageView imagePop;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
image = (ImageSwitcher) findViewById(R.id.image_switcher);

image.setFactory(this);
image.setImageResource(R.drawable.zc06);
Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
in.setDuration(10000);
Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
out.setDuration(10000);
image.setInAnimation(in);
image.setOutAnimation(out);
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {

@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
image.setImageResource(R.drawable.zc06);
}
});
}

}, 0, 10000);

Animation mZoomInAnimation = AnimationUtils.loadAnimation(this, R.anim.zoom_in);

Animation mZoomOutAnimation = AnimationUtils.loadAnimation(this, R.anim.zoom_out);
imagePop.startAnimation(mZoomInAnimation);
imagePop.startAnimation(mZoomOutAnimation);

}

@Override
public View makeView() {
ImageView myView = new ImageView(getApplicationContext());
return myView;
}
}

Answer

Why don't you try to just animate the background yourself instead of using a ViewSwitcher? All you need is one simple ValueAnimator:

First add two identical ImageViews to your layout and set the same background image to both of them:

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

    <ImageView
        android:id="@+id/background_one"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

    <ImageView
        android:id="@+id/background_two"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background"/>

</FrameLayout>

Then use a ValueAnimator to animate their translationX property, but offset them by their width:

final ImageView backgroundOne = (ImageView) findViewById(R.id.background_one);
final ImageView backgroundTwo = (ImageView) findViewById(R.id.background_two);

final ValueAnimator animator = ValueAnimator.ofFloat(0.0f, 1.0f);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());
animator.setDuration(10000L);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        final float progress = (float) animation.getAnimatedValue();
        final float width = backgroundOne.getWidth();
        final float translationX = width * progress;
        backgroundOne.setTranslationX(translationX);
        backgroundTwo.setTranslationX(translationX - width);
    }
});
animator.start();

This results in an continuous animation which repeats the background indefinitely and should look something like this:

Comments