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

【问题标题】：How to add a border in floating action button如何在浮动操作按钮中添加边框
【发布时间】：2018-12-19 23:30:18
【问题描述】：

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

我刚刚创建了一个普通的 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"
        />

【问题讨论】：

也许这个问题可以帮到你：stackoverflow.com/questions/33005929/…

标签： android android-studio border floating-action-button

【解决方案1】：

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

首先在您的 drawable 目录中的新 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 包装在布局中，并将自定义可绘制文件设置为布局的背景。在这里你需要给这个包装布局一个 padding 与你的边框大小相同：

您的主要布局

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

【讨论】：

【解决方案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"/>

【讨论】：