Related Questions
CollapsingToolbarLayout | Scrolling and layout issues 2
Question
I have been working with the Android Support Design Library and successfully implemented the CoordinatorLayout that causes the Toolbar and TabLayout to scroll out of view when scrolling. This works very well, so I figured I would try my luck with the new CollapsingToolbarLayout.
In a seperate activity, I have been having issue-after-issue with implementing CollapsingToolbarLayout. I am, as they say, close but no cigar.
I want to use 2 different fragments
Header Image (Currently just an ImageView)
"Scrollable" content (actually content isn't really scrollable, but I forced it will long Lorem Ipsum text for testing)
I had built one example of this layout by myself, but could not get it working after many tries. Finally, I found this [enter image description here][5] and modified it to get to the point I am now
Issues
Note: I don't know if these are caused by 1 thing (dominoes effect), or if these are individual. Also, I have looked at quite a few related questions, but none seem to have any of these issues.
Scrollable Content is shown above the Header Image
Scrollable Content is not anchored to the bottom of the Header Image
On Scrolling of Scrollable Content it will scroll the Header Image seemingly randomly of either:
Just right and follows the speed of the finger (perfect)
Too fast and will animate the Header Image off the screen by moving my finger the height of 1 line of text
Also on Scroll down, the 2 above effects happen along with a 3rd effect
Instant or Near instant "animation" of showing the Header Image at full width
Edit: These below are asked in another question!! The above had 1 simple fix
The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
Just the Header Image should disappear
Code
General Layout
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView/> <!-- Will be a fragment later -->
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView>
<fragment/> <!-- Not a scrolling fragment layout -->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Layout.xml
<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/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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/imageView1">
<fragment
android:id="#+id/detail"
android:name="<package>.<fragment_name>"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
1
2
3
4
5
6
You need to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your NestedScrollView - this marks the class which should be positioned below the AppBarLayout (and hence, below the CollapsingToolbarLayout).
Related
I'm creating a layout using a CoordinatorLayout holding an AppBarLayout with a CollapsableToolbarLayout and a Toolbar. Below the app bar is a RecyclerView.
When scrolling in the RecyclerView, the Toolbar should collapse, similar to the CheeseSquare demo app. The difference from that demo is that 1) I want my Toolbar (including the title) always statically at the top (so I've set app:titleEnabled on my CTL), and 2) I don't want to collapse the app bar fully into only showing the single line Toolbar since I have some text views etc below the Toolbar which the app bar should never collapse beyond. I am using a custom Behavior to control these text views during collapsing, and all this works fine.
Problem is, I don't seem to grasp how to best set the anchor point at which the collapsing will end. I know that the app bar will collapse until it snaps to to the height of the Toolbar. So I would need to either put my custom views inside the toolbar, hence increasing the height of the Toolbar itself, or somehow instruct the CTL to anchor to my custom view instead. However, whenever I change the height of the Toolbar, the title text gets strangely aligned and I haven't found a good way of keeping it properly aligned with any set of reasonable attributes.
Question is, should I be playing with the height of the Toolbar at all, or is there a way of getting the CTL to stop collapsing at some other anchor point than the bottom of the Toolbar?
Or should I indeed modify the height of the Toolbar and place my own layout in it that includes the title text, and manually make sure to align it vertically with the toolbar icons etc? The best I've managed so far is to place a LinearLayout containing a TextView inside the Toolbar, with a hard-coded layout_marginTop="14dp", which might have compat issues. It seems really strange that it wouldn't be possible to increase the height of a Toolbar while still maintaining the default title text position.
Or should I not use the CTL at all but instead create my completely custom behavior also for the parts that collapses the app bar during initial RecyclerView scroll events?
I've searched for similar questions obviously, and the closest I've found is this question which does not address my problem with the title text getting messed up.
My current layout, including the ugly hard-coded manual title TextView inside the Toolbar:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="180dp"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="110dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="14dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"/ >
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:elevation="10dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_anchor="#id/toolbar"
app:layout_behavior="my behavior class">
<!-- My custom views to be shown in the app bar, animated through custom behavior -->
</LinearLayout>
<android.support.v7.widget.RecyclerView android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
I tend to further elaborate from this
Android - footer scrolls off screen when used in CoordinatorLayout
and
https://code.google.com/p/android/issues/detail?id=177195
I wish to hide TabLayout while performing scrolling on RecyclerView. That's why I have the following layout.
<CoordinatorLayout>
<CollapsingToolbarLayout>
<TabLayout>
<ViewPager>
<RecyclerView>
<Footer>
For my situation, I have a ViewPager which contains multiple fragments.
Most of the fragments, contains RecyclerView and footer. They look like the following
<LinearLayout>
<RecyclerView />
<LinearLayout id="#+id/footer" />
</LinearLayout>
Unfortunately, the footer is movable when scrolling, although I would like it to be static.
Note, it is important to have app:layout_behavior to place in ViewPager instead of RecyclerView. If not, TabLayout will not appear.
My implementation is as follow
my_fragment.xml
<?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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="?attr/portfolioTabIndicatorColor" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="org.yccheok.xxx.CustomScrollingViewBehavior"
/>
</android.support.design.widget.CoordinatorLayout>
The very key class is org.yccheok.xxx.CustomScrollingViewBehavior, which is copied and pasted from https://stackoverflow.com/a/33396965/72437
org.yccheok.xxx.CustomScrollingViewBehavior is the best solution I can find so far. However, it is far from perfect, as it yields the following behavior.
It causes flickering, when you scroll up a little, and release your finger. Please refer to the following video.
https://youtu.be/8RvCZJeQvS0
I was wondering, based on proposed solution at https://stackoverflow.com/a/33396965/72437, is there any further improvement I can done on CustomScrollingViewBehavior class, to avoid flickering effect?
I was able to achieve what I want, by following tutorial at
https://mzgreen.github.io/2015/02/15/How-to-hideshow-Toolbar-when-list-is-scroling%28part1%29/
http://mzgreen.github.io/2015/02/28/How-to-hideshow-Toolbar-when-list-is-scrolling%28part2%29/
The key ideas are
Don't use CoordinatorLayout
Place TabLayout and RecyclerView within FrameLayout, so that TabLayout will overlay on the top of RecyclerView
Add top padding on RecyclerView. Having android:clipToPadding="false" is important as well.
To hide/ show TabLayout during scrolling, attach HidingScrollListener to RecyclerView.
The shortcoming for this solution is that, requiresFadingEdge will no longer work on RecyclerView, due to the top padding.
I am trying to hide my tool bar when I scroll my text and image with content. Here I use scrollView for getting scroll content. When I scroll content up, how to hide the tool bar?
Here is my XMl code:
content_main.XML:
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:paddingTop="?android:attr/actionBarSize"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:id="#+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="23dp"
android:textStyle="bold"
android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "/>
<ImageView
android:id="#+id/imge"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/imag_bg"/>
<TextView
android:id="#+id/texttwo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="Pretty good, the Toolbar is moving along with the list and getting back just as we expect it to. This is thanks to the restrictions that we put on the mToolbarOffset variable.
If we would omit checking if it’s bigger than 0 and lower than mToolbarHeight then when
we would scroll
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing.
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
up our list, the Toolbar would move along far away off the screen, so to show it back you
would have to scroll the list down to 0. Right now it just scrolls up to mToolbarHeight
position and not more so it’s “sitting” right above the list all of the time and if we
start scrolling down, we can see it immediately showing
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug
It works pretty well, but this is not what we want. It feels weird that you can
stop it in the middle of
the
scroll and the Toolbar will stay half visible. Actually this is how it’s done in Google Play
Games app
which I consider as a bug."/>
</LinearLayout>
<View
android:layout_width="wrap_content"
android:layout_height="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="hai"
android:layout_width="160dp"
android:layout_height="match_parent" />
<Button
android:text="hello"
android:layout_width="160dp"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
activity_main.XML
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
you have to do many changes in your both layout. first use CoordinatorLayout in activity_main.XML like below(change theme as per your requirement).
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
in content_main.XML use android.support.v4.widget.NestedScrollView instead of ScrollView.
also use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world jheds sdjhs jds sjbs skjs ksjs kksjs ksj sdd dskd js sk "
android:textSize="25dp"
android:textStyle="bold" />
/// Add your other code here
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
This is the best scenario to make use of CoordinatorLayout in your app. CoordinatorLayout is a super-powered FrameLayout which has got a lot of nifty animation tricks upon its sleeves.
The Design library introduces CoordinatorLayout, a layout which
provides an additional level of control over touch events between
child views, something which many of the components in the Design
library take advantage of.
You can start with this and this tutorial.
Wrap activity_main.xml in Coordinator Layout so it will be its parent layout.
<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">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
You can find my solution about your question from here:
Android Toolbar + Tab Layout + Drawer, Hide toolbar when scrolling and take TabLayout to the top
This's a working solutio but it's not the best way to implement this animation. With CoordiantorLayout you can relate your views and it's scrolling behaviors.
You can find more info from here: https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html
When i have time i'll try to post a code example for you.
Just set flag to like app:layout_scrollFlags="scroll|enterAlways"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways"
/>
I have this layout:
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/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"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
<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.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_favorite_outline_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Setting #string/appbar_scrolling_view_behavior attribute shifts the RecyclerView by the height of the Toolbar.
But what if I need the first element of the RecyclerView to be aligned to the status bar.
I want the Toolbar to cover (be above) the first element.
In other words, I don't want any offset which #string/appbar_scrolling_view_behavior behaviour entails.
Could you please tell me how to do that?
I had the same problem and I just wrapped the AppbarLayout and the rest of my views (in your case the recyclerview) in a RelativeLayout and it works fine. I don't know if there are any downsides with that approach.
The offset is not by #string/appbar_scrolling_view_behavior behaviour it's due to AppBarLayout it pushes the content down.
I'm not sure if there is any other better solution. But I'd suggest to remove the AppBarLayout to have your content go under the Toolbar. Moreover you might be need the scrolling behaviour for that you can check the library below.
It's been used by lots of apps like Jair Music Player even WhatsApp too uses it.
Library:
Android Observable Scroll View
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
and the behavior when scrolling up should be:
the area marked in yellow disappears 1st
the area marked in blue disappears 2nd - it's only an area with color, no text
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
Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout