how can I add animation to ViewPager indicator dots? - android-studio

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 !!