Friday, January 31, 2014

Managing System UI with changing APIs


Moving on with Android, there are several features introduced with every upcoming API version. Amongst those, the most improved feature we saw was Managing System UI.



Back before Android 4.1, this is how developers provided some basic UI features for Hiding Status Bar /Full Screen support.
if (Build.VERSION.SDK_INT < 16) {
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
  WindowManager.LayoutParams.FLAG_FULLSCREEN);
}
With advent of Android 4.0, there came a sudden UI option accessibility. Now instead of using WindowManager we could directly use setSystemUiVisibility() method.
decorView.setSystemUiVisibility(uiOptions);
where
decorView can be any view
and uiOptions is the flag providing various options.



With it was introduced a new feature of Dimming the System Bar. This can be acheived by using flag SYSTEM_UI_FLAG_LOW_PROFILE . The bars will be present but the details will be blurred. The content UI doesn't resize, only the status bar icons are pushed away.



As ActionBar had already come up in the picture, developers now would also need to take care of it while using these flags. It is a good practice to hide action bar when hiding the Status bar.



With Android 4.1, there came other System UI and Layout options to be used seperately or in combination.
SYSTEM_UI_FLAG_FULLSCREEN: This will hide both status bar and navigation bar.
SYSTEM_UI_FLAG_HIDE_NAVIGATION: This will hide only the navigation bar.



For Managing Content to appear behind the StatusBar/NavigationBar
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: for full screen layout
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION: Layout will adjust itself to hide navigation.
SYSTEM_UI_FLAG_LAYOUT_STABLE: for unchanged Layout dimensions.



Inorder avoid system bars to get covered, use android:fitsSystemWindows=true. This adjusts the padding of the parent ViewGroup to leave space for the system windows.



To auto handle resizing of UI content on absence of status bar,we need to have android:windowActionBarOverlay=true in applications theme.Now SYSTEM_UI_FLAG_FULLSCREEN will hide the action bar as well.



As Android 4.4 Kitkat paved its way, there came Immersive Mode Feature.
Immersive Mode enables the app to go truly full screen. Unlike others, activity continues to receive all touch events. The user can reveal the system bars with an inward swipe along the region where the system bars normally appear.



Immersive mode comes with two flag options:
1. SYSTEM_UI_FLAG_IMMERSIVE: It makes system bars and other UI controls hidden. All the Ui changes can be tracked using View.OnSystemUiVisibilityChangeListener
2. SYSTEM_UI_FLAG_IMMERSIVE_STICKY: As the user swipes to display the system bars, Semi-transparent bars temporarily appear and then hide again. The act of swiping doesn't clear any flags, nor does it trigger your system UI visibility change listeners, because the transient appearance of the system bars isn't considered a UI visibility change.



The Immersive mode flags are to be used with SYSTEM_UI_FLAG_HIDE_NAVIGATION or SYSTEM_UI_FLAG_FULLSCREEN

Some Important Things to Note:



Where to use Immersive and Immersive Sticky?
  • If you're building a truly immersive app, where you expect users to interact near the edges of the screen and you don't expect them to need frequent access to the system UI, use the IMMERSIVE_STICKY flag in conjunction with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION. For example, this approach might be suitable for a game or a drawing app.
  • If you're building a video player or some other app that requires minimal user interaction, you can probably get by with the lean back approach, available since Android 4.0 (API Level 14). For this type of app, simply using SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION should be sufficient. Don't use the "immersive" flags in this case.
  • If you're building a book reader, news reader, or a magazine, use the IMMERSIVE flag in conjunction with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION. Because users may want to access the action bar and other UI controls somewhat frequently, but not be bothered with any UI elements while flipping through content, IMMERSIVE is a good option for this use case.



Some famous apps using immersive mode
Badland, Beach Buggy Blitz, ComicRack, Comixology, Dayframe, DicePlayer, Dynamic Notifications, EVAC (and all other games by Hexage), FBReader, Feedex, Flixter, Google Play Books, Google Search, Hangouts (when viewing images), Instapaper, Manga Plus, Moon Reader, MX Player, Nest, Paint Splash! , Widget Locker etc

References
https://developer.android.com/training/system-ui/index.html
http://www.youtube.com/watch?v=cBi8fjv90E4
http://www.droid-life.com/2013/12/19/a-list-of-apps-that-support-android-4-4-kit-kat-immersive-mode/



Code
https://github.com/NehaDhanwani/AndroidDemos



Build some great apps.. and keep coding:)