[AppBarLayout] statusBarForeground not working/glitch

[Guuz]

Description: When using the statusBarForeground feature of the AppBarLayout, and scrolling down, you can stil see the Toolbar content behind the statusbar. This looks really weird and does not look like how it is intended at all. You can see this in the Catalog example app. I have included a video.
In my own app the "scrim" sometimes appears but does not scroll with the user and is just very glitchy in general.

Video: https://streamable.com/1zsyv

Expected behavior: When scrolling the statusbar should be the set color, not transparent.

Source code: 5b94ec8

Android API version: Tested on 27 and 29

Material Library version: 1.1.0-beta02 and 1.2.0-alpha02

Device: Pixel emulators

[dsn5ft]

@chrisbanes Can you clarify whether statusBarForeground is working as intended here and whether the demo is just not a great example of the feature?

[chrisbanes]

Hmmm no that doesn't look working as intended. I'd expect that the status bar foreground should be draw above the Toolbar. This was working fine for us in the I/O 2019 app so I'm not entirely sure what it has stopped working now.

[dsn5ft]

Interesting. If I sync back to the original commit, 5b94ec8, I still see the same behavior in the demo:

[chrisbanes]

This might be an an elevation issue? Hard to say without looking at the view hierarchy (and I'm deep in dark mode bugs at the minute unfortunately).

[Guuz]

@chrisbanes Do you have any tips on how to dynamically color the status bar in my app, depending on the screen (fragments using navigation components, so an activity theme is not an option). This looked as one of the ways of doing it, but also like a very "new" method.

Some screens are white, some are dark, etc. The statusbar should reflect this.
Using statusBarForeground i got it to work. The only thing i needed to implement myself was setting the Light Status Bar flag so the icons change color.
But the i ran into this bug. So i'm guessing not many apps use this yet.

Is there anything i can do to help? I really, really(!), want to implement statusbar colors in the app i'm working on. It really fits the design.

[dsn5ft]

Hi @Guuz, can you try using Window#setStatusBarColor?

https://stackoverflow.com/a/26749343

You should be able to do that from within each fragment.

[chrisbanes]

Note: using Window.setStatusBarColor from each fragment is not recommended. It assumes that there's only one fragment on screen at a time, which isn't true for things like master-detail, or multi-window, etc.

This is actually pretty easy to achieve using a simple view in your fragment layout. You just need make sure it's height is updated to match the systemWindowInsets.top value.

Here's an example from iosched: layout, activity, HeightTopWindowInsetsListener

[Guuz]

@chrisbanes thanks for the example! Very helpful! I'd hoped there would be an "out of the box" solution. Seeing as you see this design pattern in so many apps, even in Google's apps. (The toolbar and statusbar being a single color and joining together.)
But i guess thats what AppBarLayout.statusBarForeground should be, when the kinks get ironed out ^_^ Correct?

[Guuz]

@dsn5ft cool! you fixed it! how can i keep track of in what release this will be? and could you give a timeframe on that? So we can decide to wait for that or implement a solution as @chrisbanes showed here #824 (comment)

[dsn5ft]

Hi @Guuz, we're planning on including this fix in the next release, which should be coming out within a week.

In the meantime, if you'd like to help us verify that this issue is fully resolved, we did just start publishing nightly snapshot releases. So the fix should be included here:

https://github.com/material-components/material-components-android/packages/81484?version=1.2.0-dev-20191218

To start using it you need to create a GitHub access token, and add the following to your build.gradle Maven repositories:

        maven {
            name = "MaterialSnapshots"
            url = uri("https://maven.pkg.github.com/material-components/material-components-android")
            credentials {
                username = <github_username>
                password = <github_access_token>
            }
        }

Then you can use the com.google.android.material:material:1.2.0-dev-20191218 dependency as per usual (more info here).

[Guuz]

@dsn5ft i'll test this with our app and get back to you asap! (probably within 24 hours)

[Guuz]

@dsn5ft IT WORKS! 🎉 🙌
https://streamable.com/wmcjf
Looking forward to the release :)

[dsn5ft]

Great! Thanks for verifying so quickly!