Android 从右到左 textview 滑动 animation

Question

I am currently building a clothing store app and one feature I want to implement is a kind of information banner along the top of the home fragment. I'm relatively new to using animations but I'm pretty much sure that it's the best option.

I have a list of strings such as the following:

val information = listOf("Information 1", "Information 2", "Information 3")

What I would like to do is have each string slide into the fragment from the right to the center (take 2 seconds), stay in the center for 3 seconds, then slide off screen to the left in 2 seconds whilst the next information is sliding in. An important point is I want this to repeat forever (as long as you stay on the Home fragment).

It would look something like this:

1) Left side of screen -> |                  Information 1                  | <- Right side of screen
2) Left side of screen -> | Information 1                     Information 2 | <- Right side of screen
3) Left side of screen -> |                  Information 2                  | <- Right side of screen

I expect to have to use two different animation files for this so I wrote the following:

Right to center

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:startOffset="3000">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="2000"/>
</set>

Center to left

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:startOffset="3000">

    <translate
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="2000"/>
</set>

I have no idea how to actually get this to work unfortunately and would really appreciate some assistance.

EDIT

I have used view binding and a view model that stores the information as LiveData<List<String>> and the setting of the animations is done in the onCreateView function.

The way I do it is like this:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                          savedInstanceState: Bundle?): View? {
    binding = FragmentHomeBinding.inflate(inflater, container, false)

    homeViewModel.setBannerInformation(listOf(
        "Information 1", 
        "Information 2", 
        "Information 3"
    ))

    homeViewModel.bannerInformation.observe(viewLifecycleOwner, { informationList ->
        val rightToCenter = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation_right_to_center)
        val centerToLeft = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation_center_to_left)

        binding.bannerInformation.text = informationList.first()
        binding.bannerInformation.startAnimation(rightToCenter)
        binding.bannerInformation.startAnimation(centerToLeft)
    })

    return binding.root
}

Answer 1

I have found a solution to my issue which seems like a hacky solution but so far it works.

Firstly, create an animation resource file that does the animation you want

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="2000"/>

    <translate
        android:startOffset="3500"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="2000"/>
</set>

Next, create a function that will define the animation and changes to occur

private fun animateInformationBanner(information: List<String>, start: Int = 0) : Animation {
    var index = start
    val animation = AnimationUtils.loadAnimation(binding.bannerInformation.context, R.anim.banner_information_animation)
    animation.setAnimationListener(object: Animation.AnimationListener {
        override fun onAnimationStart(animation: Animation?) {
            binding.bannerInformation.text = information[index % information.size]
        }

        override fun onAnimationEnd(animation: Animation?) {
            index++
            binding.bannerInformation.text = null
            binding.bannerInformation.startAnimation(animation)
        }

        override fun onAnimationRepeat(animation: Animation?) {
            TODO("Not yet implemented")
        }
    })

    return animation
}

Finally, apply the animation to the TextView

homeViewModel.bannerInformation.observe(viewLifecycleOwner, { informationList ->
    binding.bannerInformation.startAnimation(animateInformationBanner(informationList))
})