Reputation: 83
Background: My background is in web development, ruby and javascript. I'm working on a mostly react-native app, so very likely I'm missing something basic.
What I want
android navigation bar to be white with dark system buttons see image in link white navigation bar
My Current Code
res/values/style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#FFFFFF</item>
</style>
</resources>
What is happening instead
The background AND the buttons are white. which is not so great for UX.
** What I have Tried **
this is what got me where I am now Change navigation bar icon color on Android
I have tried putting style.xml in a values-v27
folder.
Upvotes: 4
Views: 8023
Reputation: 100
I just worked on this same topic and found out you need to run at least Android 8.1 (or API level 27) on the device/emulator for this to work.
Also, I had to add this to the color of the bar:
<item name="android:navigationBarColor">@android:color/white</item>
So, recommended steps:
<item name="android:navigationBarColor">@android:color/white</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowLightNavigationBar">true</item>
In your other values folder, you kind of have to live with the fact that this windowsLightNavigationBar doesn't apply...
Small remark
I also found a bug on this change, when putting app in background and then opening it again, the navbar buttons stay white for a second before getting the dark color
Upvotes: 6
Reputation: 6702
A new approach would be:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.navigationBarColor = ContextCompat.getColor(this, android.R.color.white)
WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
}
Upvotes: 1
Reputation: 3212
Your code is working as intended for me. Make sure you have the file name and file path written correctly:
https://i.sstatic.net/HpB47.jpg
Upvotes: 0