Android
Status Bar
Change Color
Tutorial
Mobile Development

How to change the status bar color in Android?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Android applications offer a wide range of customization options to enhance the user experience. One subtle but effective customization is changing the color of the status bar. This interface element, situated at the top of the screen, displays essential system information like time, battery, and network status. By changing its color, developers can align the status bar with their app’s design theme for a more cohesive aesthetic.

Prerequisites

Before diving into the specifics, it's essential to ensure you have a basic understanding of Android development. You should be familiar with Android Studio, XML layout files, and themes in Android.

Changing the Status Bar Color

Using Themes

The most straightforward approach to changing the status bar color is to define it in the app's theme.

  1. Open res/values/styles.xml: Locate your app's theme definition within the styles.xml file.
  2. Add or Modify Status Bar Color Attribute:
xml
1<resources>
2    <!-- Base application theme. -->
3    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
4        <!-- Primary brand color. -->
5        <item name="colorPrimary">@color/primaryColor</item>
6        <!-- Primary dark color. -->
7        <item name="colorPrimaryDark">@color/primaryColorDark</item>
8        <!-- Customize your theme here. -->
9        <item name="android:statusBarColor">@color/statusBarColor</item>
10    </style>
11</resources>
  • colorPrimaryDark: This is used for the status bar color in Android versions below Lollipop (API Level 21).
  • statusBarColor: Only available in Lollipop and above, this directly sets the color of the status bar.

Programmatic Approach

To change the status bar color dynamically at runtime:

  1. Get Window Object:
java
Window window = activity.getWindow();
  1. Set the Status Bar Color:
java
1// Requires API Level 21
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
3    window.setStatusBarColor(ContextCompat.getColor(context, R.color.statusBarColor));
4}

Considerations for Light/Dark Content

Changing the status bar color should also consider content visibility, i.e., whether the status bar icons and text appear dark or light upon the background.

  1. Set Light Status Bar:
java
1View decorView = window.getDecorView();
2if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
3    decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
4}
  1. Revert to Default:
java
decorView.setSystemUiVisibility(0); // Clear previously set flags

Managing Different API Levels

Since methods and themes differ across Android versions, you must ensure compatibility:

  • Use Build.VERSION.SDK_INT to check the current API version before applying features that may only be available on more modern versions of Android.

Example

Here is a simple example summarizing the steps:

java
1public class MainActivity extends AppCompatActivity {
2    @Override
3    protected void onCreate(Bundle savedInstanceState) {
4        super.onCreate(savedInstanceState);
5        setContentView(R.layout.activity_main);
6
7        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
8            Window window = getWindow();
9            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
10            window.setStatusBarColor(ContextCompat.getColor(this, R.color.my_status_bar_color));
11        }
12        
13        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
14            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
15        }
16    }
17}

Summary Table

FeatureAPI LevelCode Snippet
Change Status Bar Color21 and abovewindow.setStatusBarColor(Color.RED);
Light Status Bar Content23 and abovewindow.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
Platform Check for Features-Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP or Build.VERSION_CODES.M
Theme-based Color Assignment21 and above<item name="android:statusBarColor">@color/my_status_bar_color</item> in styles.xml

Additional Considerations

  • Animation & Transitions: Consider using custom animations when the status bar color changes dynamically to create a smoother user experience.
  • Overlay Issue: On some devices, the status bar might overlay your UI. Adjust the UI padding if necessary by utilizing fitsSystemWindows.
  • Debugging: Always test on multiple devices and API levels to ensure that the status bar color transitions seamlessly across different versions of Android.

By following these steps, you can successfully change the status bar color to match your application’s design, improving consistency and visual appeal.


Course illustration
Course illustration

All Rights Reserved.