Small guide: how to support immersive mode under Android 4.4+

In Android 4.4 version we have new Immersive mode which allows to make system bars translucent and extend application area to fit all screen. This looks great as it gives more space to application in terms of usability and it creates more stylish look if application design is done accordingly.

Immersive mode for TripBudget

I added support of immersive mode to TripBudget. And there were some unexpected troubles on the way so i decided to write some kind of guide here.

Note: I talk here about immersive mode where bottom navigation bar is hidden – using SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag. This guide is aimed to gather and solve all problems which prevent sticky mode to work properly.

First we need to check if device supports immersive mode

There are several approaches how to enable the mode itself – i like programmatic way without any xml scheme modifications. We need just set some properties of window to enable translucent system bars (status bar and bottom navigation bar).

And than we setup View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY flag. This will hide ugly navigation bar on devices with no hardware buttons (like Nexus 4).

In perfect world that would be enough, but the main problem raises when we need to keep immersive mode during application life cycle. Solution suggested by Google is pretty simple – you just handle onSystemUiVisibilityChange / onWindowFocusChanged events. Like this:

But there are still some problems/bugs to solve:

  • Some versions of 4.4 breaks immersive mode when user pushes volume buttons
  • Sometimes onSystemUiVisibilityChange is not called at all!
  • When you switch between apps Immersive mode can be broken when is used with sticky mode (Lower navigation bar remains unhidden)
  • When you push back button on nav bar it becomes black and stays that way!

When we set mode for the first time we set some handlers:

Also we set the some refreshers at OnResume and OnWindowFocusChanged. And at onKeyDown event also!

As was proposed here for solution of volume up/down problem we handle onKeyDown event specific way. Not only we try to restore immersive mode instantly when event is fired but use delayed handler:

And the last part of tricky restore code – my function for restoring not just applies sticky mode but it clears it first. This solves problems when user switches between apps (checked on Nexus 4).

In my implementation handlers at resume and focus events call restoreTranslucentBarsDelayed();

Last concern – your app should be aware of transparent status bar. To get the height of status bar i use this code:

Enjoy using immersive mode :)

May be not all problems are yet covered in this small guide – so feel free to describe them and add your solutions in comments.

  • karthikeyan

    i want to screen fit on window manager layout params. how can i do it,. I need full source code in this tutorials

    • Victor Laskin

      Im sorry that i cant put full example here as its part of my complex app. If you just want full screen behaviour use WindowManager.LayoutParams.FLAG_FULLSCREEN flag. Also see WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN flag.

  • Vivek

    What is the default value for isApplicationInImmersiveMode ? And where it is changed ?

    • Victor Laskin

      Its just boolean flag, which is set to true when you first enter immersive mode. And it shows that you require to keep immersive mode on (when mode is enabled and device supports it).

  • Andy

    Thank you very much… A load of issues came up on Beta testing and you article saved my ass!

    • Victor Laskin

      Nice to hear it :)

  • Megzus Digital Tech

    Thanks for this information. Quick question. If one develops and app using this new immersive mode function / feature then what would happen if someone tries to install that app / .apk on a pre Android 4.4 device. Is there a way for the code to work on pre and post 4.4 devices.

    I say this as I made an app recently which worked on old and new devices (4.2, 4.4 and 5.0) but then after putting Immersive mode onto the app it now will only install on 4.4 and above devices.

    • Victor Laskin

      No need to set 4.4 limitation. You can use areTranslucentBarsAvailable() function to detect if your device supports immersive mode. And if it does not, you just dont call unimplemented api and everything still works. But you have to take into account that application’s content should be aware that there can be no overlay bars on some devices.

      • Megzus Digital Tech

        Hi Victor, thanks for this information.

        By the way what did you mean “there can be no overlay bars on some content”

        I’ve attached an image of part of my prototype

  • Hans William Parra Yañez

    I’m developing an app. In the menu makes me a white bar in place of the navigation bar when the immersive mode active. It is only in the menu, not the rest of the activity. Please help.