Customizing System UI and Status Bar on Android

The System UI and Status Bar on Android devices provide users with important information and quick access to various settings. As an Android app developer, it's essential to understand how to customize these elements to provide a unique user experience. In this tutorial, we will explore different techniques to customize the System UI and Status Bar on Android.

Prerequisites

To follow along with this tutorial, you will need:

• Android Studio installed on your machine
• An Android device or emulator running Android 4.0 (API level 14) or higher

Table of Contents

1. Overview of System UI and Status Bar
2. Changing the Status Bar Color
3. Hiding the Status Bar
4. Customizing the Navigation Bar
   • Changing the Navigation Bar Color
   • Hiding the Navigation Bar
5. Implementing Immersive Full-Screen Mode
6. Conclusion

1. Overview of System UI and Status Bar

The System UI is the interface that allows users to interact with their Android device. It includes the Status Bar, Navigation Bar, and other system-level elements. The Status Bar appears at the top of the screen and displays information like battery life, network signal, and notifications.

2. Changing the Status Bar Color

To change the color of the Status Bar, follow these steps:

1. Open your Android project in Android Studio.

2. Open the styles.xml file located in the res/values directory.

3. Add the following style to customize the Status Bar color:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:statusBarColor">@color/status_bar_color</item>
</style>

Replace @color/status_bar_color with your desired color resource.

4. Apply the theme to your application in the AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">

    <application
        android:theme="@style/AppTheme">
        ...
    </application>
</manifest>

3. Hiding the Status Bar

To hide the Status Bar, add the following line inside the onCreate() method of your activity:

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Remember to import the necessary WindowManager class.

4. Customizing the Navigation Bar

Changing the Navigation Bar Color

To change the color of the Navigation Bar, follow these steps:

1. Open your Android project in Android Studio.

2. Open the styles.xml file located in the res/values directory.

3. Add the following style to customize the Navigation Bar color:

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

Replace @color/navigation_bar_color with your desired color resource.

4. Apply the theme to your application in the AndroidManifest.xml file (as shown in step 4 of section 2).

Hiding the Navigation Bar

To hide the Navigation Bar, add the following lines inside the onCreate() method of your activity:

View decorView = getWindow().getDecorView();
int flags = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(flags);

5. Implementing Immersive Full-Screen Mode

Immursive full-screen mode allows you to hide both the System UI and Status Bar, providing a more immersive experience for your app users. To implement this mode, follow these steps:

1. Add the following lines inside the onCreate() method of your activity:

View decorView = getWindow().getDecorView();
int flags = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
        | View.SYSTEM_UI_FLAG_FULLSCREEN
        | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
decorView.setSystemUiVisibility(flags);

2. Implement the View.OnSystemUiVisibilityChangeListener interface and override the onSystemUiVisibilityChange() method:

@Override
public void onSystemUiVisibilityChange(int visibility) {
    if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
        // The system bars are visible; hide and re-enable immersive mode
        hideSystemBars();
    }
}

private void hideSystemBars() {
    View decorView = getWindow().getDecorView();
    int flags = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN
            | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
    decorView.setSystemUiVisibility(flags);
}

3. Call the hideSystemBars() method in the onCreate() method to initially hide the system bars.

6. Conclusion

In this tutorial, we explored various techniques to customize the System UI and Status Bar on Android devices. We learned how to change the status bar and navigation bar color, hide the status bar and navigation bar, and implement immersive full-screen mode. By customizing these elements, you can enhance the user experience of your Android app. Experiment with different customization options and create a unique interface for your users.