androidxmlkotlinandroid-viewpagerwindowinsets

Is there a way to prevent a layout from "jumping" when the status bar is being hidden?


I'm trying to implement a photo viewer in my app using a view pager. I'm able to get the system UI to disappear (both navigation and status bar) on a single touch. The only issue I'm having is that my layout on my view pager begins to shake or jump every time I make the status bar disappear and reappear.

A visual of my implementation

What I'm trying to implement

I've tried setting the system ui flags as per the suggestion in this stack over flow post. But it is still giving me the "jumpy" layout response.

The code below is what I used to hide/show status bar:

/**
 * Hide status bar and navigation bar.
 */
private fun hideSysWindows(activity: Window) {
    activity.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_FULLSCREEN
            or View.SYSTEM_UI_FLAG_IMMERSIVE)
}

/**
 * Show status bar and navigation bar.
 */
private fun showSysWindows(activity: Window) {
    activity.decorView.systemUiVisibility = (View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
}

XML Code for my view pager:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/black">

    <com.example.snapkit.mediaviewer.MediaViewPager android:layout_width="match_parent"
                                                    android:layout_height="match_parent"
                                                    android:id="@+id/media_viewer"/>

</LinearLayout>

Solution

  • So I did the implementation on a fresh project and tried it on two different devices in my emulator (Pixel 2 XL & Pixel 3 XL). What I noticed was that it would hide normally under the pixel 2 but on the pixel 3 xl (with the notch) it will draw below the notch itself.

    After some searching I realized I have to mess with the display cutout (also known as the notch) and set a flag to tell the system ui to draw under the notch itself.

    This worked like a charm, hopefully the code below will help anyone who sees this.

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P){
            window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
        }