How to design floating action button with label on it?

Question

I am trying to design floating action button with number label on it. But when text is being displayed on the label it is hiding behind the cart FloatingActionButton.

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:orientation="horizontal">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/add_to_cart_floating_action_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/fab_margin"
                android:elevation="5dp"
                android:src="@drawable/cart2"
                app:backgroundTint="@color/colorPrimaryDark"
                app:borderWidth="0dp"
                app:fabSize="normal" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="-50dp"
                android:layout_marginTop="15dp"
                android:layout_toEndOf="@id/add_to_cart_floating_action_button"
                android:background="@drawable/floating_action_button_label"
                android:paddingBottom="5dp"
                android:paddingEnd="5dp"
                android:paddingStart="20dp"
                android:paddingTop="5dp"
                android:text="@string/one"
                android:textColor="@color/TextcolorforBlack"
                android:textStyle="bold" />

        </RelativeLayout>

floating_action_button_label.xml

    <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/TextcolorforWhite" />
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
</shape>

Can you explain what you mean by "it is hiding behind the cart FloatingActionButton"? — Jake Lee, May 14 '18 at 16:16
@JakeSteam If there is any text on the label it is displaying behind the floating action button — john, May 14 '18 at 16:18

Huzaifa Iftikhar · Accepted Answer · 2018-05-14T17:30:13.677

1

I used this layout. Just added android:elevation="7dp" and few padding changes which you can adjust as per your choice.

<RelativeLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/add_to_cart_floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:elevation="5dp"
            android:src="@drawable/cart2"
            app:backgroundTint="#800"
            app:borderWidth="0dp"
            app:fabSize="normal" />

        <TextView
            android:layout_width="35dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="-45dp"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/add_to_cart_floating_action_button"
            android:background="@drawable/floating_action_button_label"
            android:paddingBottom="2dp"
            android:paddingEnd="6dp"
            android:paddingStart="12dp"
            android:paddingTop="2dp"
            android:elevation="7dp"
            android:text="1"
            android:textColor="#800"
            android:textStyle="bold" />

    </RelativeLayout>

I used this floating_action_button_label.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFF" />
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" />
    <stroke android:width="1sp"
        android:color="#800"/>
</shape>

This is the result I got.

edited May 14 '18 at 17:30

answered May 14 '18 at 16:22

Huzaifa Iftikhar

755
1
6
9

still same. no change compared to revious – john May 14 '18 at 16:39
You must be using this TextView in your java code right? – Huzaifa Iftikhar May 14 '18 at 16:41
No. I just wrote some text on `text` attribute and it is showing behind the floatingaction button – john May 14 '18 at 16:43
But isn't this text dynamic? I assume it is something like a badge? Okay let me check it out in detail! – Huzaifa Iftikhar May 14 '18 at 16:44
Yes, it is. I am testing it in XML how it will be visible and another thing it is not appearing as badge – john May 14 '18 at 16:46
I fixed it :) Posting the answer – Huzaifa Iftikhar May 14 '18 at 17:22
If I move `FloatingActionButton` does badge move along with it too? – john May 14 '18 at 17:26
Yes it will move along – Huzaifa Iftikhar May 14 '18 at 17:31
I tried moving but only floating action button is moving `TextView` isn't. – john May 14 '18 at 17:36
How did you move the FAB? – Huzaifa Iftikhar May 14 '18 at 17:38
I followed this link [https://stackoverflow.com/questions/46370836/android-movable-draggable-floating-action-button-fab] – john May 14 '18 at 17:40
This seems complex and you need to handle the TextView along with it in the Java code. It is not related to the XML. – Huzaifa Iftikhar May 14 '18 at 17:45
Welcome John :) – Huzaifa Iftikhar May 14 '18 at 17:47

score 0 · Answer 2 · answered May 14 '18 at 16:54

Try having a textview with elevation attribute :

<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>

this floating button is Movable when I try to move `floatingbutton ` this badge not moving — john, May 14 '18 at 17:19

How to design floating action button with label on it?

2 Answers2