如何在android上更改Floating Action Button(FAB)的形状?

时间:2018-03-13 16:08:45

标签: android android-layout shape floating-action-button

在我们的Android应用程序中,我们需要创建一个浮动动作按钮,它不是默认的圆形,而是一个带有三个圆角的正方形。晶圆厂如下图所示:

enter image description here

我设法制作了这样一个表格,但不知道如何将它应用到我的工厂,或者甚至可能。形状的xml文件如下所示:

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
    <solid android:color="@color/red" />
    <corners
      android:topLeftRadius="90dp"
      android:topRightRadius="90dp"
      android:bottomRightRadius="90dp"/>
   </shape>

我尝试用

更改表单
android:src="@drawable/my_shape"

但这只会改变我按钮内的图标。 我想我需要扩展FloatingActionButton,但我不知道如何。

有没有办法改变晶圆厂的形状?如果有人已经实现了这一点,我将很高兴看到一个样本。

5 个答案:

答案 0 :(得分:14)

支持库提供的FloatingActionButton无法扩展,因为需要替换的方法被设置为private。 Material Components(支持库的官方AndroidX替代品)在Shape Themingroadmap上有大约10月至12月的发布,这使您可以正式,轻松地完成此操作(而不必扩展视图)。

但是它尚不可用,因此与此同时,我由robertlevonyan派生了customFloatingActionButton,并进行了一些细微修改,使您可以使用自己的自定义形状。源代码可用here

要使用Gradle将其添加到您的项目中,您需要使用jitpack。您可以这样添加它:

allprojects {
   repositories {
       ...
       maven { url 'https://jitpack.io' }
   }
}

然后实施我的叉子:

implementation 'com.github.JediBurrell:customFloatingActionButton:-SNAPSHOT'

接下来,我们将创建形状,您创建的形状应该可以正常工作。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners
        android:topLeftRadius="@dimen/fab_circle_radius"
        android:topRightRadius="@dimen/fab_circle_radius"
        android:bottomRightRadius="@dimen/fab_circle_radius" />
    <solid android:color="@color/colorAccent" />
</shape>

然后最后将其添加到您的布局中(更多的FAB选项在Github存储库中列出):

<com.jediburrell.customfab.FloatingActionButton
    android:id="@+id/floating_action_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fabType="custom"
    app:fabShape="@drawable/fab_teardrop"
    app:fabIcon="@drawable/ic_add_24dp"
    app:fabColor="@color/red" />

这是它的外观:

答案 1 :(得分:3)

使用材料成分库,您可以使用 shapeAppearanceOverlay

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:shapeAppearanceOverlay="@style/fab_3_rounded"
    .../>

具有:

<style name="fab_3_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

enter image description here

答案 2 :(得分:1)

无需更新任何外部库即可更新您的 Gradle 文件

implementation 'com.google.android.material:material:1.1.0'

implementation 'com.google.android.material:material:1.3.0'

这将使您可以访问

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

然后你可以像普通按钮一样改变它的属性

答案 3 :(得分:0)

在您的问题中,您说您尝试调整android:src,这显然是错误的做法,因为那是关于FloatingActionButton的内容。

android:background参数会改变您的形状。请注意it is supposed to be round

我认为这个问题不仅仅是duplicate,因为other question只是对颜色有所了解。

您需要在XML文件中使用它:

android:background="@drawable/my_shape"

答案 4 :(得分:0)

您正在寻找的是改变按钮的背景

android:background="@drawable/my_shape"