android extend toolbar into translucent status bar while keeping other layout objects in systemview

Question

I am trying to get the gradient that is the background of my tabbed toolbar to extend over the translucent status bar, like the image below.

I have attempted to use the LAYOUT_NO_LIMITS and the TRANSLUCENT_NAVIGATION flags to achieve this, but then half of the toolbar goes under the status bar and snackbars go under the navigation bar.

This is the current layout file:

<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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="software.endeavor.projectg.TabbedActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:background="@drawable/main_gradient">

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

        </android.support.v7.widget.Toolbar>

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

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

    <View
        android:id="@+id/toolbar_shadow"
        android:layout_width="match_parent"
        android:layout_height="12dp"
        android:layout_below="@id/toolbar"
        android:background="@drawable/toolbar_dropshadow" />

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipeContainer"
        android:layout_width="368dp"
        android:layout_height="495dp">

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end|bottom"
            android:layout_margin="@dimen/fab_margin"
            app:srcCompat="@android:drawable/ic_dialog_email" />

    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

How would I go about extending the tabbed toolbar gradient to the status bar while still maintaining the proper system layout boundaries and keeping the regular colored navigation bar?

score 2 · Accepted Answer · edited May 23 '17 at 11:47

I had faced a similar problem long time ago. Easy way to solve it is using a dummy View to push your Toolbar and other views down.

Dummy view:

View with height of status bar to push content below.

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/status_bar_height"/>

Now the layout becomes:

<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:id="@+id/main_content"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true"
     tools:context="software.endeavor.projectg.TabbedActivity">


    <View
       android:layout_width="match_parent"
       android:layout_height="@dimen/status_bar_height"/>

    ...

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

I hope you get idea. Also take care of status_bar_height value in the dimen and note that status bar height changed in Android M or N (Not sure).

Refer this article get status bar height: Height of status bar in Android

score 0 · Answer 2 · answered Aug 29 '19 at 15:47

Where you place your fitSystemWindows is important. The view that has that property is the one that will be added padding to make sure that the system components (status bar in this case) don't overlap your content.

For example, if you move it to the Toolbar then padding will be added to it and you will have a padded Toolbar under the status bar.

Keep in mind that only the first view in the hierarchy with fitSystemWindows will be added padding.

This is a lot simpler than using dummy views and relying on getting the height of the status bar which brings several other issues.

A good article on this available here

android extend toolbar into translucent status bar while keeping other layout objects in systemview

2 Answers2