Is it possible to have the Status Bar scroll away along with the toolbar using coordinator layout on Android?

Question

I would like to know if it is possible to scroll the entire status bar (icons and background), not just the background. Almost as if as if it was part of the toolbar.

I am experiencing the same situation as the question below, the difference is I would like to know if I can scroll the entire status bar as appose to making the background opaque - which is what I think was the desired outcome of the below query

Android status bar scrolling up with coordinator layout, leaving status icons overlapping toolbar title

Here is a graphic

Here is my code

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="me.hugopretorius.wishlizt.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:contentScrim="#000">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tabs"/>

    <io.github.yavski.fabspeeddial.FabSpeedDial
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:fabGravity="bottom_end"
        app:fabMenu="@menu/menu_fab"
        app:miniFabBackgroundTint="@android:color/white"
        app:miniFabDrawableTint="?attr/colorPrimaryDark"
        app:miniFabTitleTextColor="?attr/colorPrimaryDark" />

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

Paradies

So, In another word, You're trying to show just the TabLayout and hiding the StatusBar, Right? – Backdate

Of course, I don't think if you'll find an answer from credible and/or official sources since it is not recommended by android to hiding the StatusBar When Toolbar is hidden and there is just a TabLayout AFAIK. – Backdate

@Mohsen I would like to show the StatusBar when the Toolbar is visible (when the user scrolls up) and slide both the StatusBar and Toolbar out of view when the user scrolls down. Currently my only options are to 1. hide or 2. show the StatusBar. There is no scrolling action on it like there is on the toolbar. – Paradies

Any impact on your design if you keep the status bar hidden always? – Gastongastralgia

@MohammedAtif That could be my second choice! I am not sure about the impact of that but I will rather have it always hidden than always shown. – Paradies

Answer 1

You should be able to listen to scroll changes, and hide the status bar once the Toolbar collapses. This won't give you actual incremental scrolling, but will leave you with just the tabs as you require.

First, onCreate set the flags so that the layout won't jump when the bar disappears:

//root should be your coordinator/top level layout
mRoot.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Once the toolbar collapses, change the status bar to hidden:

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {

            // Collapsed
            mRoot.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                                      | View.SYSTEM_UI_FLAG_FULLSCREEN); //this one changed

        } else if (verticalOffset == 0) {

            // Fully Expanded - show the status bar
            if (Build.VERSION.SDK_INT >= 16) {
                mRoot.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE
                                          | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                                          | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            } else {
                getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
            }

        } else {
            // Somewhere in between
            // We could optionally dim icons in this step by adding the flag:
            // View.SYSTEM_UI_FLAG_LOW_PROFILE
        }
    }
});

Leonhard

Ideally status bar / system bar should be hidden only for immersive content where we need full screen. But with tab bar present we should carefully consider modifying the system bars, since they give users a standard way of navigating a device and viewing its status as per developer.android.com/training/system-ui/index.html. But if we really need to hide status bar with tab bar displayed this seems to be the closest solution. It will not have desired animation and generally not recommended by android design guidelines so one should think twice before opting it. – Andyane

Thank you Nick, this is very useful and I will use this. Even though it does not have the scroll animation, with a bit of styling I can make this look nice. – Paradies

Answer 2

Try adding this to your onResume of your activity

View decorView = getWindow().getDecorView();
int uiFlagFullscreen = View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiFlagFullscreen);

Kissiah