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?

check this http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts — Sreehari, Feb 25 '16 at 11:16
Use a RelativeLayout !! try to set TextView Property **android:layout_above="@id/fabAddSeller"** — Viveka Patel, Feb 25 '16 at 11:21
@GuilhermeP, yeah I set elevation to my TextView, and now it is on top. By the way minSdk = 14 — Joe Rakhimov, Feb 25 '16 at 11:24
@GuilhermeP, can you post this as answer and I will accept it - other people who will face this issue will know how to solve it — Joe Rakhimov, Feb 25 '16 at 11:25
@JoeRichard I'll... However, I'm affraid this solution may not work for pre- Lollipop devices.. I think elevation works only for API > 21... Also, which elavation did you use? For me, it works only with elevation=6dp — guipivoto, Feb 25 '16 at 11:26

guipivoto · Accepted Answer · 2016-02-25T11:46:59.523

14

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"

edited Feb 25 '16 at 11:46

answered Feb 25 '16 at 11:32

guipivoto

18,327
9
60
75

in this case, if i long press fab, it rises under my round view – Evgeniy Pavlov Mar 09 '19 at 15:59
need to set elevation 12dp+ for this case – Evgeniy Pavlov Mar 09 '19 at 16:03

score 1 · Answer 2 · answered Mar 09 '16 at 20:37

1

Replace FrameLayout with RelativeLayout and add

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

answered Mar 09 '16 at 20:37

Yuliia Ashomok

8,336
2
60
69

Floating action button always displays on top

2 Answers2