Background
The support / design library allows you to have a good resizing effect as you use it using AppBarLayout and CollapsingToolbarLayout:
http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B0NGgBg38lWWcFhaV1hiSlB4aFU/patterns-scrollingtech-scrolling-070801_Flexible_Space_xhdpi_003.webm
Problem
All the examples I saw are a toolbar that was pinned while scrolling.
What I'm trying to achieve is that the user view will be fixed in the size of the toolbar, and the content above it (some other views) will decrease when scrolling.
Something like that:
Thing, no matter what I try, something doesn't work that way. Sometimes the contents of a toolbar replacement are truncated, sometimes it is not fixed, etc.
What i tried
Since, for some reason, the toolbar is the only thing that seems to work well with the app:layout_collapseMode="pin" attribute app:layout_collapseMode="pin" , I tried to either put views in it or put views in it.
Here is the current XML schema of what I 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>
Unfortunately, even though the layout editor shows that it looks fine, I actually see this truncated text for the toolbar replacement view:
I also tried using layout_anchor , as shown by the example of how to use it ( here ), but even then the view that should replace the toolbar seems to overlap the content that should be below it, and the one above it, and even the representation that above it has some space below it, which should not be:
And here is the XML layout of this attempt:
<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>
Questions
How can I put custom views so that the contents of the toolbar remain between the lower and upper areas, and do not overlap with any of them, and so that the area above the toolbar decreases when scrolling?