Android Screen Blinking on show/hide System Bars

Question

The Problem

I want to show the System Bars when the user scrolls an RecyclerView upwards and hide the System Bars when the user scrolls down. However with my Approach it works, but the content strangly moves and blinks during the show/hide process. U uploaded a Video for the behaviour here: https://drive.google.com/open?id=0B_b9EpRt-zyHVW54dkQzcXdUTXM

My Approach

Basically I have this two methods:

   private void hideSystemUI() {
        getActivity().getWindow().getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                        | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
                        | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
                        | View.SYSTEM_UI_FLAG_IMMERSIVE);

    }


    private void showSystemUI() {
        getActivity().getWindow().getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                        | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                        | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    }

And i set this onScrollListener to the RecyclerView to hide and show the Status bars depending on the scroll:

   mFragmentListBinding.fragListRvMovies.addOnScrollListener(new RecyclerView.OnScrollListener() {
                @Override
                public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                    super.onScrolled(recyclerView, dx, dy);

                    if (dy > 5) {
                        //   hideSystemUI();
                        //     SystemUIHelper.hide(getActivity());
                        hideSystemUI();

                    } else if (dy < -5) {
                        showSystemUI();
                        //    showSystemUI();
                        //       SystemUIHelper.show(getActivity());
                    }
                    if (pageToDownload < TOTAL_PAGES && layoutManager.findLastVisibleItemPosition() == adapter.movieList.size() - 1 && !isLoadingLocked && !isLoading) {
                        downloadMoviesList();
                    }


                }
            });

And this is the layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/frag_drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/frag_drawer_coordinator"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="false">


            <android.support.design.widget.AppBarLayout
                android:id="@+id/frag_drawer_appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.AppBarOverlay"
                android:transitionGroup="false"
                tools:targetApi="lollipop">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/frag_drawer_tb"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"

                    android:background="?attr/colorPrimary"
                    app:layout_scrollFlags="scroll|enterAlways"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

            </android.support.design.widget.AppBarLayout>

            <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/frag_drawer_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="false"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/frag_drawer_fab_add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:layout_margin="@dimen/material_component_floating_action_button_margin"
                android:src="@drawable/ic_add_white_24dp"
                android:visibility="gone"
                android:fitsSystemWindows="false"
                app:backgroundTint="@color/accent"
                app:elevation="@dimen/elevation_fab_resting"
                app:fabSize="normal" />


            <android.support.design.widget.FloatingActionButton
                android:id="@+id/frag_drawer_fab_filter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|bottom"
                android:layout_margin="@dimen/material_component_floating_action_button_margin"
                android:fitsSystemWindows="false"
                android:src="@drawable/ic_filter"
                android:visibility="visible"
                app:backgroundTint="@color/accent"
                app:elevation="@dimen/elevation_fab_resting"
                app:fabSize="normal" />
        </android.support.design.widget.CoordinatorLayout>


        <android.support.design.widget.NavigationView
            android:id="@+id/frag_drawer_nav"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:elevation="@dimen/elevation_nav_drawer"
            app:headerLayout="@layout/layout_nv_header"
            app:itemIconTint="@color/nav_icon_tint"
            app:itemTextColor="@color/nav_text"
            app:menu="@menu/menu_drawer" />

    </android.support.v4.widget.DrawerLayout>
</layout>

My Question

How can I show and hide the Status bar and the Navigation View more smoothly ?

Answer 1

What you are seeing is the Layout resizing. The only way to prevent that is having the Layout layered under the system view, so it isn't affected. Checkout the following flags, which might help you prevent the resizing:

FLAG_LAYOUT_IN_SCREEN
FLAG_LAYOUT_INSET_DECOR

However, keep in mind that in the top part of your content will be behind the System UI and you need to offset that.

Answer 2

// Hide status bar

getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

// Show status bar

getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);