9

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

enter image description here

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>
5
  • So, In another word, You're trying to show just the TabLayout and hiding the StatusBar, Right? Commented Mar 9, 2017 at 21:50
  • 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. Commented Mar 9, 2017 at 21:54
  • @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. Commented Mar 10, 2017 at 12:01
  • Any impact on your design if you keep the status bar hidden always? Commented Mar 13, 2017 at 8:44
  • @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. Commented Mar 17, 2017 at 9:59

2 Answers 2

4
+50

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
        }
    }
});
2
  • 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.
    – random
    Commented Mar 14, 2017 at 7:54
  • 1
    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. Commented Mar 17, 2017 at 10:02
0

Try adding this to your onResume of your activity

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.