Marquee behavior in TextView: Android

What we are going to achieve is Marquee’s behavior using animation.

Now let’s see how we can achieve this.

Firstly we need two textView inside a frame layout, both having the same text (will be discussed later). For the above design, I will write like this:-

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/bt_animate_text"
android:layout_centerInParent="true"
android:layout_marginLeft="8dp"
android:layout_marginEnd="76dp"
android:layout_marginRight="76dp"
android:layout_marginBottom="32dp"
android:layout_marginStart="8dp">
<TextView
android:id="@+id/tv_actual_text"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="24dp"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="Animating text"/>
<TextView
android:id="@+id/tv_dummy_text"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="24dp"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="Animating text"/>
</FrameLayout>

Here I have used hardcode strings for testing, please feel free to use resource file String.xml for that. Here both TextViews are identical. We will see their significance below.

For animating text like this, which you have seen in many short videos app, we are going to use Value Animator, which was added in API level 11.

val animator = ValueAnimator.ofFloat(1.0f, 0.0f).apply {
this.repeatCount = ValueAnimator.INFINITE
this.interpolator = LinearInterpolator()
this.duration = 6000L
this.addUpdateListener { animation ->
val progress = animation.animatedValue as Float
val width = tv_actual_text.width.toFloat()
val translationX = width * progress
tv_actual_text.translationX = translationX - width
tv_dummy_text.translationX = translationX
}
}

We are using repeactCount, interpolator, duration, and one listener here. Let’s see the significance of each one:

  1. repeatCount:- will determine how many times to repeat the text; we have used ValueAnimator.INFINITE for infinite animation, you can give it an int value how many times you want to repeat it.

Now everything is set, so let’s see how to start the animation. It’s straightforward, use

animator.start()

Working remotely as Android Developer