130

I am using CollapsingToolBarLayout alongside with AppBarLayout and CoordinatorLayout, and they are working Fine altogether. I set my Toolbar to be fixed when I scroll up, I want to know if there is a way to change the title text of the Toolbar, when CollapsingToolBarLayout it is collapsed.

Wrapping up, I want two different titles when scrolled and when expanded.

Thank you all in advance

12 Answers 12

176

I share the full implementation, based on @Frodio Beggins and @Nifhel code:

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

    public enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }

    private State mCurrentState = State.IDLE;

    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}

And then you can use it:

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
    @Override
    public void onStateChanged(AppBarLayout appBarLayout, State state) {
        Log.d("STATE", state.name());
    }
});
6
  • 22
    That's correct. But please not that using Proguard that enum is going to be translated in an integer value.
    – rciovati
    Mar 20, 2016 at 1:21
  • 2
    Also enums are a very nice way of ensuring type safety. You can't have State.IMPLODED because it doesn't exist (the compiler would complain) but with Integer constants you could use a value that the compiler has no idea is wrong. They're good as singletons also but thats another story. May 9, 2017 at 16:24
  • @droppin_science for android enums check out IntDef Dec 24, 2017 at 2:37
  • public class State { public static final int EXPANDED = 1; public static final int COLLAPSED = 0; public static final int IDLE = 2; } private int mCurrentState = State.IDLE;
    – Sjd
    Jan 10, 2018 at 18:17
  • 1
    @DavidDarias Personally I find enums a much cleaner approach even with their overhead (commence argument here... :-) Mar 15, 2018 at 13:08
109

This solution works perfectly for me to detect AppBarLayout collapsed or expanded.

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
            {
                //  Collapsed


            }
            else
            {
                //Expanded


            }
        }
    });

Used addOnOffsetChangedListener on the AppBarLayout.

1
  • 3
    This fires collapsed on multiple occasions, also on expand. Feb 16, 2021 at 14:28
38

Hook a OnOffsetChangedListener to your AppBarLayout. When the verticalOffset reaches 0 or less than the Toolbar height, it means that CollapsingToolbarLayout has collapsed, otherwise it is expanding or expanded.

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if(verticalOffset == 0 || verticalOffset <= mToolbar.getHeight() && !mToolbar.getTitle().equals(mCollapsedTitle)){
                    mCollapsingToolbar.setTitle(mCollapsedTitle);
                }else if(!mToolbar.getTitle().equals(mExpandedTitle)){
                    mCollapsingToolbar.setTitle(mExpandedTitle);
                }

            }
        });
8
  • 1
    it is not working for me. OnCollapse i want to enable the home button and on Expand hid the home button Sep 2, 2015 at 7:04
  • 9
    The verticalOffset values seems to be zero when the toolbar is fully expanded, and then goes negative while collapsing. When the toolbar is collapsed, verticalOffset is equal to negative the toolbar height (-mToolbar.getHeight()). So... the toolbar is partially expanded "if (verticalOffset > -mToolbar.getHeight())"
    – Mike
    Nov 3, 2015 at 0:00
  • In case anyone is wondering where the appBarLayout.getVerticalOffset() method is, you can call appBarLayout.getY() to retrieve the same value that's used in the callback. Mar 31, 2016 at 21:13
  • Unfortunately Jarett Millard isn't right. Depending on your fitsSystemWindow configuration and StatusBar configuration (transparent) the appBarLayout.getY() it may be that verticalOffset = appBarLayout.getY() + statusBarHeight
    – Capricorn
    Apr 6, 2016 at 13:46
  • 1
    Has anyone noticed if mAppBarLayout.addOnOffsetChangedListener(listener) is called repeatedly even if we are not actually interacting with the appbar? Or it's a bug in my layout / app where I am observing this behavior. Plz help! Aug 24, 2016 at 9:59
18

This code worked for me

mAppBarLayout.addOnOffsetChangedListener(new   AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset == -mCollapsingToolbarLayout.getHeight() + mToolbar.getHeight()) {
                //toolbar is collapsed here
                //write your code here
            }
        }
    });
2
  • Better answer than Nikola Despotoski
    – GOBINATH.M
    Mar 7, 2017 at 2:26
  • Seems to be not a reliable solution. I tested it and values on my device are the following: mCollapsingToolbarLayout.getHeight() = 1013, mToolbar.getHeight() = 224. So according to your solution verticalOffset in collapsed state must be -789, however it is equal to -693 Apr 3, 2017 at 14:48
17
private enum State {
    EXPANDED,
    COLLAPSED,
    IDLE
}

private void initViews() {
    final String TAG = "AppBarTest";
    final AppBarLayout mAppBarLayout = findViewById(R.id.appbar);
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        private State state;

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset == 0) {
                if (state != State.EXPANDED) {
                    Log.d(TAG,"Expanded");
                }
                state = State.EXPANDED;
            } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                if (state != State.COLLAPSED) {
                    Log.d(TAG,"Collapsed");
                }
                state = State.COLLAPSED;
            } else {
                if (state != State.IDLE) {
                    Log.d(TAG,"Idle");
                }
                state = State.IDLE;
            }
        }
    });
}
0
15

You can get collapsingToolBar alpha percentage using below :

appbarLayout.addOnOffsetChangedListener( new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            float percentage = ((float)Math.abs(verticalOffset)/appBarLayout.getTotalScrollRange());
            fadedView.setAlpha(percentage);
    });

