How to toggle visibility of status bar and navigation bars in your full screen activity on android

TL;DR

I will discuss how you can achieve various levels of full screen experience in you activity. I will also show how to toggle the bars(navigation and status bars) in and out on user taps. If you are someone who learns by looking at code instead, here is GitHub link to this project instead https://github.com/pavan142/FullScreenExperiments.

1. Getting rid of the action bar

Removal of Action Bar

Create a new theme in your styles file with attributes windowActionBar set to false and windowNoTitle set to true. Set this as theme for your activity.

res/values/themes.xml

<style name="Theme.AndroidExperiments.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

AndroidManifest.xml

<activity
    ...
    android:theme="@style/Theme.AndroidExperiments.NoActionBar">

2. Getting rid of the status bar

Removal of Status bar

Status Bar can be removed by adding the below visibility flag. Visibility flags can be set on any View that is visible, and the flags will be applied on the Window. These flags are usually set in the onCreate of the activity. Remember that once you come out of the activity, this flag will be cleared. So it is important to set them in onResume too.

• SYSTEM_UI_FLAG_FULLSCREEN: This flag removes the Status Bar

3. Letting the Activity expand to the empty space left behind by the Status Bar

Activity expanding to cover status bar

There are two important things to consider here.

• First, when you set the flag SYSTEM_UI_FLAG_FULLSCREEN, it only hides the status bar, and displays empty bar in it’s space. You need to set additional flags to expand into status bar area.

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: To let the layout expand and occupy

SYSTEM_UI_FLAG_LAYOUT_STABLE: To ensure that there is no abrupt change when the status bar is toggled in and out of visibility by user interactions.

• Secondly, if the device has a notch in it’s physical display, you need to let the android framework know that you intend to occupy that space. This can be achieved by setting the attribute windowLayoutInDisplayCutoutMode value to shortEdges. Here you are telling the framework that the activity has to extend into the notch area.

4. Hiding the Navigation Bar

Removing the Navigation Bar

To Hide the bottom Navigation Bar, you need to set the below two flags.

• SYSTEM_UI_FLAG_HIDE_NAVIGATION: This hides the navigation bar
• SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION: This lets the layout expand to the navigation area

5. Showing and Hiding the status bar and navigation bar on user Interactions

Toggling the bars

Now, the finale! You have set all the flags and your activity is truly being shown in the full screen mode and you are giving the user full immersive experience. But one touch on the screen, the bars come back and all the flags are reset. You need to let the user go back into the immersive mode. One way to do it is on each tap on screen, toggle the visibility of these bars. This can be achieved by intercepting touch event and toggling the visibility. But you need to remember every screen interaction emits a touch event, so you need to filter out the tap event from the rest of the touch events. This can be done using GestureDetectors. See the full code snippet below

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private  View _decorView;
    private GestureDetector _tapDetector;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        _decorView = getWindow().getDecorView();
        hideSystemUI();
        setContentView(R.layout.activity_main);
        _tapDetector = new GestureDetector(this,
                new GestureDetector.SimpleOnGestureListener() {
                    @Override
                    public boolean onSingleTapUp(MotionEvent e) {
                        boolean visible = (_decorView.getSystemUiVisibility() & View.SYSTEM_UI_FLAG_HIDE_NAVIGATION) == 0;
                        if (visible)
                            hideSystemUI();
                        else
                            showSystemUI();
                        return true;
                    }
                });
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        _tapDetector.onTouchEvent(ev);
        return super.dispatchTouchEvent(ev);
    }

    // SYSTEM_UI_FLAG_FULLSCREEN // Hide the status bar
    // SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // Let the layout expand into status bar
    // SYSTEM_UI_FLAG_LAYOUT_STABLE // avoid abrupt layout changes during toggling of status and navigation bars
    // SYSTEM_UI_FLAG_HIDE_NAVIGATION // Hide the navigation bar
    // SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION; // Let the layout expand into navigation bar

    private void hideSystemUI() {
        int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
        _decorView.setSystemUiVisibility(uiOptions);
    }

    private void showSystemUI() {
        int uiOptions = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
        _decorView.setSystemUiVisibility(uiOptions);
    }

    @Override
    protected void onResume() {
        hideSystemUI();
        super.onResume();
    }
}

res/styles/theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.AndroidExperiments" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>


    <style name="Theme.AndroidExperiments.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

You can also check out my github project for the entire code https://github.com/pavan142/FullScreenExperiments

Bonus Tip!: I started using Zen mode in Android Studio while writing code just like I do in VS Code. And whatever reluctance I always had with Android Studio for coding has been majorly reduced with it.

• To activate it for yourself, do the following.
  Ctrl + Alt + S // To open Android Studio Settings
• Search for Zen Mode, you will find a result under keymap. Now go and add a keyboard stroke to it as a shortcut. I added the same shortcut that’s default for VS Code. Ctrl + K, Z . Have fun!

Zen Mode In Android Studio