Status bar color change when Collapsing toolbar Collapsed and Expanded

Question

I have a requirement like when collapsed toolbar is expanded the status bar color should be transparent and when toolbar is collapsed then status bar should get the theme color. There are many related to status bar color but this requirement is completely different. Please help if anyone knows the solution.

Answer 1

Your AppBar has a listener called .addOnOffsetChangedListener().

Using this listener will provide you an easier approach while working with the scroll of your screen.

You can use the offset to calculate if the user scroll is equal to the verticalOffset provided by the listener.

If the offset is 0, the user has not scrolled down the screen and the AppBar must be expanded.

If the offset is not 0 (negative number), the user must have scrolled down the screen.

You can follow this implementation:

// Your appbar, findViewById<AppBarLayout>(R.id....) should be used or binding
// You have to use your layout view and not initializing like this
val appbar = AppBarLayout(this)

// Variable to store when the appbar is collapsed or expanded
var isExpanded = false

// Variable to store the total scroll range
var scrollRange = -1

// Add a listener for the offset
appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    // If the scrollRange has not been initialized
    if (scrollRange == -1) {
        // Set to the total scroll range
        scrollRange = appBarLayout.totalScrollRange
    }

    // If the scroll range + the verticalOffset == 0
    // If the sum result is 0 the appbar is expanded
    // If not, it must be collapsed
    if (scrollRange + verticalOffset == 0) {
        // The appbar is expanded
        isExpanded = true

        // Set the statusBar color when the appbar is expanded
        window.statusBarColor = getColor(R.color.red)

    // If the sum result is not 0 and it was previously expanded
    // Now it must be collapsed
    } else if (isExpanded) {
        // The appbar is collapsed
        isExpanded = false

        // Set the statusBar color when the appbar is collapsed
        window.statusBarColor = getColor(R.color.blue)
    }
})

You can find more informations from the documentation about AppBarLayout