Introduction

Android 5.0 Lollipop introduced official support for coloring system bars so apps could fit the Material Design visual model more closely. That includes the navigation bar at the bottom of the screen on devices that use software navigation buttons.

Changing the navigation bar color is straightforward once you know two constraints: the API is only available on newer Android versions, and the chosen color still has to keep the navigation icons visible.

Change The Color In Code

On Lollipop and later, you can set the color through the activity window:

1import android.graphics.Color;
2import android.os.Build;
3import android.os.Bundle;
4import androidx.appcompat.app.AppCompatActivity;
5
6public class MainActivity extends AppCompatActivity {
7    @Override
8    protected void onCreate(Bundle savedInstanceState) {
9        super.onCreate(savedInstanceState);
10
11        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
12            getWindow().setNavigationBarColor(Color.parseColor("#1E88E5"));
13        }
14    }
15}

The version check matters because older Android versions do not support setNavigationBarColor.

Use A Color Resource Instead Of A Hard-Coded Value

In real apps, you usually store the color in resources rather than embedding a hex value directly:

1import android.os.Build;
2import android.os.Bundle;
3import androidx.appcompat.app.AppCompatActivity;
4import androidx.core.content.ContextCompat;
5
6public class MainActivity extends AppCompatActivity {
7    @Override
8    protected void onCreate(Bundle savedInstanceState) {
9        super.onCreate(savedInstanceState);
10
11        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
12            int navColor = ContextCompat.getColor(this, R.color.nav_bar_color);
13            getWindow().setNavigationBarColor(navColor);
14        }
15    }
16}

This keeps the design consistent with the rest of the theme and makes later updates easier.

Theme-Based Configuration

You can also define the navigation bar color in your theme so it applies consistently without repeating code in every activity. In a theme XML file:

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

That approach is often better when the color is part of the global application style rather than a screen-specific effect.

Interaction With System UI Flags

Navigation bar color changes are sometimes combined with immersive layouts or edge-to-edge content. In those cases, the final appearance depends on more than just the color value. Window flags and content layout choices can change how much of the bar is visible and how it blends with the app.

So if the color looks inconsistent, check whether the activity is also modifying system UI visibility or fullscreen behavior.

Design Considerations

The navigation bar is part of the system UI, so visual contrast matters. A very dark color can work well with light icons, but a low-contrast choice can make the buttons hard to see.

On early Lollipop-era devices, the navigation icons were not as flexible as in later Android versions, so developers often chose darker navigation bar colors to preserve contrast. Testing on real devices is more reliable than judging the result only from a design mockup.

Status Bar And Navigation Bar Are Separate

Developers often change both system bars together, but they are separate properties. For example:

1if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
2    getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.status_bar_color));
3    getWindow().setNavigationBarColor(ContextCompat.getColor(this, R.color.nav_bar_color));
4}

That gives you independent control over the top and bottom system areas.

Common Pitfalls

The biggest mistake is forgetting the API-level check. Calling setNavigationBarColor on unsupported versions will crash the app.

Another pitfall is picking a color that looks good in a design mockup but makes the navigation icons hard to read on real devices. Always test the contrast.

A third issue is assuming every device will show the navigation bar the same way. Gesture navigation, OEM customizations, and hardware navigation keys can all affect what the user actually sees.

Summary

• Android Lollipop introduced official navigation bar color customization.
• Use getWindow().setNavigationBarColor(...) on supported versions.
• Prefer color resources or theme attributes over hard-coded values.
• Test icon contrast so the navigation controls remain visible.
• Remember that navigation bar appearance can vary across devices.