{"id":851,"date":"2023-11-26T18:56:49","date_gmt":"2023-11-26T15:56:49","guid":{"rendered":"https:\/\/barisuslucan.com\/en\/?p=851"},"modified":"2023-11-26T20:04:43","modified_gmt":"2023-11-26T17:04:43","slug":"change-status-navigation-bar-color-by-enableedgetoedge-in-jetpack-compose","status":"publish","type":"post","link":"https:\/\/barisuslucan.com\/en\/kotlin\/change-status-navigation-bar-color-by-enableedgetoedge-in-jetpack-compose\/","title":{"rendered":"Change Status\/Navigation Bar Color by “enableEdgeToEdge” in Jetpack Compose"},"content":{"rendered":"

The SystemUIController library has been deprecated in Jetpack Compose. The recommended approach is to use enableEdgeToEdge for activity-compose version 1.8.0 and above. This enables customization of status and navigation bars, allowing for color adjustments, transparency enabling, or displaying screen content within the status bar area.<\/p>\n

The enableEdgeToEdge method allows your Android application to display its content using the full width and height of the screen.<\/p>\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
class<\/span> <\/span>MainActivity<\/span> : ComponentActivity() {<\/span><\/span>\n    <\/span>override<\/span> <\/span>fun<\/span> <\/span>onCreate<\/span>(savedInstanceState: Bundle?) {<\/span><\/span>\n        <\/span>super<\/span>.<\/span>onCreate<\/span>(savedInstanceState)<\/span><\/span>\n<\/span>\n        <\/span>enableEdgeToEdge<\/span>(<\/span><\/span>\n            statusBarStyle <\/span>=<\/span> SystemBarStyle.<\/span>dark<\/span>(<\/span><\/span>\n                scrim <\/span>=<\/span> Color.TRANSPARENT,<\/span><\/span>\n            ),<\/span><\/span>\n            navigationBarStyle <\/span>=<\/span> SystemBarStyle.<\/span>light<\/span>(<\/span><\/span>\n                scrim <\/span>=<\/span> Color.TRANSPARENT,<\/span><\/span>\n                darkScrim <\/span>=<\/span> Color.TRANSPARENT<\/span><\/span>\n            )<\/span><\/span>\n        )<\/span><\/span>\n<\/span>\n        <\/span>setContent<\/span> {<\/span><\/span>\n            <\/span>EdgetoedgeprojectTheme<\/span> {<\/span><\/span>\n                <\/span>Box<\/span>(<\/span><\/span>\n                    modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                        .<\/span>fillMaxSize<\/span>()<\/span><\/span>\n                        .<\/span>background<\/span>(color <\/span>=<\/span> MaterialTheme.colorScheme.background)<\/span><\/span>\n                ) {<\/span><\/span>\n<\/span>\n                    <\/span>Image<\/span>(<\/span><\/span>\n                        modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                            .<\/span>fillMaxWidth<\/span>()<\/span><\/span>\n                            .<\/span>align<\/span>(Alignment.TopCenter),<\/span><\/span>\n                        painter <\/span>=<\/span> <\/span>painterResource<\/span>(id <\/span>=<\/span> R.drawable.image),<\/span><\/span>\n                        contentDescription <\/span>=<\/span> <\/span>"Image"<\/span>,<\/span><\/span>\n                    )<\/span><\/span>\n                    <\/span>Text<\/span>(<\/span><\/span>\n                        modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                            .<\/span>align<\/span>(Alignment.BottomCenter),<\/span><\/span>\n                        text <\/span>=<\/span> <\/span>"Bottom Text"<\/span><\/span>\n                    )<\/span><\/span>\n                }<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

Let\u2019s edit the Theme.kt file as follows. We already adjust the content color of the StatusBar with the edgetoedge function, so there is no need to specify the light\/dark theme status separately in the Theme.kt file. However, if you are using separate colors for dark and light themes and want the content color of the statusBar to be light or dark, you can make the content color of the statusBar light or dark as shown below.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@Composable<\/span><\/span>\nfun<\/span> <\/span>EdgetoedgeprojectTheme<\/span>(<\/span><\/span>\n    darkTheme: Boolean <\/span>=<\/span> <\/span>isSystemInDarkTheme<\/span>(),<\/span><\/span>\n    <\/span>\/\/ Dynamic color is available on Android 12+<\/span><\/span>\n    dynamicColor: Boolean <\/span>=<\/span> <\/span>false<\/span>,<\/span><\/span>\n    content: @Composable () <\/span>-><\/span> Unit<\/span><\/span>\n) {<\/span><\/span>\n    <\/span>val<\/span> colorScheme <\/span>=<\/span> <\/span>when<\/span> {<\/span><\/span>\n        dynamicColor <\/span>&&<\/span> Build.VERSION.SDK_INT <\/span>>=<\/span> Build.VERSION_CODES.S <\/span>-><\/span> {<\/span><\/span>\n            <\/span>val<\/span> context <\/span>=<\/span> LocalContext.current<\/span><\/span>\n            <\/span>if<\/span> (darkTheme) <\/span>dynamicDarkColorScheme<\/span>(context) <\/span>else<\/span> <\/span>dynamicLightColorScheme<\/span>(context)<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        darkTheme <\/span>-><\/span> DarkColorScheme<\/span><\/span>\n        <\/span>else<\/span> <\/span>-><\/span> LightColorScheme<\/span><\/span>\n    }<\/span><\/span>\n    <\/span>val<\/span> view <\/span>=<\/span> LocalView.current<\/span><\/span>\n    <\/span>if<\/span> (<\/span>!<\/span>view.isInEditMode) {<\/span><\/span>\n        <\/span>SideEffect<\/span> {<\/span><\/span>\n            <\/span>val<\/span> window <\/span>=<\/span> (view.context <\/span>as<\/span> Activity).window<\/span><\/span>\n            WindowCompat.<\/span>getInsetsController<\/span>(window, view).isAppearanceLightStatusBars <\/span>=<\/span> <\/span>!<\/span>darkTheme<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n    <\/span>MaterialTheme<\/span>(<\/span><\/span>\n        colorScheme <\/span>=<\/span> colorScheme,<\/span><\/span>\n        typography <\/span>=<\/span> Typography,<\/span><\/span>\n        content <\/span>=<\/span> content<\/span><\/span>\n    )<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

\"edgetoedge_image1\"<\/p>\n

As seen in the output given, the Image covers the background of the statusBar, while the Text is inside the NavigationBar. You can give separate padding to them via the main box or give padding all at once as shown below.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
 <\/span>setContent<\/span> {<\/span><\/span>\n            <\/span>EdgetoedgeprojectTheme<\/span> {<\/span><\/span>\n                <\/span>Box<\/span>(<\/span><\/span>\n                    modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                        .<\/span>fillMaxSize<\/span>()<\/span><\/span>\n                        .<\/span>background<\/span>(color <\/span>=<\/span> MaterialTheme.colorScheme.background)<\/span><\/span>\n                        .<\/span>systemBarsPadding<\/span>()<\/span><\/span>\n                ) {<\/span><\/span>\n<\/span>\n                    <\/span>Image<\/span>(<\/span><\/span>\n                        modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                            .<\/span>fillMaxWidth<\/span>()<\/span><\/span>\n                            .<\/span>align<\/span>(Alignment.TopCenter),<\/span><\/span>\n                        painter <\/span>=<\/span> <\/span>painterResource<\/span>(id <\/span>=<\/span> R.drawable.image),<\/span><\/span>\n                        contentDescription <\/span>=<\/span> <\/span>"Image"<\/span>,<\/span><\/span>\n                    )<\/span><\/span>\n                    <\/span>Text<\/span>(<\/span><\/span>\n                        modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                            .<\/span>align<\/span>(Alignment.BottomCenter),<\/span><\/span>\n                        text <\/span>=<\/span> <\/span>"Bottom Text"<\/span><\/span>\n                    )<\/span><\/span>\n                }<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span><\/code><\/pre><\/div>\n\n\n

\"\"<\/p>\n

If you want to give padding only to the statusBar, you can use \u201c.statusBarsPadding()\u201d, and if you want to give padding only to the navigationBar, you can use \u201c.navigationBarsPadding()\u201d Modifier extensions.<\/p>","protected":false},"excerpt":{"rendered":"
The SystemUIController library has been deprecated in Jetpack Compose. The recommended approach is to use enableEdgeToEdge for activity-compose version 1.8.0 and above. This enables customization of status and navigation bars, allowing for color adjustments, transparency enabling, or displaying screen content within the status bar area. The enableEdgeToEdge method allows your Android application to display its content using the full width and height of the screen. Let\u2019s edit the Theme.kt file as follows. We already adjust the content color of the StatusBar with the edgetoedge function, so there is no need to specify the light\/dark theme status separately in the Theme.kt…<\/p>\n","protected":false},"author":1,"featured_media":789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/comments?post=851"}],"version-history":[{"count":4,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/851\/revisions"}],"predecessor-version":[{"id":858,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/851\/revisions\/858"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media\/789"}],"wp:attachment":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media?parent=851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/categories?post=851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/tags?post=851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}