如何在 Android 中的浮动操作按钮中添加边框

Question

我正在尝试构建如下图所示的内容：

这是我的 xml 代码：

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/vector_nav_qr_scanner"
        app:backgroundTint="@android:color/white"
        app:layout_anchor="@id/bottom_app_bar" />

我搜索了很多但无法弄清楚如何添加带有白色圆圈边框的浅蓝色背景以及中心的图标。有人可以帮忙吗？

Answer 1

添加

app.strokeColor = "#000033"
app.strokeWidth = "3dp"

在您的浮动操作按钮中 xml..

例如：

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_scan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/vector_nav_qr_scanner"
        app:backgroundTint="@android:color/white"
        app:layout_anchor="@id/bottom_app_bar"
        app:strokeColor = "#000033"
        app:strokeWidth = "3dp" />

编辑：app:strokewidth 和 app:strokeColor 正在为 ExtendedFloatingActionButton 工作。对不起，那是我的错。您可以使用

app:borderWidth="4dp" in stead of app:strokeWidth = "3dp". remove strokeColor. there showes little border.

希望对您有所帮助。如果它不起作用，请告诉我。

或在可绘制文件夹中定义自定义形状

fab_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >

    <solid android:color="@android:color/transparent" />

    <!-- here set the width and color of your border -->
    <stroke
        android:width="5dp"
        android:color="@android:color/darker_gray" />
</shape>

然后用布局包装您的 FloatingActionButton。在布局背景中使用 fab_bg.xml 文件。例如：

<LinearLayout
        android:id="@+id/fabWrapperId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/fab_bg"
        android:padding="5dp">

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_scan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:src="@drawable/vector_nav_qr_scanner"
            app:backgroundTint="@android:color/white"
            app:layout_anchor="@id/bottom_app_bar"
            app:fabSize="normal" />
    </LinearLayout>

注意：确保 fab_bg 的笔划宽度和布局填充保持相同。

Answer 2

试试这个：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#B1E4F6"               //inner background color
    android:src="@drawable/scan"
    app:backgroundTint="@color/white"              //outer background color (border color)
    app:borderWidth="8dp"
    app:maxImageSize="16dp"                        //inner icon size
    app:tint="@android:color/holo_blue_dark" />    //inner icon color

结果：

如何在 Android 中的浮动操作按钮中添加边框

How to add border in Floating action button in Android

android

material-design

floating-action-button