how can I add animation to ViewPager indicator dots?

Question

I am working on one project where I need to display Image Slider with use of ViewPager.

I had done all code and working very fine but now I want to add some animation to my dots indicator as display in this Image.

Here is my code which I write to make indicator.

private fun initLauncherScreen() {
    landingScreens = arrayListOf()
    landingScreens.add(
        LauncherData(
            R.drawable.ic_launch_screen,
            getString(R.string.get_latest_trends),
            getString(R.string.loram)
        )
    )
    landingScreens.add(
        LauncherData(
            R.drawable.ic_launch_screen,
            getString(R.string.get_latest_trends),
            getString(R.string.loram)
        )
    )
    landingScreens.add(
        LauncherData(
            R.drawable.ic_launch_screen,
            getString(R.string.get_latest_trends),
            getString(R.string.loram)
        )
    )
    landingScreens.add(
        LauncherData(
            R.drawable.ic_launch_screen,
            getString(R.string.get_latest_trends),
            getString(R.string.loram)
        )
    )
    val launcherPagerAdapter = LauncherPagerAdapter(this, landingScreens)
    binding.launcherPager.adapter = launcherPagerAdapter
    setupIndicatorDots(0)
    binding.launcherPager.addOnPageChangeListener(object : OnPageChangeListener {
        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
        override fun onPageSelected(position: Int) {
            setupIndicatorDots(position)
        }

        override fun onPageScrollStateChanged(state: Int) {}
    })
}

private fun setupIndicatorDots(position: Int) {
    indicators = arrayOfNulls(landingScreens.size)
    indicatorLayout = binding.indicatorLayout
    indicatorLayout.removeAllViews()

    for (i in indicators.indices) {
        indicators[i] = TextView(this)
        indicators[i]?.setPadding(10, 10, 10, 10)
        indicators[i]!!.text = Html.fromHtml("●")
        indicators[i]!!.textSize = 18f
        indicators[i]!!.setTextColor(ContextCompat.getColor(this, android.R.color.darker_gray))
        indicatorLayout.addView(indicators[i])
    }
    indicators[position]!!.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary))
}

In My Layout Design I have pager like below:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<androidx.viewpager.widget.ViewPager
    android:id="@+id/launcherPager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:id="@+id/indicatorLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="@dimen/_30sdp"
    android:layout_marginVertical="@dimen/_5sdp"
    android:gravity="center|center_vertical"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/launcherPager" /></androidx.constraintlayout.widget.ConstraintLayout>

I need to do animation on scrolling exactly like the image.

Any answer from your side will make me helpful. Thanks in advance !!