Continuously animate Text from left to right

Question

I'm trying to create an animation which moves a TextView from left to right and loop indefinitely. This is the TextView I want to animate:

<TextView
    android:id="@+id/txtTitle"
    android:layout_width="280dp"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:textStyle="italic"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="20dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/cardView" />

And this how I am trying to animate the TextView:

Animation animation = new TranslateAnimation(0, -280, 0, 0);
animation.setDuration(9000);
animation.setRepeatMode(Animation.RELATIVE_TO_SELF);
animation.setRepeatCount(Animation.INFINITE);
textView.setAnimation(animation);

What I want to achieve is for the text to start out in the center of the screen, move to the right and once the first letter leaves the screen it should reappear on the other side.

Answer 1

What you want to do can be easily achieved with a simple ValueAnimator.

What you first have to do is put two identical versions of the TextView you want to animate into your layout. In this example my layout looks like this:

<?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">

    <TextView
        android:id="@+id/first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="32sp"
        android:text="@string/hello_word"/>

    <TextView
        android:id="@+id/second"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textSize="32sp"
        android:text="@string/hello_word"/>

</FrameLayout>

Then - as I already mentioned - you use a ValueAnimator to animate the translationX property of both Views, but offset one by the width of the screen (since the TextViews above use match_parent as width their width is equal to the width of the screen and that is what I will be using to offset the position of one of them). Your code should look something like this:

final TextView first = (TextView) findViewById(R.id.first);
final TextView second = (TextView) findViewById(R.id.second);

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

And the result should look something like this: