How to change the color of an ActionBar when scrolling fragments (Material Design)?

Question

I have an application that I am doing that has a FragmentPagerAdapter setting with three fragments to navigate between them on the main page.

I'm trying to adjust it so that you scroll between fragments, the action bar changes color (disappears and disappears).

However, I am not sure how to do this. What method is called when scrolling fragments? IE, where should I put the code to change the color of the action bar?

And also how to get the effect of fading and falling out (so that it disappears from one color to another)?

I would really like someone to help.

Thanks in advance

Greetings from Corey :)

Answer 1

What method is called when scrolling fragments?

You are looking for ViewPager.OnPageChangeListener.onPageScrolled . This will give you:

• position . The location index of the first page currently being displayed.
• positionOffset A value from [0, 1) indicating the offset from the page at the position.
• positionOffsetPixels A value in pixels indicating the offset from the position.

Although you will need only the first two parameters. What you want to do is bind a specific color to each of your fragments, get both the current page and the colors of the next page, and then combine them together using the positionOffset coefficient to create a new ActionBar background.

A useful algorithm for mixing two colors based on relationships can be found in Google SlidingTabStrip . 0.0 will return the second color, 0.5 will return an even mixture, and 1.0 will return the first color

 static int blendColors(int from, int to, float ratio) { final float inverseRation = 1f - ratio; final float r = Color.red(from) * ratio + Color.red(to) * inverseRation; final float g = Color.green(from) * ratio + Color.green(to) * inverseRation; final float b = Color.blue(from) * ratio + Color.blue(to) * inverseRation; return Color.rgb((int) r, (int) g, (int) b); } 

Here is a simple example:

Colorfragment

 public class ColorFragment extends Fragment { private static final String KEY_COLOR = "colorfragment:color"; /** Empty constructor as per the {@link Fragment} docs */ public ColorFragment() { } public static ColorFragment newInstance(int color) { final Bundle args = new Bundle(); args.putInt(KEY_COLOR, color); final ColorFragment fragment = new ColorFragment(); fragment.setArguments(args); return fragment; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { final FrameLayout rootView = new FrameLayout(getActivity()); rootView.setBackgroundColor(getArguments().getInt(KEY_COLOR)); return rootView; } public int getColor() { return getArguments().getInt(KEY_COLOR); } } 

Pull it all together

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set the ActionBar background final ColorDrawable actionBarBackground = new ColorDrawable(); getSupportActionBar().setBackgroundDrawable(actionBarBackground); ... final PagerAdapter pagerAdapter = ...; ... // Bind your data to your PagerAdapter ... final ViewPager pager = ...; pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { super.onPageScrolled(position, positionOffset, positionOffsetPixels); if (position >= pagerAdapter.getCount() - 1) { // Guard against ArrayIndexOutOfBoundsException return; } // Retrieve the current and next ColorFragment final ColorFragment from = (ColorFragment) pagerAdapter.getItem(position); final ColorFragment to = (ColorFragment) pagerAdapter.getItem(position + 1); // Blend the colors and adjust the ActionBar final int blended = blendColors(to.getColor(), from.getColor(), positionOffset); actionBarBackground.setColor(blended); } }); pager.setAdapter(pagerAdapter); } 

results

http://gfycat.com/CautiousBewitchedJabiru

I hope this helps you!

Answer 2

You can make your FragmentPagerAdapter implement the ViewPager.OnPageChangeListener.

Then override onPageSelected

 @Override public void onPageSelected(int position) { // get the action bar here and change color } 

As for the animation, color changes. I have not tried, but this is from another stackoverflow problem:

Android objectAnimator animate backgroundColor of Layout