How to Change System Navigation Bar Color

Android lollipop change navigation bar color

It can be done inside styles.xml using

<item name="android:navigationBarColor">@color/theme_color</item>

or

window.setNavigationBarColor(@ColorInt int color)

http://developer.android.com/reference/android/view/Window.html#setNavigationBarColor(int)

Note that the method was introduced in Android Lollipop and won't work on API version < 21.

The second method (works on KitKat) is to set windowTranslucentNavigation to true in the manifest and place a colored view beneath the navigation bar.

How to set the background color of system navigation bar to the one of the new Bottom Navigation bar in Material 3? (Android)

There is a new class in Material Components library in version 1.5.0 (specifically 1.5.0-alpha03) and up that solves this very problem, the SurfaceColors class.

To use it, call the getColor method on one of the constant values in the SurfaceColors enum for the desired color. Here is an example:

getWindow().setNavigationBarColor(SurfaceColors.SURFACE_2.getColor(this));

SURFACE_2 is what is used (or its equivalent) by BottomNavigationView. It works with and without Dynamic Coloring (including night mode). I have also observed this solution being used in the Files by Google app.

Here is a screenshot on Android 11

And here is a screenshot on Android 12.1 with Dynamic Coloring

If you're also curious about the exact shadow used by Google for the BottomNavigationView, it is a 5dp tall gradient drawable from #00000000 to #33333333.

Flutter: How to change system navigation bar color?

You could wrap your screen in an AnnotatedRegion when navigating to it (e.g. in your routes map):

return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
        systemNavigationBarColor: primaryColor,
    ),
    child: MyApp(),
);

Change color of system navigation and status bar when entering the dark mode in flutter

After trying many things, I found the following solution to my problem. I don't know if it's the cleanest solution, but it works. This solution is interesting for those who don't use an AppBar like in my case.

The trick is as follows ...

@override
Widget build(BuildContext context) {
 Theme.of(context).scaffoldBackgroundColor == Colors.white
    ? _lightStatusAndNavigationBar()
    : _darkStatusAndNavigationBar();
return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
...
}

The query is in the build of my class, in which I have the NavigationBar of my app. All other screens are connected there.

Using Theme.of (context) .scaffoldBackgroundColor, I ask which design should be used for the status and navigation bar.

These are the two functions for the different colors:

void _darkStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.light,
    statusBarColor: Colors.grey.shade900,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Colors.grey.shade900,
    systemNavigationBarDividerColor: Colors.grey.shade900,
    systemNavigationBarIconBrightness: Brightness.light,
  ),
);
}

 void _lightStatusAndNavigationBar() {
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarBrightness: Brightness.dark,
    statusBarColor: Colors.white,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarDividerColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
  ),
);
}

If something is still incomprehensible, just ask. :)

Flutter System Navigation bar and Status bar color

Note: this requires a more recent version of Flutter as it references APIs added in June 2018.

You can create a custom SystemUiOverlayStyle using the default constructor. The color of the system nav bar is defined there. But to avoid setting a lot of null values, use the copyWith method to update the values from an existing light/dark theme.

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

You can imperatively set the system nav color using the SystemChrome static methods.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

However, if you have multiple widgets which set this value, or use the material AppBar or Cupertino NavBar your value may be overwritten by them. Instead, you could use the new AnnotatedRegion API to tell flutter to automatically switch to this style anytime certain widgets are visible. For example, if you wanted to use the theme above anytime you are in a certain route, you could wrap it in an AnnotatedRegion widget like so.

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

This won't change your theme back to the previous value if you pop the route however

Android activity system navigation bar color?

You can try using sth like this:

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="android:navigationBarColor">@color/my_color</item>
</style>

android:navigationBarColor should do the trick.

Here you have a thread regarding this topic: How to change system navigation bar color

---

Related Topics