How to collapse content of AppBarLayout but not Toolbar

Question

Here is my application screen:

And layout xml:

<android.support.v4.widget.NestedScrollView
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="@string/app_name"
        app:theme="@style/Toolbar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/arrow_right_bold"
    app:fabSize="normal" />

And I want to collapse the only content while scrolling.

I figure out that I can move Toolbar out of AppBarLayout but whether there is a clear way? Otherwise, I will be forced set toolbar background color. I haven't any problem with it, but I think that it's some kind of dirty solution :)

So. How to collapse content of AppBarLayout but not Toolbar?

here is a turorial in depth: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout — gsb, Feb 10 '16 at 21:44

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

If I understood correctly, you want to collapse a portion of the header when scrolling. If that's the case, @Nerd's comment links to a good tutorial on how to do that. Anyway, I'll leave here an example of CoordinatorLayout usage that does what you are looking for:

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout

            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <!-- PUT HERE THE PORTION OF THE HEADER YOU WANT TO COLLAPSE WHEN SCROLLING-->
            </FrameLayout>

            <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/ThemeOverlay.AppCompat.Light"/>


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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- YOUR SCROLLABLE CONTENT HERE -->
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

Thank you, but it's not quite what I want. I've updated the picture in question to make it clearer what I want. — Alexandr, Feb 11 '16 at 04:05
Sorry, I still don't get it. With the code on my response, if you put your collapsible portion inside the `FrameLayout `, you will get the effect of collapsing that portion. And you can put there whatever you need. Is your desired behavior following any of [this patterns](https://www.google.com/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling) ? — Logain, Feb 11 '16 at 04:25
I did it, but not as desired: https://www.youtube.com/watch?v=nYXWgwO14AQ&feature=youtu.be There is my layout xml: http://pastebin.com/eTZYQCiD (AppBarLayout's child adds while execution) But, as you can see, there is no shadow from Toolbar as it placed out of AppBarLayout. Is there any other solution to my case? — Alexandr, Feb 11 '16 at 19:18

score 0 · Answer 2 · answered Feb 06 '17 at 14:45

0

Probably I'm too late but if you still need a way to handle this you can follow this article.

The power of AppBarLayout offset

He simply puts the toolbar outside the CoordinatorLayout. Quite radical I know but this is the only way I found.

answered Feb 06 '17 at 14:45

Black_Prime

1
1

Acuna · Answer 3 · 2021-06-20T00:53:56.210

You simply need to wrap your CoordinatorLayout to the LinearLayout and put your toolbar above the CoordinatorLayout:

<LinearLayout
  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:orientation="vertical"
  >
  
  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    />
  
  <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_start"
    >
    
    <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="300dp"
      >
      
      <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/main.collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >
       
        <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          app:layout_collapseMode="parallax"
          >
          
          <!-- Collapsed content -->
          
        </LinearLayout>
      
      </android.support.design.widget.CollapsingToolbarLayout>
      
    </android.support.design.widget.AppBarLayout>
    
    <android.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      >
      
      <!-- Another content -->
     
    </android.support.v4.widget.NestedScrollView>
    
  </android.support.design.widget.CoordinatorLayout>
  
</LinearLayout>

How to collapse content of AppBarLayout but not Toolbar

3 Answers3