Marquee behavior in TextView: Android

<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>
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
}
}
  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.
  2. Interpolator:- will determine whether the animation runs with linear or non-linear motion. You can try CycleInterpolator, OvershootInterpolator, etc. and see what happens to your text 😂.
  3. Duration:- represents the length of the animation. The default duration is 300 milliseconds. It decides the speed of the animation. If we reduce this, our text will animate fast vice-versa.
  4. updateListener:- the last one is the update listener, which returns the animation object. Here goes the logic of the whole animation, what we are doing here we are calculating the width of the first TextView and translating the x-axis of actual text view as well as of dummy text view. So what’s happening here is, as actual Textview moves to left, we calculate how much it has moved to show the dummy Textview from the right side accordingly.
animator.start()

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gaurav Rajput

Gaurav Rajput

Working remotely as Android Developer