CODEWITHSUNDEEP
kotlinandroid-jetpack-composematerial3
Sailab Banik
Sailab Banik

Reputation: 51

How to make status bar color same as top app bar color in material 3 in jetpack compose

I want to make status bar as same as top app bar color in material 3 jetpack compose project and also want to achieve tonal elevation while scrolling. How to achieve this?

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        SmallTopAppBar(
            scrollBehavior = scrollBehavior,

I want same for the status bar too.

Upvotes: 5

Views: 3123

Answers (2)

Mohammad Estaki
Mohammad Estaki

Reputation: 26

If you want to have the same color in your statusBarColor and backgroundColor you should edit this part in theme.kt in your app:

    @Composable
    fun YourAppTheme(
        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

                // *** YOUR CHANGES WILL START FROM THIS SECTION ***

                // *** set window.statusBarColor to colorScheme.background.toArgb() to adjust the statusBarColor to match the theme and background  ***
                window.statusBarColor = colorScheme.background.toArgb()

                // *** change "darkTheme" to "!darkTheme" to adjust the statusBarTextColor to match by theme  ***
                WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
            }
        }
    
        MaterialTheme(
            colorScheme = colorScheme,
            typography = Typography,
            content = content
        )
    }

Upvotes: 1

Code Poet
Code Poet

Reputation: 8005

You would normally use the Accompanist System UI Controller for Jetpack Compose for this.

For instance, you can use it in this way:

setContent {
            MyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val systemUiController = rememberSystemUiController()
                    val useDarkIcons = !isSystemInDarkTheme()

                    SideEffect {
                        systemUiController.setStatusBarColor(
                            color = Color(0xff655D8A),
                            darkIcons = !useDarkIcons
                        )
                    }
                  }
                }

Add this dependency to your app build.gradle:

implementation "com.google.accompanist:accompanist-systemuicontroller:0.31.1-alpha"

Upvotes: 1

Related Questions