Change navigation bar icon color on Android

62
votes

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

enter image description here

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.

5
androidmaterial-design
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. – showp1984
@showp1984 Yes, I wanna know about the method to change those icons. (KeyButtonView as per android.googlesource.com/platform/frameworks/base/+/…) – Gaurav Vashisth
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. – showp1984
@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. – Gaurav Vashisth
@DeniErdyneev Yes, just asked designer to change the design :). – Gaurav Vashisth

5 Answers

51
votes

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.

21
votes

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

1
votes

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)

enter image description here

0
votes

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

0
votes

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

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