Question

我有一个带有全白色背景色的浮动按钮和一个图像源。我想用灰色边框包围它。我找不到任何办法。请帮忙。

我刚刚创建了一个普通的FAB。

这是我按钮的XML代码。

      <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:src="@drawable/addvideo"
        app:backgroundTint="#fff"
        app:layout_anchor="@+id/bottomAppBar"
        android:scaleType="center"
        android:id="@+id/myFab"
        />

Answer 1

作为解决方法，您可以执行以下步骤：

首先在可绘制目录中的新 xml 文件中定义自定义形状：

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

然后将FAB包装在布局中，并将自定义可绘制文件设置为布局的背景。在这里，您需要为包装器布局提供填充，其尺寸与边框相同：

您的主要布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- the wrapper layout having a padding with the size of your border -->
    <!-- and background set to the custom drawable file -->
    <LinearLayout
        android:id="@+id/fabWrapper"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:background="@drawable/fab_background"
        android:padding="5dp"
        >

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="center"
            app:fabSize="normal"
            android:src="@drawable/addvideo"
            android:backgroundTint="@android:color/white"
            />
    </LinearLayout>

Answer 2

一些旧的但对初学者有用的东西，你可以使用

去除边框颜色可以使用：

app:borderWidth="0dp"

改变边框颜色：

app:borderWidth="2dp"
app:backgroundTint="#F44336"

示例：

<com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:borderWidth="2dp"
                app:backgroundTint="#F44336"
                android:src="@drawable/ic_select_image_white"
                android:backgroundTint="@color/purple_500"/>

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

2 个答案: