Flickering Statusbar in Edge to Edge mode

120 views Asked by At

I've just setup Edge2Edge mode on a new Android project. Generally that works fine, however on app startup there's a noticable moment where the status bar is not visible at all.

  1. status bar is displaying fine while app logo is shown:

  1. then for some time the status bar is not or not really shown:

  1. finally the status bar is shown:

I have two issues here:

a) The status bar is "flickering" as it's first shown, then not shown, then shown again.

b) The status bar color is close to the white app background, but not completely white.

This is how MainActivity looks like:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        enableEdgeToEdge()


        setContent {
            NewToGetThemesTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize().safeDrawingPadding(),
                    color = MaterialTheme.colorScheme.background,

                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

Theme.kt looks like this (note the commented out side effect):

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

@Composable
fun NewToGetThemesTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            // I've commented out the next lines as they made everything worse
            //window.statusBarColor = colorScheme.primary.toArgb()
            //WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

themes.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.NewToGetThemes" parent="android:Theme.Material.Light.NoActionBar" />
</resources>
0

There are 0 answers