Control the System UI Visibility:penguin:

Let's practice how to control the System UI by referring to the Android documentation

👆👆

Download PPT : https://github.com/ggujangi/ggu.system.ui/files/4094927/System.UI.Visibility.ppt.pptx

INDEX

• Dimming the System Bars
• Hiding the Status Bar
• Hiding the Navigation Bar
• Using Immersive Full-Screen Mode

1. Dimming the System Bars

Dim the Status and Navigation Bars

• Available in Android 4.0 (API level 14) and higher
• You can dim the status and notification bars using the SYSTEM_UI_FLAG_LOW_PROFILE flag
• As soon as the user touches the status or navigation bar, the flag is cleared

Reveal the Status and Navigation Bars

• Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_VISIBLE flag clears all flags
• As soon as the user touches the status or navigation bar, the flag is cleared

View mDecorView = getActivity().getWindow().getDecorView();
int mOption = View.SYSTEM_UI_FLAG_LOW_PROFILE;
mDecorView.setSystemUiVisibility(mOption);
// clear all flags
mDecorView.setSystemUiVisibility(SYSTEM_UI_FLAG_VISIBLE);

2. Hiding the Status Bar

Hide the Status Bar on Android 4.0 and Lower

• Setting an activity theme

  <application
    ...
    android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen">
    ...
  </application>

• Setting WindowManager flags

  • When you set WindowManager flags, the flags remain in effect unless your app clears them
  • You can use FLAG_LAYOUT_IN_SCREEN to set your activity layout to use the same screen area that's available when you've enabled FLAG_FULL_SCREEN

  getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

Hide the Status Bar on Android 4.1 and Higher

• Setting UI Flags

  • Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_FULLSCREEN flag hides the status bar

  View mDecorView = getActivity().getWindow().getDecorView();
  int mOption = View.SYSTEM_UI_FLAG_FULLSCREEN;
  mDecorView.setSystemUiVisibility(mOption);

• Responding to UI Visibility Changes

  • When the user reopens the activity, onCreate() won't get called, so if you want system UI changes to persist, set UI flags in onResume() of onWindowFocusChanged()

Make Content Appear Behind the Status Bar

• Available in Android 4.1 (API level 16) and higher
• If you use SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION, the content will not be resized when the navigation bar is hidden and visible.
• SYSTEM_UI_FLAG_LAYOUT_STABLE helps your app maintain a stable layout.
• android:fitsSystemWindows adjusts the padding of the parent ViewGroup and if set to true the app's UI will not be covered by the system bar

3. Hiding the Navigation Bar

Hide the Navigation Bar

• Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_HIDE_NAVIGATION flag hides the navigation bar
• You can also hide the status bar by using the SYSTEM_UI_FLAG_FULLSCREEN flag together. This works the same as Lean back in Full screen Options

View mDecorView = getActivity().getWindow().getDecorView();
int mOption = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
// Hide both the navigation bar and the status bar
int bothOption = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
              | View.SYSTEM_UI_FLAG_FULLSCREEN;
mDecorView.setSystemUiVisibility(mOption);

Make Content Appear Behind the Navigation Bar

• Available in Android 4.1 (API level 16) and higher
• If you use SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION, the content will not be resized when the navigation bar is hidden and visible
• SYSTEM_UI_FLAG_LAYOUT_STABLE helps your app maintain a stable layout

4. Using Immersive Full-Screen Mode

Lean Back

• The lean back mode is for fullscreen experiences in which users won't be interacting heavily with the screen
• For example, watching a video.
• When the user taps anywhere on the screen, the system bar appears
• Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_FULLSCREEN and SYSTEM_UI_FLAG_HIDE_NAVIGATION
• When the system bars re-appear, you can receive a callback to make other appropriate updates to your UI

View mDecorView = getActivity().getWindow().getDecorView();
int mOption = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
          | View.SYSTEM_UI_FLAG_FULLSCREEN;
mDecorView.setSystemUiVisibility(mOption);

Immersive

• The immersive mode is intended for apps in which user will be heavily interacting with the screen
• For example, games, viewing images in a gallery, or reading paginated content
• When user swipe from any edge where a system bar is hidden, the system bars appear
• Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_IMMERSIVE and SYSTEM_UI_FLAG_FULLSCREEN, SYSTEM_UI_FLAG_HIDE_NAVIGATION
• When the system bars re-appear, you can receive a callback to make other appropriate updates to your UI

View mDecorView = getActivity().getWindow().getDecorView();
int mOption = View.SYSTEM_UI_FLAG_IMMERSIVE
          | View.SYSTEM_UI_FLAG_FULLSCREEN
          | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
mDecorView.setSystemUiVisibility(mOption);

Sticky Immersive

• For example, drawing app, playing a game that requires lots of swiping
• When user swipe from any edge where a system bar is hidden, the system bars appear but they're semi-transparent
• The bars automatically disappear after a few seconds of no interaction or as soon as the user touches or gestures anywhere outside the system bars
• Calling setSystemUiVisibility() with SYSTEM_UI_FLAG_IMMERSIVE_STICKY and SYSTEM_UI_FLAG_FULLSCREEN, SYSTEM_UI_FLAG_HIDE_NAVIGATION
• With sticky immersive, You cannot receive a callback when the system UI visibility changes

View mDecorView = getActivity().getWindow().getDecorView();
int mOption =  View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
          | View.SYSTEM_UI_FLAG_FULLSCREEN
          | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
mDecorView.setSystemUiVisibility(mOption);