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 ?

android is responsible for managing the animation of showing and hiding the status bar (top) and navigation bar (bottom). We don't have control over it — nandsito, Jul 05 '17 at 23:08
Have you tried adding animateLayoutChanges="true" to the RecyclerView or its parent container? — sri, Jul 07 '17 at 07:43

Raanan · Accepted Answer · 2017-11-09T20:27:08.807

5

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.

edited Nov 09 '17 at 20:27

answered Jul 10 '17 at 13:55

Raanan

4,777
27
47

1

This actually brought me to the solution, thank you! – Mayr Technologies Jul 12 '17 at 11:43

score 1 · Answer 2 · edited Nov 09 '17 at 19:17

1

// Hide status bar

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

// Show status bar

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

edited Nov 09 '17 at 19:17

fawaad

341
6
12

answered Jul 11 '17 at 09:31

Jamil Hasnine Tamim

4,389
27
43

score 0 · Answer 3 · answered Jul 10 '17 at 13:37

Have you tried running your methods on Android's UI thread? e.g.

runOnUiThread(new Runnable() {
    public void run() {
        // execute your hiding/presenting the bar here
    }
});

There are several options to use the Android UI thread… Have a look at this question

Android Screen Blinking on show/hide System Bars

The Problem

My Approach

My Question

3 Answers3

Linked