M3 Alert - M3 says - we use tonal enhancement for ...

# compose

[yogaboy]

M3 Alert - M3 says - we use tonal enhancement for elevation. I know how to achieve automatic elevation of the TopAppBar when scrolling. But the question is: How to achieve the connection of the TopAppBar elevation with the StatusBar? I use the accompanist library to change the color of the appBar. it has to be done somehow. 🤔 Because that’s how Gmail works. When scrolling, the tonal elevation of the appBar changes along with the TopAppBar.
1. TopAppBar Gmail with scroll position …. 2. My App with No scroll position 3. My App after scrolled

[sindrenm]

Is this in an M3 Scaffold, using the M3 TopAppBar? Would be nice with some code, but from first glance, it looks like you might have applied a top padding to the app bar, and not a content padding. You basically want the app bar to go behind your status bar, and the contents inside of it be pushed down, instead of pushing the app bar itself down.

[yogaboy]

@sindrenm That’s not the problem. Content on the page is OK. The problem is only color of status bar!. Have a look on GMail app. On A13 if you scroll the TopAppBar is nicely tonal elevated. First is white and after you start scroll than is Dynamic color elevated. The statusBar the same … but in my app I have connection with NestedScrollConnection only to TopAppBar. Not to StatusBar

[MR3Y]

this article shows how to do that exactly: https://arkadiuszchmura.com/posts/how-to-draw-content-behind-system-bars-in-jetpack-compose/

[yogaboy]

@MR3Y Wow! It’s Superb! Thanks a lot! It’s work almost OK. I have a splashscreen animation

private fun animSplashScreen(splashScr: SplashScreen) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
        splashScr.setOnExitAnimationListener { splashScreenView ->
            val animator: ViewPropertyAnimator =
                splashScreenView.iconView.animate().alpha(0f).setDuration(1000L)
                    .setInterpolator(LinearInterpolator())

            animator.withEndAction { splashScreenView.remove() }

            animator.start()
        }
    }
}

And for the first app start this peace of code broke the StatusBar invisibility. If I switch to DM or LM than is again OK. Do you have a Idea what will break it?

[MR3Y]

I'm not that familiar with SplashScreen API on Android 12+ but, I guess this is happening because Android is using the theme defined in themes.xml during Application startup. so, the solution to this is simple: just update the theme that your app is using by default in themes.xml file to match that theme in your compose code.
Also, from a quick research, I found that SplashScreen API has a method called setSplashScreenTheme() , this I think an easier way to override the theme your splash screen is using (as it by default uses the one declared in themes.xml as I said)

[yogaboy]

You are right. Splash screen api use themes.xml … but the problem is not in them.

[yogaboy]

if I use a different animation than animate.alpha that everything works fine.

[MR3Y]

hmm, I guess that alpha animation interferes with status bars drawing area.

[yogaboy]

damm! 🤦🏻 I’ve been trying to solve it all this time… I played with animation and setting View etc. and whole solution is so easy … as you wrote in article 😄 and here … theme for status bar must be transparent 😄
so everything solve

<item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">true</item>

Thank you so much! Now it looks nice and cool M3 😄 🤩

[MR3Y]

Great! just a small edit, I'm not actually the author of that article 😅.

[yogaboy]

aha ... well, it doesn’t matter .. in any case, thanks to you, I was able to finish it properly.