Floating action button behaves randomly

Question

I'm trying to use a floating as indicator for selection of card views.

I want the FAB to be positioned on the top right of the card with a little bit of overlap. I tried achieving the same look with a drawable, but since the app is targeted for API 16+ I can't use elevation to get it drawn above the card.

Using this xml:-

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">


    <android.support.v7.widget.CardView
        android:id="@+id/suppTemplateCardViewList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="10dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

        <ImageButton
            android:id="@+id/suppFunction"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null" />

        <TextView
            android:id="@+id/suppFunctionName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/selectorIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="mini"
        app:layout_anchor="@id/suppTemplateCardViewList"
        app:backgroundTint="@color/blueish"
        android:src="@drawable/ic_done"
        app:layout_anchorGravity="top|end"/>

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

I got this behavior:

I've also tried using the

app:layout_anchorGravity

tag,but to no avail. Thanks.

Answer 1

I actually found out myself in the end. Apparently, the order within the xml is important, so setting the FAB above the card view made it work.