Background
The support/design library allows to have a nice resize-as-you-scroll effect, using AppBarLayout and CollapsingToolbarLayout :
The problem
All examples I've seen are of Toolbar being the one pinned as you scroll.
What I'm trying to achieve is that a custom view will be pinned, in a size of a toolbar, while the content above it (some other views) will shrink as you scroll.
Something like that:
Thing is, no matter what I try, something doesn't work this way. Sometimes the content of the toolbar-replacement gets truncated, sometimes it doesn't get pinned, etc...
What I've tried
Since for some reason the Toolbar is the only thing that seems to work well with the app:layout_collapseMode="pin" attribute, I tried to either put views in it, or put views with it.
Here's the current XML layout of what I've tried:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:background="#fff"
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"
android:padding="0px"
app:contentScrim="#eeeeee"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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"
app:title="">
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_marginBottom="0px"
android:background="#33ff0000"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#33ffff00"
android:gravity="center"
android:text="someText"
android:textColor="#000"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_scrolling"/>
</android.support.design.widget.CoordinatorLayout>
Sadly, even though the layout editor shows that it looks ok, what I actually see is this truncated text for the toolbar-replacement view:
I also tried using layout_anchor, as shown on a sample of how to use it (here), but even then, the view that is supposed to replace the toolbar seems to overlap the content that's supposed to be below it and the one above it, and even the view that's above it have some space below it that isn't supposed to be there:
And here's the XML layout of this try:
<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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3300ff00"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<FrameLayout
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:orientation="vertical"
android:paddingBottom="?attr/actionBarSize"
app:layout_collapseMode="none">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="need to be right above 'someText'"
android:textColor="#ff000000"/>
</FrameLayout>
</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"
android:scrollbars="none"
app:behavior_overlapTop="0dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lorem"/>
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#33ff0000"
app:layout_anchor="@id/title"
app:layout_anchorGravity="bottom"
app:theme="@style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="someText"
android:textColor="@android:color/white"
android:textSize="20sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
The questions
How can I put custom views so that the toolbar content will stay between the bottom and upper areas, not overlapping any of them, and have the area above the toolbar to shrink as you scroll ?
