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.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public boolean areTranslucentBarsAvailable() { try { int id = context.getResources().getIdentifier("config_enableTranslucentDecor", "bool", "android"); if (id == 0) { // not on KitKat return false; } else { boolean enabled = context.getResources().getBoolean(id); // enabled = are translucent bars supported on this device return enabled; } } catch (Exception e) { return false; } } |
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).
|
1 2 3 4 |
Window w = activity.getWindow(); w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); w.setFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN,WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); |
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).
|
1 2 3 4 5 |
Window w = activity.getWindow(); w.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override public void onWindowFocusChanged(boolean hasFocus) { super.onWindowFocusChanged(hasFocus); if (hasFocus) { decorView.setSystemUiVisibility( 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);} } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
final View decorView = w.getDecorView(); decorView.setOnSystemUiVisibilityChangeListener (new View.OnSystemUiVisibilityChangeListener() { @Override public void onSystemUiVisibilityChange(int visibility) { restoreTransparentBars(); } }); decorView.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { restoreTransparentBars(); } }); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
private Handler mRestoreImmersiveModeHandler = new Handler(); private Runnable restoreImmersiveModeRunnable = new Runnable() { public void run() { restoreTransparentBars(); } }; public void restoreTranslucentBarsDelayed() { // we restore it now and after 500 ms! if (isApplicationInImmersiveMode) { restoreTransparentBars(); mRestoreImmersiveModeHandler.postDelayed(restoreImmersiveModeRunnable, 500); } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK ||keyCode == KeyEvent.KEYCODE_VOLUME_DOWN || keyCode == KeyEvent.KEYCODE_VOLUME_UP) { restoreTranslucentBarsDelayed; } return super.onKeyDown(keyCode, event); } |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@TargetApi(19) public void restoreTransparentBars() { if (isApplicationInImmersiveMode) try { Window w = activity.getWindow(); w.getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION ); w.getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY); } catch (Exception e) {} } |
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:
|
1 2 |
// Get the height of status bar return context.getResources().getDimensionPixelSize(context.getResources().getIdentifier("status_bar_height", "dimen", "android")); |
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.