如何在浮动操作按钮中添加边框
如何在浮动操作按钮中添加边框
提问于 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"
/> Stack Overflow用户
回答已采纳
发布于 2018-12-20 07:55:47
作为解决办法，您可以执行以下步骤：
- 首先，在新的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53860591
复制相关文章
相似问题
腾讯云开发者
