如何設計帶有標簽的浮動按鈕？

Question

點擊這里查看圖片

我正在嘗試設計帶有數字標簽的浮動操作按鈕。 但是，當標簽上顯示文本時，該文本將隱藏在購物車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>

Answer 1

我使用了這種布局。 剛剛添加了android:elevation="7dp"和一些填充更改，您可以根據自己的選擇進行調整。

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

我使用了這個float_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>

這是我得到的結果。

Answer 2

嘗試使用帶有height屬性的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>