Как сделать FloatingActionButton «сломать край»

Question

«Разрыв края» Я имею в виду Google design guidelines. FAB «ломает край», когда он расположен между двумя соседними элементами.

Я хочу, чтобы мой FAB располагался между моей панелью инструментов и моим контентом. Но сейчас она полностью появляется на верхней части представления контента:

Мой FAB закреплен на панели инструментов. Вот код:

<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.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     app:layout_anchor="@id/toolbar" 
     app:layout_anchorGravity="bottom|right|end" 
     android:src="@android:drawable/ic_dialog_email" /> 

В примерах, которые я видел here это, как его предполагается сделать. Вы привязываете FAB к панели инструментов, а затем устанавливаете силу привязки на bottom|right|end

Что я делаю неправильно?

Answer 1

Вы должны якорь FAB к AppBarLayout вместо Toolbar. Однако почему-то привязка работает только в том случае, если высота AppBarLayout более чем в два раза превышает высоту . Окончательный код будет таким.

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="168dp" 
    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" /> 

</android.support.design.widget.AppBarLayout> 


<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_margin="16dp" 
    android:src="@android:drawable/ic_dialog_email" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|right|end" /> 

Answer 2

Вам нужен CoordinatorLayout так:

<?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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:card="http://schemas.android.com/tools" 
    android:id="@+id/rootLayout" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="380dp" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsingToolbarLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleMarginEnd="64dp" 
      android:fitsSystemWindows="true"> 

      <android.support.v7.widget.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> 

    <!-- ListView or NestedScrollView or RecyclerView etc.. --> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:clickable="true" 
     app:layout_anchor="@+id/appbar" 
     app:elevation="6dp" 
     app:borderWidth="0dp" 
     app:layout_anchorGravity="bottom|right|end" /> 

</android.support.design.widget.CoordinatorLayout>