2

Update I was looking into this because when I changed the size of the spacer manually it caused stuttering and thought the CollapsingToolbarLayout will help fix it. Reading https://stackoverflow.com/a/16103503/2482564 help me fix the stuttering by using ObjectAnimator and setting its duration to 0.

I'm keeping the question open in case someone has a solution with CollapsingToolbarLayout

Original question

I'm trying to achieve the following behavior with CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and TabLayout - whichever is appropriate for the task...

I want my initial view to look like this mockup enter image description here

and the behavior when scrolling up should be:

  1. the area marked in yellow disappears 1st
  2. the area marked in blue disappears 2nd - it's only an area with color, no text
  3. the area marked in pink - the tabs area, remains on the screen and is located at the top of the screen

I tried to work with the cheesesquare example and modified include_list_viewpager with the code below, but I get the normal collapsing tabs behavior with the shrinking title

    <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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"
        android:minHeight="50dp"
        android:background="@color/cardview_dark_background"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <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|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="50dp"
            android:background="@color/cardview_shadow_start_color"
            android:gravity="top"
            android:orientation="vertical"
            app:layout_collapseMode="pin">

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

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

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

any idea what should be changed to get the behavior I want? I tried other methods of changing the size of the spacer area manually, but it causes flickering on screen since I'm intruding in the middle of the scroll event

Community
  • 1
  • 1
Noa Drach
  • 2,381
  • 3
  • 26
  • 44

1 Answers1

0

Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout

Adrian Vovk
  • 13
  • 5