Task: make a search field (use CardView for the background), located right below the toolbar and half-protruding from AppBarLayout. Example below:

enter image description here

The first method I found. Here I made the markup using the CardView negative margin:

... <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" 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" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="56dp" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" android:layout_marginBottom="-28dp" app:layout_scrollFlags="scroll|enterAlways" /> </android.support.design.widget.AppBarLayout> ...

The second way. Using app: layout_anchor, I set the CardView anchor to the bottom AppbarLayout and increase its elevation.

 <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="com.example.helloworld.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" 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" app:layout_scrollFlags="scroll|enterAlways" android:layout_marginBottom="28dp"/> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="56dp" android:layout_marginLeft="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom" app:cardElevation="5dp" /> </android.support.design.widget.CoordinatorLayout>

However, in both cases, there is a problem when scrolling RecyclerView and hiding the contents of AppBarLayout. The screen remains part of CardView, which is beyond the limits of AppBarLayout (RecyclerView in the picture below is disabled):

enter image description here

Questions:

  1. Which of these methods is better? Is there any better? What kind?
  2. How to solve the problem when scrolling and hide all the elements? Wrap the AppBarLayout into another layout and hide it already? Or add ScroolListener and hide CardView manually?
  3. The second method is identical to the ScrollingActivity template in Android Studio. Only instead of my CardView there is a FloatingActionButton, which disappears when scrolling (but not immediately). How is this feature implemented and how to fasten it to CardView?
  • To put it mildly, this does not correspond to the principles of material design, and even there are echoes of such use in Anti-patterns, but I personally like your business. Simply, the problem is obvious and predictable if you play with -margin. Imagine that this element is like FAB, while scroll, wrap the animation on it -scale + invisible and back, approximately like that of the FAb, this is what I immediately thought of, I think there are a lot of solutions, and only your imagination limits. - Shwarz Andrei

1 answer 1

I did this:

  1. AppBarLayout is transparent.
  2. Below it is an ImageView with a height slightly higher than AppBar
  3. On AppBarLayout, an onOffsetChangeListener listener is hung, skipping ImageView from p.2

If the hunt to dig into the code, here: tyk

enter image description here