Using custom behaviour to create multiple "anchor points"/positions for CollapsingToolbar

Question

I am trying to have a collapsing toolbar that is similar to the Google Maps app in the search landing page. That is, there are three "anchor points" or positions. In place of the map, I will have a picture.

• Toolbar collapsed (content is fullscreen)

• Middle position

• Toolbar extended with only some content showing (persistent bottom sheet)

Preferably, the app should snap between these positions.

As of now I have the layout basically working.

Two main issues are:

• Flinging inside the NestedScrollView does not work correctly. It halts/chops, even though it's using app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior". I believe this is a bug with AppBarLayout
• The anchor points described above are not implemented.

This is my layout:

Note that app:layout_behavior="@string/appbar_anchor_behavior"> is just an unmodified subclass of AppBarLayout.Behavior

<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:background="@color/actions_bar_dark"                                                   android:fitsSystemWindows="true">   <android.support.design.widget.AppBarLayout         android:id="@+id/appbar"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"         android:fitsSystemWindows="true"         app:layout_behavior="@string/appbar_anchor_behavior">      <android.support.design.widget.CollapsingToolbarLayout             android:id="@+id/collapsing_toolbar"             android:layout_width="match_parent"             android:layout_height="match_parent"             app:layout_scrollFlags="scroll"             android:fitsSystemWindows="true">          <ImageView                 android:id="@+id/item_preview_thumb"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:scaleType="centerCrop"                 android:layout_centerInParent="true"                 app:layout_collapseMode="parallax"                 />          <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"                 app:layout_collapseMode="pin" />      </android.support.design.widget.CollapsingToolbarLayout>  </android.support.design.widget.AppBarLayout>  <android.support.v4.widget.NestedScrollView         android:id="@+id/contentRecyclerView"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_behavior="@string/appbar_scrolling_view_behavior">       <include layout="@layout/item_detail_content"/>   </android.support.v4.widget.NestedScrollView>  <android.support.design.widget.FloatingActionButton         android:layout_height="wrap_content"         android:layout_width="wrap_content"         app:layout_anchor="@id/appbar"         app:layout_anchorGravity="bottom|right|end"         android:src="@drawable/ic_download"         android:layout_margin="16dp"         android:clickable="true"/> 

How can I achieve this using a custom behaviour?

Answer 1

Based on what you want to achieve, you might want to try the SlidingUpPanelLayout (which can be found at Github). It has everything you seem to need:

• Anchor: in order to achieve the anchors you decribe you'll have to either set the umanoAnchorPoint attribute (which is percentage based), or - if you need more complex anchor calculation, e.g. depending on the ImageView height - use the setAnchorPoint method.
• Persistant: unlike the BottomSheets mentioned above, this layout is actually meant to be persistent. The height of the panel when collapsed can be customized with the umanoPanelHeight attribute or with the setPanelHeight method.
• Parallax: not exactly sure whether the implementation fits your needs and if you require it, but it does have basic parallax support.

You can find more info in the Readme on Github which is linked above.

Answer 2

What you've mentioned in the question is not actually a CollapsingToolbar but a stretchable BottomSheet. Unfortunately there is nothing offered by the android sdk yet for us to use (although Google use them in its own apps already).

BottomSheet is an Android component which presents a dismissible view from the bottom of the screen. BottomSheet can be a useful replacement for dialogs and menus but can hold any view so the use cases are endless. This repository includes the BottomSheet component itself but also includes a set of common view components presented in a bottom sheet. These are located in the commons module.

On the other hands, some nice guyz have been kind enough to develop close enough libraries and share them on GitHub for us to use. They are close to the BottomSheet component that Google uses.

The closest match to what you want is this one - Flipbard/BottomSheet - Check the images under "Common Components" section on this page. ( One plus point of this is that has been used in production at Flipboard for a while now so it is thoroughly tested.)

This is another minimal BottomSheet library - soarcn/BottomSheet, but it allows just clickable icons. You could probably get the source and customize it to suit your needs. But, the first one from Flipboard is a much closer match because it can hold any type of view and is more customizable.

Follow each of the above two GitHub links to see the samples, setup instructions and source code.