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

Theme

    <style name="Theme.FullScreen" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>
     </style>

AndroidManifest

   <activity android:exported="false"
        android:name=".FullScreenActivity"
        android:screenOrientation="fullSensor"
        android:theme="@style/Theme.FullScreen"/>

Answer 2

Try this to hide/show statusbar and navbar, both are parts of SystemUI.

fun setSystemUIVisibility(hide: Boolean) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
        val window = window.insetsController!!
        val windows = WindowInsets.Type.statusBars() or WindowInsets.Type.navigationBars()
        if (hide) window.hide(windows) else window.show(windows)
        // needed for hide, doesn't do anything in show
        window.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    } else {
        val view = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
                View.SYSTEM_UI_FLAG_FULLSCREEN or
                View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        window.decorView.systemUiVisibility = if (hide) view else view.inv()
    }
}

Answer 3

Try this...

<style name="MyApp" parent="Theme.MaterialComponents.Light.NoActionBar">
 ...
 <item name="windowNoTitle">true</item>
 <item name="windowActionBar">false</item>
 <item name="android:windowFullscreen">true</item>
 ...
 </style>

Answer 4

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);

Answer 5

Go in values>styles

Now In App theme use

To make navigation bar transculate

<item name="android:windowTranslucentNavigation">true</item>

To remove it make its color matched with your layout

<item name="android:navigationBarColor">@color/white</item>

OR Try this

public void FullScreencall() {
    if(Build.VERSION.SDK_INT > 11 && Build.VERSION.SDK_INT < 19) { // lower api
        View v = this.getWindow().getDecorView();
        v.setSystemUiVisibility(View.GONE);
    } else if(Build.VERSION.SDK_INT >= 19) {
        //for new api versions.
        View decorView = getWindow().getDecorView();
        int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
        decorView.setSystemUiVisibility(uiOptions);
    }
}