How to change the color of dots indicator (both active and inactive) per fragment in viewpager?

Question

A picture of what I'm trying to achieve

I've set the colors of the active and inactive states of the dot indicator using XML. However I am very confused as to how to change the colors of the active and inactive state per screen as shown in the image. I have created the layouts using fragments and viewpager and I've added a tablayout.

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adapter = MyViewPagerAdapter(supportFragmentManager)
        adapter.addFragment(TakeFragment())
        adapter.addFragment(UploadFragment())
        adapter.addFragment(PaidFragment())
        viewPager.adapter = adapter
        tab_layout.setupWithViewPager(viewPager)

    }

    class MyViewPagerAdapter(fragmentManager: FragmentManager) : FragmentPagerAdapter(fragmentManager){

        val fragmentList : MutableList<Fragment> = ArrayList()

        override fun getItem(position: Int): Fragment {
            return fragmentList[position]
        }

        override fun getCount(): Int {
            return fragmentList.size
        }

        fun addFragment(fragment: Fragment){
            fragmentList.add(fragment)
        }
    }
}

activity_main.xml

    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/frag_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00000000"
            app:tabBackground="@drawable/tab_selector"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp" />

    </androidx.viewpager.widget.ViewPager>

</FrameLayout>

tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/selected_dot"
        android:state_selected="true"/>

    <item android:drawable="@drawable/default_dot"/>
</selector>

selected_dot.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="#8EBFE8"/>
        </shape>
    </item>
</layer-list>

default_dot.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="#AAD6F9"/>
        </shape>
    </item>
</layer-list>

Answer 1

Well for simplicity, say you have implemented ViewPager.OnPageChangeListener

@Override
    public void onPageSelected(int i) {
        Log.v(TAG, " ++++++++    onPageSelected:  " + i);
        mViewPager.setCurrentItem(i);

        //TODO You can use this position: to write other dependent logic
        if (i == 0) {
            System.out.println("0");
            mImv1.setBackgroundResource(R.drawable.activate_one);
            mImv2.setBackgroundResource(R.drawable.default_one);

        } else {
            System.out.println("1");
            mImv1.setBackgroundResource(R.drawable.default_one);
            mImv2.setBackgroundResource(R.drawable.activate_one);
        }

    }