如何在 Android 中的 FloatingActionButton 上方添加 TextView

Question

我想在 FloatingActionButton 上面添加一个 TextView，我使用 FrameLayout 作为 TextView 和 FloatingActionButton 的父布局，这是我的示例代码：

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

但是没用，TextView在FloatingActionButton下面，像这样

我希望它像这样显示：

我很穷，谁能帮帮我？

Answer 1

这是一个 z 顺序问题。在您的 FrameLayout 中，将 <TextView 移动到 <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>

应该做

Answer 2

这是您的解决方案：

<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

你只需要给textview添加一个elevation属性

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

Answer 4

相应地为两个视图设置海拔。此外，将 TextView XML 代码移动到 FAB XML 代码之上更有意义。

Answer 5

要支持低端设备，请同时使用 android:elevation 和 app:elevation

将 Fab 的两个值都设置为 0

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

如何在 Android 中的 FloatingActionButton 上方添加 TextView

How to add a TextView above a FloatingActionButton in Android

android

floating-action-button