How to properly hide&show the actionbar using the new design library API?

Question

Background

Suppose I have these elements in the activity:

• actionbar (actually a Toolbar)
• tabs (using TabLayout )
• ViewPager, with fr

Answer 1

New design API are for new components only. If that component is going to support older versions then it must work for older versions.

Related to your issue: I don't know, whether you have used the suggested library or not. But it works well here in my case. I know that its a very old library and you must have to use listview with that. You can't implement recyclerview with that. But as i want to have very flexible and smooth effect, I have try it out and it works very well.

You can also make smooth scroll of toolbar with Listview scrolling and also make paralax effect as you have seen in the example.

See this images for the effect I have implemented for my app. Mark with red color is my toolbar of the app.

Image when it is expanded:

Image when it is collapsed:

I suggest to try that library for your actionbar related issue, if you do not think to change your listview to recyclerview. But if you want to change your listview to recyclerview then you can use new design API for such effect.

Let me know if I can help you more in this case.

Sincerely,

Shreyash

Updated answer

I assume that you need something like THIS.

If it is what you want, then you should have to refer this library and implement like that.

Please refer, Part1, Part2 and part3 for similar effect.

Let me know if you need anything else.

Answer 2

this is a nice workaround, but It's still very different than what the Play Store shows:

for each fragment, call something like that:

    recyclerView.addOnScrollListener(new OnScrollListener() {
        @Override
        public void onScrollStateChanged(final RecyclerView recyclerView, final int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            ((MainActivity) getActivity()).onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(final RecyclerView recyclerView, final int dx, final int dy) {
            super.onScrolled(recyclerView, dx, dy);
            ((MainActivity) getActivity()).onScrolled(recyclerView, dx,dy);
        }
    });

for the hosting activity:

public void onScrollStateChanged(final RecyclerView recyclerView, final int newState) {
    switch (newState) {
        case RecyclerView.SCROLL_STATE_IDLE:
            mAppBarLayout.setExpanded(mLastDy <= 0, true);
            mLastDy = 0;
            break;
    }
}

public void onScrolled(final RecyclerView recyclerView, final int dx, final int dy) {
    mLastDy = dy == 0 ? mLastDy : dy;
}

Still, if anyone knows how to make it work well (using either ListView or RecyclerView for the fragments), just like on the Play-Store and other apps, please write it down.

Answer 3

Based on @android developer solution which sometimes expand the app bar when list is fully scrolled I made a small change expanding or collapsing the list depending on the scrolled amount (if it's bigger than the header height then expand).

mHeaderHeight = getResources().getDimensionPixelSize(R.dimen.appbar_height);

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        switch (newState) {
            case RecyclerView.SCROLL_STATE_IDLE:
                mAppBar.setExpanded(mScrolledAmount < mHeaderHeight , true);
                break;
        }
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        mScrolledAmount += dy;
    }
});

EDIT: What works even better for me is having different thresholds to expand and collapse

     switch (newState) {
            case RecyclerView.SCROLL_STATE_IDLE:
                if (mScrolledAmount < 50){
                    mAppBar.setExpanded(true , true);
                }
                if (mScrolledAmount > mHeaderHeight) {
                    mAppBar.setExpanded(false, true);
                }
                break;
        }