How Change Actionbar Colour When Swiping Between Fragments (material Design)?

I have an app i am doing, which has a FragmentPagerAdapter setup with 3 fragments to swipe between on the main page. I have been trying to get it setup so as you swipe between frag

Solution 1:

What method is called when you swipe between fragments?

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

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

Although, you'll only need the first two parameters. What you'll want to do is bind a particular color to each of your fragments, retrieve both the current page and next page colors, then blend them together using the positionOffset ratio to create your new ActionBar background.

A useful algorithm for blending two colors based on a ratio can be found in Google's new SlidingTabStrip example. 0.0 will return the second color, 0.5 will return an even blend, and 1.0 will return the first color

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

Here's a simple example:

ColorFragment

publicclassColorFragmentextendsFragment {

    privatestaticfinalStringKEY_COLOR="colorfragment:color";

    /** Empty constructor as per the {@link Fragment} docs */publicColorFragment() {
    }

    publicstatic ColorFragment newInstance(int color) {
        finalBundleargs=newBundle();
        args.putInt(KEY_COLOR, color);
        finalColorFragmentfragment=newColorFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        finalFrameLayoutrootView=newFrameLayout(getActivity());
        rootView.setBackgroundColor(getArguments().getInt(KEY_COLOR));
        return rootView;
    }

    publicintgetColor() {
        return getArguments().getInt(KEY_COLOR);
    }

}

Pulling it all together

@OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the ActionBar backgroundfinalColorDrawableactionBarBackground=newColorDrawable();
    getSupportActionBar().setBackgroundDrawable(actionBarBackground);
    ...
    finalPagerAdapterpagerAdapter= ...;
    ...
    // Bind your data to your PagerAdapter
    ...
    finalViewPagerpager= ...;
    pager.setOnPageChangeListener(newViewPager.SimpleOnPageChangeListener() {

        @OverridepublicvoidonPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            if (position >= pagerAdapter.getCount() - 1) {
                // Guard against ArrayIndexOutOfBoundsExceptionreturn;
            }
            // Retrieve the current and next ColorFragmentfinalColorFragmentfrom= (ColorFragment) pagerAdapter.getItem(position);
            finalColorFragmentto= (ColorFragment) pagerAdapter.getItem(position + 1);
            // Blend the colors and adjust the ActionBarfinalintblended= blendColors(to.getColor(), from.getColor(), positionOffset);
            actionBarBackground.setColor(blended);
        }

    });
    pager.setAdapter(pagerAdapter);
}

Results

http://gfycat.com/CautiousBewitchedJabiru

I hope that helps you out some!

Solution 2:

You could make your FragmentPagerAdapter implements ViewPager.OnPageChangeListener.

Then, override onPageSelected

@OverridepublicvoidonPageSelected(int position) {
    // get the action bar here and change color
}

As for the color change animation. I didn't try it, but this is from another stackoverflow issue :

Android objectAnimator animate backgroundColor of Layout