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

Question

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>

Have you tried `android:animateLayoutChanges="true"` in the root of your fragment or in the `LinearLayout` in your Viewpager?, The links to your gifs, don't work with me. — Guanaco Devs, Sep 01 '19 at 00:42
@Racu I've updated the gif and I've also tried adding the attribute to my root view and linearlayout but it's still jumping when I try to hide the status bar. — antWilder, Sep 01 '19 at 20:24
Ahhh, with the gifs is better, try `android:fitSystemWindows="false"` — Guanaco Devs, Sep 01 '19 at 20:38
Hmm, still the same result but I do notice that my layout is now being pushed down from the top almost the same distance as the height of the status bar. — antWilder, Sep 01 '19 at 21:39
Same results...I'll try to do this on a fresh project and see if I can do the implementation there. I'll report my findings if anything changes : / — antWilder, Sep 02 '19 at 00:09
According to what you want in your GIFs, I'm positive `android:fitSystemWindows="false"` is what you are looking for, it will take your layout to ignore the system bars, by the time you hide/show them is already taking the whole screen rather than fitting the space between the bars, maybe the fragments you are attaching to the viewpager are the ones that gives that bump, or the theme you apply to your activity, don't really know, good luck ;-) — Guanaco Devs, Sep 02 '19 at 00:43
You're probably right, I'll try to mess around with the themes to see whats going on. Appreciate the help! @Racu — antWilder, Sep 02 '19 at 01:16

score 4 · Accepted Answer · answered Sep 05 '19 at 00:30

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
    }

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

1 Answers1