Julia Julia - 20 days ago 5
Java Question

Continuously animate Text from left to right

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

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:

looing text demo