For Reference : link

2
  • 2
    This is a great answer as it gives a normalized offset. In my opinion, the API should have provided this directly instead of the verticalOffset pixel distance.
    – dbm
    Jul 25, 2017 at 12:26
  • I want when AppBarLayout collapsed then View is hide and expanded View is show. So I use val percentage = 1 - abs(verticalOffset).toFloat() / appBarLayout.totalScrollRange. It work very well for me.
    – PhongBM
    May 21, 2021 at 2:09
13

Here's a Kotlin solution. Add an OnOffsetChangedListener to the AppBarLayout.

Solution A:

Add AppBarStateChangeListener.kt to your project:

import com.google.android.material.appbar.AppBarLayout
import kotlin.math.abs

abstract class AppBarStateChangeListener : AppBarLayout.OnOffsetChangedListener {

    enum class State {
        EXPANDED, COLLAPSED, IDLE
    }

    private var mCurrentState = State.IDLE

    override fun onOffsetChanged(appBarLayout: AppBarLayout, i: Int) {
        if (i == 0 && mCurrentState != State.EXPANDED) {
            onStateChanged(appBarLayout, State.EXPANDED)
            mCurrentState = State.EXPANDED
        }
        else if (abs(i) >= appBarLayout.totalScrollRange && mCurrentState != State.COLLAPSED) {
            onStateChanged(appBarLayout, State.COLLAPSED)
            mCurrentState = State.COLLAPSED
        }
        else if (mCurrentState != State.IDLE) {
            onStateChanged(appBarLayout, State.IDLE)
            mCurrentState = State.IDLE
        }
    }

    abstract fun onStateChanged(
        appBarLayout: AppBarLayout?,
        state: State?
    )

}

Add the listener to your appBarLayout:

appBarLayout.addOnOffsetChangedListener(object: AppBarStateChangeListener() {
        override fun onStateChanged(appBarLayout: AppBarLayout?, state: State?) {
            Log.d("State", state.name)
            when(state) {
                State.COLLAPSED -> { /* Do something */ }
                State.EXPANDED -> { /* Do something */ }
                State.IDLE -> { /* Do something */ }
            }
        }
    }
)

Solution B:

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
        if (abs(verticalOffset) - appBarLayout.totalScrollRange == 0) { 
            // Collapsed
        } else if (verticalOffset == 0) {
            // Expanded
        } else {
            // Idle
        }
    }
)
3

This solution is working for me:

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
  if (i == 0) {
    if (onStateChangeListener != null && state != State.EXPANDED) {
      onStateChangeListener.onStateChange(State.EXPANDED);
    }
    state = State.EXPANDED;
  } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
    if (onStateChangeListener != null && state != State.COLLAPSED) {
      onStateChangeListener.onStateChange(State.COLLAPSED);
    }
    state = State.COLLAPSED;
  } else {
    if (onStateChangeListener != null && state != State.IDLE) {
      onStateChangeListener.onStateChange(State.IDLE);
    }
    state = State.IDLE;
  }
}

Use addOnOffsetChangedListener on the AppBarLayout.

1
  • Can you share your complete code? What is State.EXPANDED etc?
    – Chetna
    Sep 23, 2015 at 6:28
2

This code is working perfect for me. You can use percentage scale How you like

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    double percentage = (double) Math.abs(verticalOffset) / collapsingToolbar.getHeight();
    if (percentage > 0.8) {
        collapsingToolbar.setTitle("Collapsed");
    } else {
        collapsingToolbar.setTitle("Expanded");
    }
}
2

Here is the solution in Kotlin:

abstract class AppBarStateChangeListener : OnOffsetChangedListener {
    enum class State {
        EXPANDED, COLLAPSED, IDLE
    }

    private var mCurrentState =
        State.IDLE

    override fun onOffsetChanged(appBarLayout: AppBarLayout, i: Int) {
        mCurrentState = if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED)
            }
            State.EXPANDED
        } else if (Math.abs(i) >= appBarLayout.totalScrollRange) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED)
            }
            State.COLLAPSED
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE)
            }
            State.IDLE
        }
    }

    abstract fun onStateChanged(
        appBarLayout: AppBarLayout?,
        state: State?
    )
}

Here is the listener:

  appbar.addOnOffsetChangedListener(object : AppBarStateChangeListener() {
        override fun onStateChanged(
            appBarLayout: AppBarLayout?,
            state: State?
        ) {
            if(state == State.COLLAPSED){
                LayoutBottom.visibility = View.GONE
            }else if(state == State.EXPANDED){
                LayoutBottom.visibility = View.VISIBLE
            }
        }
    })
1

If you are using CollapsingToolBarLayout you can put this

collapsingToolbar.setExpandedTitleColor(ContextCompat.getColor(activity, android.R.color.transparent));
collapsingToolbar.setTitle(title);
0

My Toolbar offset value get -582 when collapse, on expand=0 So I find value by setting offsetvalue in Toast & change code accordingly.

 mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if(verticalOffset == -582) {
            Toast.makeText(MainActivity.this, "collaped" + verticalOffset, Toast.LENGTH_SHORT).show();
            mCollapsingToolbarLayout.setTitle("Collapsed");
            }else if(verticalOffset == 0){
                Toast.makeText(MainActivity.this, "expanded" + verticalOffset, Toast.LENGTH_SHORT).show();
            mCollapsingToolbarLayout.setTitle("expanded");
            }
        }
    });

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.