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()

Working remotely as Android Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Convert images to WebP Android

10 Flutter tips — part 9/10

The defective AndroidX FragmentFactory

Android: Compressing video with FFmpeg

5 Ways I increased my coding speed by 45% in Flutter

Flutter Google Sign in doesn’t work after release of flutter app

Razorpay integration android — kotlin

Android Kotlin MVVM Custom Array Adapter for AutoCompleteTextView

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

More from Medium

Understanding UIKit’s View display lifecycle

Wham! Bam! Here comes a new version!

How Cdiscount is shifting gears by overhauling its core services

Rewriting Android App’s Back-Handling Logic