186

Simple question, but I can't find an answer. How can I collapse or expand the CollapsingToolbarLayout programmatically?

collapsed toolbar

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

expanded toolbar

2
  • 1
    I was wondering the same thing. It could also be interesting to expand the toolbar to fullscreen once a user clicks on the embedded layout (eg image).
    – Moritz
    Commented Jun 6, 2015 at 8:33
  • I was a little lost with the answers which are omitting the fact that CollapsingToolbarLayout cannot expand or collapse itself what's worst, other comments are making it seemed as if it's an issue that has to do with the version, In reality what you need to handle is its parent, which is funny because CollapsingToolbarLayout CAN disable its own collapse/expansion, but for some reason it cannot trigger them.
    – Delark
    Commented Nov 15, 2021 at 17:55

11 Answers 11

383

Using Support Library v23, you can call appBarLayout.setExpanded(true/false).

Further reading: AppBarLayout.setExpanded(boolean)

5
  • 2
    Ok,thank you for the tip, but support libs v23 are very buggy, so I can't to test it now, because I need to stay on 22.2.1....
    – Tomas
    Commented Sep 2, 2015 at 15:59
  • Now you have 23.0.1 with some fixes Commented Sep 8, 2015 at 8:43
  • 6
    Is it possible to define a custom animation with support libs 23.1.1? setExpanded(boolean, true) hav a really slow animation...
    – Nifhel
    Commented Nov 24, 2015 at 12:52
  • I had an issue where I have a layout with a collapsible toolbar and an recyclerview under it. When deleting items from the recyclerview the toolbar did not behave appropriately, so i would expand the app bar layout and it worked properly. I ended up using the appBarLayout.setExpanded(true, true) for the animation.
    – Ray Hunter
    Commented Mar 24, 2016 at 16:58
  • This only partly expands/collapses the AppBarLayout. There's also a nested CoordinatorLayout to deal with. Commented Jan 24, 2021 at 23:57
48

I use this code for collapsing toolbar. Still cannot find a way to expand it.

public void collapseToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true);
    }
}

Edit 1: The same function with negative velocityY but the toolbar is not expanded 100% and false for last param should work

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, -10000, false);
    }
}

Edit 2: This code do the trick for me

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.setTopAndBottomOffset(0);
        behavior.onNestedPreScroll(rootLayout, appbarLayout, null, 0, 1, new int[2]);
    }
}
  • setTopAndBottomOffset do expand the toolbar
  • onNestedPreScroll do show the content inside expanded toolbar

Will try to implement Behavior by myself.

8
  • 2
    Edit 1 will also work if you set the the last parameter of onNestedFling to false.
    – Ricky Lee
    Commented Jun 22, 2015 at 9:45
  • 2
    params.getBehavior() is returning null. In xml, layout_behaviour tag is set on sibling NestedScrollView, not the AppBarLayout. Can you help me?
    – User31689
    Commented Jun 26, 2015 at 6:53
  • Thank you. Edit 1 work properly, if last param is false. :)
    – Sirelon
    Commented Jun 30, 2015 at 16:22
  • @GobletSky I faced the same problem. I had NestedScrollView in my fragment and tried to call onNestedFling before set the fragment. After set the fragment, I could call the method successfully.
    – usp
    Commented Jul 17, 2015 at 9:55
  • @usp Actually, my problem was entirely different(somewhat noobish mistake). See this: stackoverflow.com/questions/31067082/…
    – User31689
    Commented Jul 17, 2015 at 12:20
34

You can define how much it expands or collapses with your custom animator. Just use the setTopAndBottomOffset(int).

