how to change tablayout indicator color by index in android?

Question

i have a view pager2 in my activity and tablayout attached to this viewpager2 as below

 <com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabMode="fixed"
    android:layout_height="2dp" />
<androidx.viewpager2.widget.ViewPager2
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/vpager"/>

i have attached the tablayout to viewpager as below

   new TabLayoutMediator(tabLayout, vpager,
            new TabLayoutMediator.TabConfigurationStrategy() {
                @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                        @Override
                        public void onTabSelected(TabLayout.Tab tab) {

                        }

                        @Override
                        public void onTabUnselected(TabLayout.Tab tab) {
                    
                        }

                        @Override
                        public void onTabReselected(TabLayout.Tab tab) {

                        }
                    });     
                }
            }).attach();

my target is to keep the indicator color selected in previous tab seeing by the user, so if the user go to next tab, the previous one must be coloring as selected, like the images below

the images show the first indicator is selected and keep it selected when go to next fragment, so it can be like a progress bar

i choose to set the indicator color programmatically by index , how?

Answer 1

The TabLayout indicator color functionality is limited the current selected tab of the TabLayout ; so it affects only the current tab; not any other tab.

Instead, you can use a ProgressBar for that and set the progress whenever the ViewPager changes the page:

Layout

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/intro_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Behavior

ProgressBar progressBar = findViewById(R.id.progress_bar);

progressBar.max = pageCount // Change pageCount to the number of pages in your ViewPager2

mViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        progressBar.setProgress(position + 1);
    }

    @Override
    public void onPageSelected(int position) {
        progressBar.setProgress(position + 1);
    }
});