Floating action button always displays on top

Question

I am trying to show textview on the top of Floating Action Button. Inside FrameLayout, I have 1 FAB and 1 TextView:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:padding="@dimen/fab_margin">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAddSeller"
        android:layout_width="70dp"
        android:layout_height="70dp"
        app:backgroundTint="#3780f4"
        android:stateListAnimator="@null"/>

    <TextView
        android:id="@+id/tvSellRecordCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/sell_record_counter"
        android:layout_gravity="top|end"
        android:text="12"
        android:textColor="#FFFFFF"
        android:textSize="10sp" />

</FrameLayout>

According to this answer, I have added

android:stateListAnimator="@null"

to FAB - no difference. I have put TextView after FAB - no effect.

How to show another view on top of FloatingActionButton?

Answer 1

In Android Studio, I could fix after adding an elevation to the text view:

android:elevation="6dp"

It seems that FAB has 5dp of elevation.

However, I'm not sure if this totally works to you since elevation is available for API>=21.

Try to make some tests in real devices...

Maybe, android:stateListAnimator="@null" is enough in real devices/emulator.

UPDATE

After adding app:elevation, this fix started to work with older APIs as well

app:elevation="6dp"
android:elevation="6dp"

Answer 2

Replace FrameLayout with RelativeLayout and add

 <android.support.design.widget.FloatingActionButton
        ...
        android:layout_below="@+id/tvSellRecordCount"
        ...
        />