Как установить виджет CardView над appBarLayout?

Question

Я пытаюсь иметь виджет карты, начиная с appBarLayout и продолжая над белым фоном, который следует. Над этой картой мне нужно иметь и ImageView (в верхнем центре), и две плавающие кнопки (внизу справа). Половина этих элементов находится на карточке, другая половина - вне.

Мои проблемы: у меня нет теней под моей картой, а кнопки разрезаются пополам.

Вот что я получил до сих пор: layout_card_detailed.xml

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    xmlns:app="http://schemas.android.com/tools" 
    android:layout_margin="5dp"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 

     <android.support.v7.widget.CardView 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:id="@+id/card_view" 
      android:layout_gravity="center" 
      card_view:cardCornerRadius="1dp" 
      android:foreground="?android:attr/selectableItemBackground" 
      android:layout_marginTop="@dimen/card_detail_avatar_margin" 
      > 


      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center_vertical" 
       android:padding="@dimen/card_detail_padding" 
       android:orientation="vertical"> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_height="?attr/actionBarSize" 
        android:layout_width="match_parent" 
        app:popupTheme="@style/AppTheme.PopupOverlay" /> 

       <TextView 
        android:id="@+id/text_description" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_medium_material" 
        android:layout_marginBottom="@dimen/space_big" /> 

       <TextView 
        android:id="@+id/text_owner" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_small_material" 
        android:layout_marginBottom="@dimen/space_small" /> 

       <TextView 
        android:id="@+id/text_date" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_small_material" 
        /> 

       <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/space_big" /> 

      </LinearLayout> 
     </android.support.v7.widget.CardView> 


    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 
     <ImageView 
      android:id="@+id/image_avatar" 
      android:layout_width="@dimen/avatar_size_detail" 
      android:layout_height="@dimen/avatar_size_detail" 
      android:src="@drawable/contact" 
      android:layout_centerHorizontal="true" /> 
    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_marginBottom="-28dp" 
     android:gravity="bottom|right"> 

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginRight="@dimen/fab_margin"> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab_match" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@android:drawable/ic_dialog_email" 
       android:layout_marginRight="@dimen/fab_margin" 
       /> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab_reply" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@android:drawable/ic_dialog_email" /> 
     </LinearLayout> 
    </RelativeLayout> 

</FrameLayout> 

activity_card_detail.xml

<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.myapp.CardDetailActivity" tools:ignore="MergeRootFrame"> 

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      app:toolbarId="@+id/toolbar"> 

      <android.support.v7.widget.Toolbar android:id="@+id/detail_toolbar" 
       android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

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



    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_margin="@dimen/layout_margin"> 
     <include layout="@layout/layout_card_detailed"/> 
    </RelativeLayout> 

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

Answer 1

Наконец понял это, я должен был использовать CoordinatorLayout вместо FrameLayout. Теперь все работает хорошо, добавьте тот факт, что мои тени FAB резко обрезаются, следуя квадратной форме исходного вида андроида. Если кто-нибудь, как идея, мне интересно :-).

layout_card_detailed.xml

<?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:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_margin="@dimen/layout_margin"> 

     <android.support.v7.widget.CardView 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:id="@+id/card_view" 
      card_view:cardCornerRadius="1dp" 
      android:foreground="?android:attr/selectableItemBackground" 
      android:layout_marginTop="@dimen/card_detail_avatar_margin"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_gravity="center" 
       > 
       <ProgressBar 
        android:id="@+id/progress" 
        android:visibility="visible" 
        style="?android:attr/progressBarStyleSmall" 
        android:layout_width="@dimen/card_progress_size" 
        android:layout_height="@dimen/card_progress_size" 
        android:layout_centerInParent="true" 
        /> 
      </RelativeLayout> 
      <LinearLayout 
       android:id="@+id/content_loading" 
       android:visibility="invisible" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:gravity="center_vertical" 
       android:padding="@dimen/card_detail_padding" 
       android:orientation="vertical"> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_height="?attr/actionBarSize" 
        android:layout_width="match_parent" 
        app:popupTheme="@style/AppTheme.PopupOverlay" /> 

       <TextView 
        android:id="@+id/text_description" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_medium_material" 
        android:layout_marginBottom="@dimen/space_big" /> 

       <TextView 
        android:id="@+id/text_owner" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_small_material" 
        android:layout_marginBottom="@dimen/space_small" /> 

       <TextView 
        android:id="@+id/text_networks" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:textSize="@dimen/abc_text_size_small_material" 
        /> 

       <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/space_big" /> 

      </LinearLayout> 
     </android.support.v7.widget.CardView> 

    </RelativeLayout> 

    <LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_anchor="@id/card_view" 
     app:layout_anchorGravity="right|end|bottom" 
     android:layout_marginRight="@dimen/fab_margin"> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_match" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@android:drawable/ic_menu_share" 
      android:layout_marginRight="@dimen/fab_margin" 
      /> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_reply" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@android:drawable/ic_dialog_email" 
      /> 
    </LinearLayout> 

    <LinearLayout 
     android:orientation="horizontal" 
     android:layout_width="wrap_content" 
     android:layout_height="100dp" 
     app:layout_anchor="@id/card_view" 
     app:layout_anchorGravity="right|end|bottom" 
     android:layout_marginRight="@dimen/fab_margin"> 


    </LinearLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/layout_margin" 
     > 
     <ImageView 
      android:id="@+id/image_avatar" 
      android:layout_width="@dimen/avatar_size_detail" 
      android:layout_height="@dimen/avatar_size_detail" 
      android:src="@drawable/contact" 
      android:layout_centerHorizontal="true" /> 
    </RelativeLayout> 
</android.support.design.widget.CoordinatorLayout>