Chol
Chol

Reputation: 2117

Collapsing Toolbar Layout expand on click event and not on scroll

I have a simple toolbar with a info icon item on the right. When click on the item I would like to expand the toolbar with an animation. With a new view and a FAB button. Like the Textra SMS is doing.

When clicking outside the expanded toolbar, I want to colapse the toolbar.

I looking how can I handle this with CollapsingToolbarLayout? Is it possible? All the example I find on the web are collapsing/Expanding with the scroll of the the view (Recyclerview, Scrollview etc...). But I don't want my toolbar to move when scrolling my view.

It is a good way to use CollapsingToolbarLayout? or do I need to do it all by myself?

Upvotes: 1

Views: 3851

Answers (1)

Bartek Lipinski
Bartek Lipinski

Reputation: 31468

CollapsingToolbarLayout seems perfectly fine for that purpose (and I actually believe it would make your layout look much better than one in the Textra SMS app).

You will need few things:

  1. A way to disable CollapsingToolbarLayout. The best way in my opinion (at least the best I found so far) is to use a custom CoordinatorLayout instead of the regular CoordinatorLayout.

    public class DisableableCoordinatorLayout extends CoordinatorLayout {
        private boolean mPassScrolling = true;
    
        public DisableableCoordinatorLayout(Context context) {
            super(context);
        }
    
        public DisableableCoordinatorLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public DisableableCoordinatorLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes) {
            return mPassScrolling && super.onStartNestedScroll(child, target, nestedScrollAxes);
        }
    
        public void setPassScrolling(boolean passScrolling) {
            mPassScrolling = passScrolling;
        }
    }
    
  2. You need to actually disable your CollapsingToolbarLayout (you don't want your CollapsingToolbarLayout to react to scrolls anymore):

    mDisableableCoordinatorLayout.setPassScrolling(false);
    
  3. You need to use your AppBarLayout to expand the CollapsingToolbarLayout onOptionsMenu item click

    mAppBarLayout.setExpanded(true, true);
    
  4. You also need to use the AppBarLayout to collapse the CollapsingToolbarLayout on click outside (implement click outside in any way you feel like)

    mAppBarLayout.setExpanded(false, true);
    

Upvotes: 3

Related Questions