Android - Smooth transition of TabLayout indicator color on slide between tabs

Question

I've seen several apps smoothly changing their indicator color (even icons!) on tab swipe for example Facebook.

This is how I do it in my app :

tabLayout.setOnTabSelectedListener(
        new TabLayout.ViewPagerOnTabSelectedListener(searchViewPager) {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                super.onTabSelected(tab);
                tabLayout.setSelectedTabIndicatorColor(getResources().getColor(indicatorColors[tab.getPosition()]));
            }
        });

Where indicatorColors is an array of normal color, and thus it only changes when user completely swipes to a tab or select the tab. I need the transition here.

What can I do to get a smooth color transition from one color to another color on tab swipe?

TabLayout is coupled with a ViewPager.

I didn't tried it. But I think this can be achieved by setting a ScrollListener on the TabLayout or the ViewPager. — Monish Kamble, Jun 09 '16 at 05:13
Hmm I just reviewed `setOnScrollChangeListener`, yes it can be done through here, but it needs API min 23 and I am using API min 17.. Any other way? — Kevin Murvie, Jun 09 '16 at 05:20
I think this will help : http://stackoverflow.com/a/14111712/5460053 — Monish Kamble, Jun 09 '16 at 05:27

score 0 · Answer 1 · answered Jun 09 '16 at 04:55

0

Please try this.

...onCreate(){

...
tabHost.setOnTabChangedListener(new OnTabChangeListener() {

@Override
public void onTabChanged(String arg0) {

    setTabColor(tabHost);
}
 });
 setTabColor(tabHost);

... }

//Change The Backgournd Color of Tabs

public void setTabColor(TabHost tabhost) {

    for(int i=0;i<tabhost.getTabWidget().getChildCount();i++) {
    tabhost.getTabWidget().getChildAt(i).setBackgroundColor(COLOR_CYAN); 
    }

    //unselected

    if(tabhost.getCurrentTab()==0){
           tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(COLOR_RED); //1st tab selected
    } else {
           tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundColor(COLOR_BLUE); //2nd tab selected
    }
}

answered Jun 09 '16 at 04:55

Phoenix

238
2
12

This is almost exactly the same what I am currently doing.. But this is on tab changed.. And not using `TabLayout` – Kevin Murvie Jun 09 '16 at 04:56
Ok. Then please explain what is the issue. – Phoenix Jun 09 '16 at 04:59
So I'm using `TabLayout` and wishes to add a smooth transition of color from one tab to another tab, example : `light blue` to `blue` to `dark blue` (imagine gradient color) while sliding from tab `0` to tab `1`, what I have is now `light blue` to `dark blue`. – Kevin Murvie Jun 09 '16 at 05:02
Are you using TabLayout with ViewPager? – Phoenix Jun 09 '16 at 05:04

Android - Smooth transition of TabLayout indicator color on slide between tabs

1 Answers1