CODEWITHSUNDEEP
androidtoolbarwhatsapp
Muhammad Abdullah
Muhammad Abdullah

Reputation: 139

android-Animate the hiding/showing of toolbar on swiping between tabs like in whatsapp camera

i am successfull in showing and hiding of appbar when swiping between tabs in tablayout. but now i want to animate this hiding and appearing of tab smoothly like we do in switching for the camera tab in whatsapp.

Upvotes: 2

Views: 610

Answers (1)

Goodhope Ordu
Goodhope Ordu

Reputation: 11

The way to go about it is to translate the AppbarLayout using its translationY attribute in onPageScrolled() callback of the ViewPager's OnPageChangeListener interface using the AppbarLayout's bottom value.

mViewPager.addOnPageChangeListener(new OnPageChangeListener(){

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        //  get an instance of the appBarLayout This should probably be done at the activity level in its oncreate() method
        /*  example:
            public ViewPager mViewPager;
            public AppBarLayout appBar;

            onCreate(...){
                ...
                mViewPager = (ViewPager) findViewById(R.id.viewpager);
                appBar = (AppBarLayout) findViewById(R.id.appbar);

                mViewPager.addOnPageChangeListener(...);
                ...
            }
        */

        // set the position you want the app bar to be hidden on the ViewPager
        int hideAppBarAtPosition = 0;

        if (appBar != null) {

            // get an instance of the bottom value of the appBar
            float mBottom = (float) appBar.getBottom();

            // going right offset changes from zero to one
            if (position == hideAppBarAtPosition) {

                // Translate the appBar up as the resideReveal slides into view
                float y = (positionOffset * mBottom) - mBottom;

                // Raise the appBar a little bit higher when it is no longer visible
                if (y == -mBottom) {
                    float h = (float) appBar.getHeight();
                    if (mBottom < h) mBottom = h;
                    y = -mBottom - mBottom / 8f;
                }

                appBar.setTranslationY(y);

            } else if (position == hideAppBarAtPosition - 1) {

                // Translate the appBar up as the resideReveal slides into view
                appBar.setTranslationY(-(positionOffset * mBottom));

            } else if (appBar.getTranslationY() != 0f) {

                // Reset translation of the appBar
                appBar.setTranslationY(0f);

            }   
        }
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

If you need more ideas on how to implement it, view this open source project https://github.com/goody-h/ResidingTab

Upvotes: 1

Related Questions