How to add a TextView above a FloatingActionButton

Question

I want to add a TextView above a FloatingActionButton, I use the FrameLayout as the parent layout of the TextView and FloatingActionButton, here is my sample code:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.widget.FloatingActionButton
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="#00fff0"
        app:borderWidth="0dp"
        android:elevation="0dp"
        app:fabSize="normal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:text="above"/>

</FrameLayout>

but it's useless, the TextView is below the FloatingActionButton, like this

and I want it show like this:

I am poor for this, can anyone help me?

Answer 1

it a z-order problem. In your FrameLayout move the <TextView above the <FloatingActionButton

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="above"/>

  <android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#00fff0"
    app:borderWidth="0dp"
    android:elevation="0dp"
    app:fabSize="normal" />
</FrameLayout>

should do it

Answer 2

Here is your solution :

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

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


<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#00fff0"
    app:borderWidth="0dp"
    android:elevation="0dp"
    app:fabSize="normal" />

<TextView
    android:layout_toRightOf="@+id/fab"
    android:layout_marginLeft="-10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="above"/>
</RelativeLayout>

</FrameLayout>

Answer 3

To support low end device use both android:elevation and app:elevation

set both values to 0 for Fab

 <FrameLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content">

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#00fff0"
    app:borderWidth="0dp"
    android:elevation="0dp"
    app:elevation="0dp"
    app:fabSize="normal" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#000000"
    android:text="above"/>

    </FrameLayout>

Answer 4

Set elevations for both views accordingly. Also, it makes more sense for you to move your TextView XML code above your FAB XML code.

Answer 5

you just need to elevation attribute to the textview

 <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.widget.FloatingActionButton
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="#00fff0"
        app:borderWidth="0dp"
        android:elevation="0dp"
        app:fabSize="normal" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:text="above"
        android:elevation="7dp"/>

</FrameLayout>