Here is an example:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
final AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
if (behavior != null) {
    ValueAnimator valueAnimator = ValueAnimator.ofInt();
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            behavior.setTopAndBottomOffset((Integer) animation.getAnimatedValue());
            appBar.requestLayout();
        }
    });
    valueAnimator.setIntValues(0, -900);
    valueAnimator.setDuration(400);
    valueAnimator.start();
}
5
  • 3
    This is the only answer that actually let you animate to a custom offset. Many thanks! Commented Jul 5, 2016 at 18:52
  • 3
    appBar.setExpanded(false, true); (open/close, animate) You don't need to write all those lines
    – Puni
    Commented Jun 30, 2017 at 20:06
  • 2
    to @Puni, if you want to expand / collapse to a "custom" offset (like doing multiple stages collapsing), you'll need this.
    – Palatis
    Commented Aug 5, 2017 at 23:54
  • 1
    This is the best solution to animate AppBar offset in case u don't want to write custom behavior. The one update to the code snippet is to call valueAnimator.setIntValues() with behavior.topAndBottomOffset start value instead of 0 to start animate from current appbar offset.
    – reel
    Commented Oct 20, 2019 at 13:22
  • To use a custom variable ( -900 ) to set valueAnimator.setIntValues The beter solution is that to use - ( appBar.getTotalScrollRange() ) Commented Apr 6, 2020 at 10:06
12

I've written a small extension to AppBarLayout. It allows for expanding and collapsing of the CollapsibleToolbarLayout both with and without animation. It seems to be doing it quite right.

Feel free to try it out.

Just use it instead of your AppBarLayout, and you can call methods responsible for expanding or collapsing of the CollapsingToolbarLayout.

It's working exactly as expected in my project, but you might need to tweak the fling/scroll values in the perform... methods (especially in performExpandingWithAnimation()) to fit perfectly with your CollapsibleToolbarLayout.

1
  • @ssdeno please read the Readme.md of the Github gist. It's deprecated since v23 of the Support library. Since the v23 of Support (proceeding to AndroidX), there is setExpanded method in the AppBarLayout. Commented May 15, 2019 at 16:11
8

Use mAppBarLayout.setExpanded(true) to expand Toolbar and use mAppBarLayout.setExpanded(false) to collapse Toolbar.

If you want to change CollapsingToolbarLayout height programmatically then just use mAppBarLayout.setLayoutParams(params);

Expand:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*200; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(true);

Collapse:

CoordinatorLayout.LayoutParams params =(CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*80; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(false);
0
5

for the ones who wants to work with onNestedPreScroll and get error like me. i get NullPointerException in onCreate with out this line

    CoordinatorLayout coordinator =(CoordinatorLayout)findViewById(R.id.tab_maincontent);
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
    //below line
    params.setBehavior(new AppBarLayout.Behavior() {});

and doesn't work properly with this. but i work around this problem with

in onCreate :

        scrollToolbarOnDelay();

and...

    public void scrollToolbarOnDelay() {
            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.tab_appbar);
                    CoordinatorLayout coordinator = (CoordinatorLayout) findViewById(R.id.tab_maincontent);
                    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
                    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
         if(behavior!=null)
                    behavior.onNestedPreScroll(coordinator, appBarLayout, null, 0, 100, new int[]{0, 0});
         else
            scrollToolbarOnDelay()
                }
            }, 100);


        }
5

Try this...

Expand

appBarLayout.setExpanded(true, true);

To recall

appBarLayout.setExpanded(false, true);
1
  • Amongst all the solution available, this worked for me!! Commented Dec 23, 2022 at 10:06
3

To expand/collapse AppBarLayout programmatically:

fun expandAppBarLayout(expand: Boolean, isAnimationEnabled: Boolean){
    appBarLayout.setExpanded(expand, isAnimationEnabled);
}
1

This may help to expand or collapse :

appBarLayout.setActivated(true);
appBarLayout.setExpanded(true, true);
0

i have using this

 private fun collapseAppbar() {
        scrollView.postDelayed(Runnable {
            scrollView?.smoothScrollTo(50, 50)
        }, 400)
    }
0

Make sure your parent is a coordinator layout, otherwise setExpanded will not work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.