Android - hide status and navigation bar completely for an app with nav drawer and app bar

Question

How can I dynamically hide the status and the navigation bar completely?

The app contains a regular navigation drawer with a appbar / toolbar and FAB buttons.

When switching to full screen, the content of the navigation and the status bar is scrolled away. Two empty bars are left on the screen. I want those empty bars to hide.

I created a minimal demo app. On the left is the regular app. When pushing on the fab, the app should be shown fullscreen.

How can I get the bars to hide?

QUESTION: Please write which change(s) are needed in the minimal demo project?

Updated with a second solution:

The GREAT solution provided by @Roaim works. Essential was to set the android:fitsSystemWindows layout property to false.

If you still have trouble with the showing and hiding of status/navigation bars, this solutin may help you.

Hide the bars completely:

public static void hideSystemUI() {
    if (getSupportActionBar() != null) {
        getSupportActionBar().hide();
    }
    getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_IMMERSIVE
                    | 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);
}

And show all bars:

public static void showSystemUI() {
    if (getSupportActionBar() != null) {
        getSupportActionBar().show();
    }
    getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
    getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
}

Answer 1

Update

The issue was with your layout file. I just set android:fitsSystemWindows=false to fix the issue. I made a pull request to your repo, which I think solves your issue.

---

You should follow the following official documentations:

• Hide the status bar
• Hide the navigation bar

---

Hide the Status Bar on Android 4.0 and Lower

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // If the Android version is lower than Jellybean, use this call to hide
        // the status bar.
        if (Build.VERSION.SDK_INT < 16) {
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                    WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
        setContentView(R.layout.activity_main);
    }
    ...
}

Hide the Status Bar on Android 4.1 and Higher

    View decorView = getWindow().getDecorView();
    // Hide the status bar.
    int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN;
    decorView.setSystemUiVisibility(uiOptions);
    // Remember that you should never show the action bar if the
    // status bar is hidden, so hide that too if necessary.
    ActionBar actionBar = getActionBar();
    actionBar.hide();

Hide the Navigation Bar

    View decorView = getWindow().getDecorView();
    // Hide both the navigation bar and the status bar.
    // SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
    // a general rule, you should design your app to hide the status bar whenever you
    // hide the navigation bar.
    int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                  | View.SYSTEM_UI_FLAG_FULLSCREEN;
    decorView.setSystemUiVisibility(uiOptions);