The status and navigation bars are essential components that store information and controls, and are integral to the Android experience. However, there are instances when you want your application, for example a video player, to take over the whole screen area. In three simple steps, we’ll show you how to hide the status and navigation bars, and ensure that the content behaves just the way you intend to.
Picture view with status and navigation bar
Picture view with status bar and navigation bar visible.
Android full-screen mode.
Picture view in full-screen mode.
Hide status and navigation bars
By hiding the surrounding system UI, you can focus your user’s attention more towards the application content. In a video player, for example, this would also result in a significant increase of the active screen area. To achieve that, you need to put the status and navigation bars into temporary modes by setting two system UI visibility flags on your view:
SYSTEM_UI_FLAG_FULLSCREEN – hides the status bar
SYSTEM_UI_FLAG_HIDE_NAVIGATION – hides the navigation bar
public class MyActivity extends Activity {
private View mMainView; // The main view of the activity
…
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
…
setContentView(R.layout.main);
mMainView = findViewById(R.id.main_layout);
…
}
/** Hides StatusBar and NavigationBar */
private void hideSystemUi() {
// Set flags for hiding status bar and navigation bar
mMainView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}
/** Shows StatusBar and NavigationBar */
private void showSystemUi() {
// Reset all flags
mMainView.setSystemUiVisibility(0);
}
If the navigation bar is hidden, the system will restore both the navigation bar and status bar automatically when the user touches the screen. This means you don’t have to worry about your app users losing access to vital functions.
Prevent changes to the layout
The size of the layout will change when system bars are hidden or shown, which results in the picture ‘jumping’ in size. To avoid this, you should make sure that the content always covers the entire area of the screen. You can do this by modifying the example to make use of two other system UI visibility flags:
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN – sets the layout as if the status bar is hidden (even if it’s not)
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION – sets the layout as if the navigation bar is hidden (even if it’s not)
This will cause parts of your picture to be obscured by the bars when they aren’t hidden, but that’s exactly what you want to achieve.
public class MyActivity extends Activity {
private View mMainView; // The main view of the activity
private int mSystemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION;
…
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
…
setContentView(R.layout.main);
mMainView = findViewById(R.id.main_layout);
mMainView.setSystemUiVisibility(mSystemUiVisibility);
…
}
/** Hides StatusBar and NavigationBar */
private void hideSystemUi() {
// Set flags for hiding status bar and navigation bar
mSystemUiVisibility = mSystemUiVisibility
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
mMainView.setSystemUiVisibility(mSystemUiVisibility);
}
/** Shows StatusBar and NavigationBar */
private void showSystemUi() {
// Reset flags for hiding status bar and navigation bar
mSystemUiVisibility = mSystemUiVisibility
& ~View.SYSTEM_UI_FLAG_FULLSCREEN
& ~View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
mMainView.setSystemUiVisibility(mSystemUiVisibility);
}
Make room for the status bar and navigation bar
There are some parts of the UI, like the Play/Pause buttons in this video player example, that you might not want to be obscured by the bars. To achieve that, use the flag android:fitsSystemWindows in your view’s layout file. If it’s set to “true” for a part of the layout, that part will adjust to make room for the status bar and navigation bar despite the flags SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN and SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION that we set in the previous example:
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<!– This layout will always extend to the full size of the display.
It will be partly obscured if the status bar or navigation
bar is visible. –>
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<!– Put full-screen content here –>
…
<!– This layout will always make room for the status bar and navigation
bar, so it will never be obscured by them. –>
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:fitsSystemWindows=”true” >
<!- – Put controls etc. here –>
…
Note that the inner layout will move when the bars are hidden or shown. To fix that, you can add yet another flag, SYSTEM_UI_FLAG_LAYOUT_STABLE, to your Java code:
public class MyActivity extends Activity {
private View mMainView; // The main view of the activity
private int mSystemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
…
***
Got any questions? Just drop us a note in the comments field below and we’ll get back to you as soon as possible.
Tidak ada komentar:
Posting Komentar