How to make AppBarLayout to completely disappear with windowTranslucentStatus set to true

Question

I'm developing an Android app using the new design library. I would like to create a similar scrolling effect that is used in the new Google Photos app. I would like the AppBarLayout to scroll off of screen completely so that the recycler view would scroll behind the status bar.

I've set windowTranslucentStatus to true in the app's theme. Here's the xml of the main activity:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

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

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

Here's what this looks like when scrolled down: Toolbar not disappearing completely

The Toolbar doesn't completely disappear.

Thanks for help!

I'm beginning to wonder if they even used the CoordinatorLayout... I've been stuck on this exact question all day. — timothyjc, Jun 26 '15 at 20:36
@timothyjc If you find a solution before I do, can you please post it here. And I think you're right yes — alesko007, Jun 26 '15 at 21:25
Uploaded my sample project to github in case anyone wants to easily see the issue... https://github.com/timothyjc/TestALot — timothyjc, Jun 27 '15 at 08:09
@pratsJ Not with AppBarLAyout and Toolbar. I have created a custom toolbar and added some elevation effect to the toolbar when scrolling. It's not the same as I've described above though. — alesko007, Sep 19 '15 at 22:42
Anyone has the solution to this? Have been scratching my head for the last few days. — Kise, Jun 08 '16 at 07:14

score 1 · Answer 1 · answered Feb 03 '16 at 14:51

Here's what i used in my application

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

score 0 · Answer 2 · answered Jun 26 '15 at 21:31

This was about as close as I could get with the CoordinatorLayout (just playing with the margins on the toolbar)... not close enough imo:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:paddingTop="25dp"
        android:layout_width="match_parent"
        android:layout_height="81dp"
        android:layout_marginTop="-28dp"
        android:background="#00ffffff"
        app:layout_scrollFlags="scroll|enterAlways" />

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:background="#ffffff"
    android:fitsSystemWindows="true"
    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="16dp"
    android:src="@drawable/ic_headphones_white_24dp" />

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

I think it will be easier to do it manually...

Do you have any ideas or progress?

I'm trying to work out something with setting height and margins to coordinator layout. However this is creating new problems. Did you figure it out? — alesko007, Jun 29 '15 at 23:34
Some guy on Reddit told me there is a bug and it will be fixed next release of the support design lib. I ended up doing all the animations manually. — timothyjc, Jun 29 '15 at 23:36
@timothyjc fitsSystemWindows must be on the AppBarLayout too. And android:windowDrawsSystemBarBackgrounds=true should be there in v-21 styles.xml This is what I did to make it work. — Suleiman19, Jun 30 '15 at 04:18
@Suleiman. I tried that but it did not work when using a semitransparent status bar for me. — timothyjc, Jun 30 '15 at 06:47

score 0 · Answer 3 · answered Oct 06 '15 at 14:32

In my case I added fitSystemWindows="false" to CoordinatorLayout and fitSystemWindows="true" to its child - in your case to the RecyclerView. On NavigationView, DrawerLayout, AppBarLayout and Toolbar its "true". I've tried diferent values and then something breaks in my case. Android 5.1.1 and the latest support libraries (23.0.1). Hope it helps.

score 0 · Answer 4 · answered Mar 31 '16 at 07:47

Use common pattern of AppBarLayout that comes from the app template when you create an Android project in Android Studio. Just few changes in XML layout and Java code:

XML Layout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay"
    >

    <FrameLayout
        android:id="@+id/toolbar_container"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        >

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

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

Java Code:

ViewCompat.setOnApplyWindowInsetsListener(toolbar, new OnApplyWindowInsetsListener() {
        @Override
        public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
            toolbarContainerLayout.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);

            return insets;
        }
    });

Suleiman19 · Answer 5 · 2015-06-27T08:55:13.343

-1

Add fitsSystemWindows="true" for your AppBarLayout and CoordinatorLayout.

edited Jun 27 '15 at 08:55

answered Jun 27 '15 at 05:40

Suleiman19

742
1
7
21

That doesn't make the Toolbar transparent. – IgorGanapolsky Sep 01 '15 at 14:43

How to make AppBarLayout to completely disappear with windowTranslucentStatus set to true

5 Answers5