How can I animate the loading process from 0 to 100?

Question

There is a view that is required on the splash screen.

Namely loading and there to display loading from 0% to 100% in the form of animation.

I'm trying to do it the following way, but this approach is not very good, how can I do it with a small animation?

Here is my code in fragment right now:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    for (i in 0..100) {
        binding.loadingView.setText("Loading $i %")
    }
}

And my xml:

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

    <data class="SplashScreenBinding">

        <import type="android.view.View" />

        <variable
            name="viewModel"
            type="com.mandarine.aco.splash.SplashViewModel" />
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/main_background">

        <ImageView
            android:id="@+id/appImageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:contentDescription="@string/app_name"
            android:scaleType="center"
            android:src="@drawable/logo" />

        <TextView
            android:id="@+id/loadingView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="66dp"
            android:gravity="center_horizontal"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="Loading"
            android:textColor="@android:color/white"
            android:textSize="42px"
            tools:text="Loading 43 %" />
    </RelativeLayout>
</layout>

Q: How can I animate the loading process from 0 to 100?

Answer 1

Since for now you just need a loading animation that lasts for a set duration and updates a 0 - 100 value on screen, you can use a ValueAnimator.ofInt

private var valueAnimator: ValueAnimator? = null

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    val targetTextView = // ...
    
    valueAnimator = ValueAnimator.ofInt(0, 100).apply {
        addUpdateListener {
            targetTextView.text = "Loading ${it.animatedValue}%"
        }
        interpolator = LinearInterpolator()
        duration = 2000
        start()
    }
}

// You need to end the animation in case the view is being
// destroyed before the animation has completed
override fun onDestroyView() {
    super.onDestroyView()
    valueAnimator?.end()
    valueAnimator = null
}

You can also pause/cancel/end the animation by calling pause(), cancel() and end() on the valueAnimator as needed.