Change Toolbar color when ViewPager changes page

Question

I've been thinking about this for a while but I can't seem to figure it out. I have a simple app quit 3 tabs (TabLayout + ViewPager) and I want to change the color of the ToolBar when I swipe the tabs. The effect I wanna achieve is to dynamically change the color as the user swipes to the next or previous tab.

Check video here

In the past I've been able to change the background of the ViewPager's children views by assigning a color to each child view and the using PageTransformer to modify the alpha component which works fine, however, the ToolBar is not a child of the ViewPager therefore I can't set a color for each page since there's only one ToolBar at all times.

Any idea on how can I achieve this?

Why don't you just get a reference to the Toolbar in your activity and change it's color after, in the viewpager pagechange method. Its usage is explained in this answer. http://stackoverflow.com/a/11294494/4543112 . If you are working with a fragment hosting the 3 tab fragments use `getActivity().findViewById` instead of `fragmentView.findViewById` — iBobb, Apr 06 '16 at 00:59
Why not change the ToolBar color in the FragmentPagerAdapters getItem method. — chRyNaN, Apr 06 '16 at 01:02
@iBobb, thanks for the suggestion, however setting the color there would not achieve the effect I'm looking for. The color on the `ToolBar` would only change once the page has been completely scrolled an it would be an abrupt change. I'm looking for a gradual change of color here. — Carlos J, Apr 06 '16 at 01:04
@chRyNaN the `ToolBar` isn't part of any of my fragments, the fragments ar children of the `ViewPager` and the `ViewPager` is on the same hierarchy level as the `ToolBar` — Carlos J, Apr 06 '16 at 01:06
Right but you use an adapter on the ViewPager to display the Fragments. If that adapter is defined in the Activity class, you could access the ToolBar. Otherwise create a custom listener you could set on the adapter and change the ToolBar color in that. — chRyNaN, Apr 06 '16 at 01:10
I know, but my question is not how to access the `ToolBar` I just wanna know how to change the color dynamically from an initial value to a final value. I added a video to clarify. — Carlos J, Apr 06 '16 at 01:14
So to gradually change the colour might be achievable if you had the offset of the page when the sliding is happening. This is a bit hacky but I think it could be applied here,only of course you'd have to change the colour much more often than 2 times like in the answer at offset <0.5 or >0.5 http://stackoverflow.com/q/13819865/4543112 — iBobb, Apr 06 '16 at 01:14
Ok, but how can I get all the colors I need? Say on Tab1 I have red and I want Tab 2 to show blue, I don't wanna have a huge list with al the colors between red and blue. Is there a way to auto calculate the colors between another two colors? — Carlos J, Apr 06 '16 at 01:21
Sorry im just brainstorming with you here, I'm interested in a good answer myself. I found this question. I think its answer holds the key to animating the color transition http://stackoverflow.com/q/18216285/4543112 — iBobb, Apr 06 '16 at 01:27
@iBobb I think you are onto something. Let me give it a shot and I'll post the results — Carlos J, Apr 06 '16 at 01:31

score 3 · Answer 1 · answered Apr 06 '16 at 02:35

In this case you should add a onPageChangeListener to your ViewPager and then handle each change individually.

public class MyActivity extends AppCompatActivity {
private Toolbar toolbar;
private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.oncreate(savedInstanceState);

    //Initialize your views

    viewPager.addOnPageChangeListener(new OnPageChangeListener() {
    //Override default methods and change toolbar color inside of here
    });
  }
}

HourGlass · Answer 2 · 2016-04-06T08:43:36.440

you can do this with the help of an interface and setUserVisibleHint(boolean isVisibleToUser) inside fragment.

colorChangeInterface:

public interface ColorChangeInterface {
    void setToolbarAndTabColor(int position);
}

MainActivity:

public class MainActivity extends AppCompatActivity implements ColorChangeInterface
{
public void setToolbarAndTabColor(int position)
{
     if(position==1)
        {
            toolbar.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.classColor4));
            tabLayout.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.classColor4));
            Log.d("colorchange",String.valueOf(position));
        }
        else if(position ==2)
        {
            toolbar.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.classColor2));
            tabLayout.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.classColor2));
            Log.d("colorchange", String.valueOf(position));


        }

}

FragmentOne:

Make your fragment use default override method setUserVisibleHint. This is to check whether the current Fragment is visible in ViewPager, if Visible change the color of the toolbar and Tabbar using Interface.

public class FragmentOne extends Fragment {
 @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
       if (isVisibleToUser)
       {
          ColorChangeInterface colorChangeInterface = (ColorChangeInterface) getActivity();
          colorChangeInterface.setToolbarAndPagerColor(1);
           Log.d("TAG","Current Fragment is visible");
        }
    }
}

FragmentTwo:

 public class FragmentOne extends Fragment {
     @Override
        public void setUserVisibleHint(boolean isVisibleToUser) {
            super.setUserVisibleHint(isVisibleToUser);
           if (isVisibleToUser)
           {
              ColorChangeInterface colorChangeInterface = (ColorChangeInterface) getActivity();
              colorChangeInterface.setToolbarAndPagerColor(2);
               Log.d("TAG","Current Fragment is visible");
            }
        }
    }

or If you are just looking to change Toolbar color in every swipe.

public class FragmentOne extends Fragment {
Toolbar toolbar;
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity);
 toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
       }
         @Override
         public void setUserVisibleHint(boolean isVisibleToUser) {
                super.setUserVisibleHint(isVisibleToUser);
               if (isVisibleToUser)
               {
                 toolbar.setBackgroundColor(ContextCompat.getColor(getApplicationContext(),R.color.classColor2));  
             }
            }
        }

Thanks for the answer, but again, that will change the color of the `ToolBar` abruptly, I'm looking for a gradual change based on the position of the swipe from the `ViewPager`. Check the video on the answer — Carlos J, Apr 07 '16 at 15:31

Change Toolbar color when ViewPager changes page

2 Answers2