Change navigation bar icon color on Android

Question

I need to change the navigation bar on android. Just like the 'light' variant on the right in the image below as given in https://www.google.co.in/design/spec/layout/structure.html#structure-system-bars.

Now, I can change the background of the navigation bar by using

"android:navigationBarColor"

I get

but there seems to be no way changing the button color to dark.

Anyone has the idea how to do it.

PS:

While researching in AOSP for the classes responsible for NavigationButtons, I could find NavigationBarView.java, PhoneStatusBar.java, PhoneWindowManager.java, navigation_bar.xml.

I was thinking of get reference of the drawable for the navigationbar buttons like ic_sysbar_recent and change their tint. But these are private and I cannot get their reference.

Also, I have seen people using xposed library to do it L-NAVBAR, but I don't want to use any external library.

Singley

Someone correct me if I am wrong, but the navigation bar buttons are icons, which is why they won't change color automagically. Either swap them out with dark ones (if possible) or try to invert them. – Export

@Export Yes, I wanna know about the method to change those icons. (KeyButtonView as per android.googlesource.com/platform/frameworks/base/+/…) – Singley

According to developer.android.com/training/material/theme.html --> "When you customize the navigation and status bars, either make them both transparent or modify only the status bar. The navigation bar should remain black in all other cases." - This will not be possible. – Export

For v21 and onwards, you can set <item name="android:navigationBarColor">@color/yourcolor</item> inside your app style in styles-v21. Are you using a Light theme? – Decoction

@DanielOcampo Check the question, already made the navigation bar to the desired color (white), The question is to how to change the color of the button icons on navigation bar. – Singley

@GauravVashisth Did you find a solution? – Pouf

@DeniErdyneev Yes, just asked designer to change the design :). – Singley

@GauravVashisth This comment should be the top answer – Evenhanded

So did anyone find the solution, how to change the icons color? – Porringer

Answer 1

If you are using API 27 (Android 8.1) or greater, you can achieve it with this in your theme:

<item name="android:windowLightNavigationBar">true</item>

You can create a folder called values-v27 and place a version of your theme (in styles.xml) with a light navigation bar and the above code to get dark navigation bar buttons.
This way, users with Android 8.0 or lower will get the standard (black) navigation bar while users with Android 8.1 or greater will get a white navbar with dark buttons.

Announcer

It should be noted that you also need to set <item name="android:navigationBarColor">@color/background_material_light</item>. – Heartsome

@Heartsome You can use any color you like, not just background_material_light. Just make sure to use a light color, since buttons will be dark. – Announcer

Yeah, I just meant that it should be clearer that you need to specify that attribute with some color because I spent a few minutes being confused as to why the nav bar was completely black. (I thought windowLightNavigationBar would change the button colors for you.) – Heartsome

How about under 27? – Danica

@MJStudio not possible – Moores

@TimCastelijns It's possible on 8.0 (v26) by setting the visibility flag SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR. For whatever reason, they only added the xml attribute in 8.1 (v27) which was released just a few months after 8.0. It is not supported prior to v26, though. – Cadmarr

Also, going by the most recent distribution dashboard, a substantial number of users (~12%) are on 8.0.. so it may be worthwhile to set this attribute in code if you want a light nav bar on those devices. – Cadmarr

this is only valid for sdk >= 27 – Shrunken

and notice you must set it to false in a dark mode theme like this: <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">false</item> – Vincevincelette

Answer 2

Starting from Android O it gets really straightforward, as you could just:

View.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

For this to take effect, the window must request FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS but not FLAG_TRANSLUCENT_NAVIGATION.

Documentation: https://developer.android.com/reference/android/view/View.html#SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR

Onaonager

It's worth noting that this is (at least for me) the only way to make navigation bar buttons dark (tested on Pie, API 28 (Pixel 2 XL)). Although the documentation (developer.android.com/reference/android/…) says that the windowLightNavigationBar XML attribute corresponds to the View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR, they most certainly do not correspond. I couldn't make the navigation bar buttons dark with the mentioned XML attribute, but I could with this piece of code. – Ploce

Doing it from the code works in all cases. The XML attribute seems to work only if you're NOT playing with system UI flags, such as SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN. – Henderson

This should be the accepted method.. as mentioned by others, the xml attribute seems to be finicky in some situations.. and is only available on 27+, while the flag is available on 26+ – Cadmarr

Is there a way to change system navigation bar icons color on API less than 26 ? – Xerarch

Answer 3

You can adjust windowLightNavigationBar = true/false and navigationBarColor = @color/yourColorId

so there're 4 cases, I've made an experiment:

In short, you don't want windowLightNavigationBar= false while navigationBarColor=White

or

windowLightNavigationBar= true while navigationBarColor=Black (this will be wired on SOME devices)

Ophiology

Answer 4

If your targeted user Api level is 27 or Higher just use this line in your AppTheme

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">       
    <item name="android:windowBackground">@color/your_color</item>                
</style>

But if your targeted user api level is less 27 and higher you can you these line

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">       
    <item name="android:windowBackground">@color/your_color</item>
    <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>            
</style>

By doing so, The user having API level 27 or higher get changed-color of BottomNav icon, but the user having API level less than 27, can't enjoy these feature

Taffy

Answer 5

Added the code block below to Theme.kt. Needed to set isNavigationBarContrastedEnforced == true to get nav icons to constrast correctly when using dynamic color schemes. (e.g. dynamicDarkColorScheme(context))

val colorScheme:ColorScheme = // logic for setting colorScheme here
val dynamicColor:Boolean = // logic for determining dynamic color here

val view = LocalView.current
val darkTheme = isSystemInDarkTheme()

if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = colorScheme.surface.toArgb()
        window.navigationBarColor = colorScheme.surface.toArgb()

        // Ensures text in system bars contrasts
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme && dynamicColor
        WindowCompat.getInsetsController(window, view).isAppearanceLightNavigationBars = !darkTheme && dynamicColor

        // Ensures navigation bar icons contrast.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            window.isNavigationBarContrastEnforced = true
        }
    }
}

Genovera

Answer 6

In Activity

Navigation-bar icon - color dark

getWindow().setNavigationBarColor(getContext().getResources().getColor(R.color.white));
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

Navigation-bar icon - color white

getWindow().setNavigationBarColor(getContext().getResources().getColor(R.color.black));
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

In Fragment

Navigation-bar icon - color dark

getActivity().getWindow().setNavigationBarColor(getContext().getResources().getColor(R.color.white));
View view = getActivity().getWindow().getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);

Navigation-bar icon - color white

getActivity().getWindow().setNavigationBarColor(getContext().getResources().getColor(R.color.black));
View view = getActivity().getWindow().getDecorView();
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);

Propraetor

Please add more details to your answer, descriptions are always helpful to support your answer. – Fibroblast

oh, oke, @anuj-sharma – Propraetor

Answer 7

To get Dark and Light icons, Use the following code

 if(darkIcon){
      window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
         window.getDecorView().getWindowInsetsController().setSystemBarsAppearance(APPEARANCE_LIGHT_STATUS_BARS, APPEARANCE_LIGHT_STATUS_BARS);
    }
 }else {
      window.getDecorView().setSystemUiVisibility(0);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
         window.getDecorView().getWindowInsetsController().setSystemBarsAppearance(0, APPEARANCE_LIGHT_STATUS_BARS);
      }
 }

Aerosphere

Answer 8

Simply add This line you are ok while the app is running

val navView: BottomNavigationView = findViewById(R.id.nav_view)
    navView.itemIconTintList = null

Magistral

The BottomNavigationView is something different than the system bottom navigation bar. – Fishplate