Search code examples
androidandroid-studiomaterial-designandroid-statusbarandroid-12

How to match status bar and navigation bar colors to action bar and bottom navigation menu?


I'm attempting to match the status bar and navigation bar color to the action bar and bottom navigation menu. When I set the color to "colorOnPrimary" to match the action bar, the colors come out darker than expected.

Changing Status bar and Navigation bar colors:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.PATCOToday" parent="Theme.Material3.DayNight">
    <!-- Primary brand color. -->
    <item name="android:colorBackground">@color/material_dynamic_primary99</item>
    <item name="colorOnBackground">@color/material_dynamic_primary10</item>
    <item name="colorPrimary">@color/material_dynamic_primary60</item>
    <item name="colorPrimaryDark">@color/material_dynamic_primary50</item>
    <item name="colorPrimaryContainer">@color/material_dynamic_primary90</item>
    <item name="colorOnPrimary">@color/material_dynamic_primary99</item>
    <item name="colorOnPrimaryContainer">@color/material_dynamic_primary20</item>
    <!-- Status-bar and Nav-bar -->
    <item name="android:statusBarColor">?android:colorPrimary</item>
    <item name="android:navigationBarColor">?android:colorPrimary</item>
</style>

Result vs What I'd Like


I believe the colors are coming out differently because of my implementation of Material 3, but I'm not sure how to fix it.

Any ideas?


Solution

  • If I got you right, you can try to do this programmatically by inserting these lines in your onCreate() method in MainActivity class.

    if (Build.VERSION.SDK_INT >= 21) {
        getWindow().setStatusBarColor(ContextCompat.getColor(this,R.color.your_color));
        getWindow().setNavigationBarColor(ContextCompat.getColor(this,R.color.your_color));
    }