如何自定义浮动操作按钮形状？

Question

我正在尝试创建具有自定义形状的自定义 FAB。我已经尝试将 android: background 与 shapeAppearanceOverlay 和 shapeAppearance 属性一起设置，但仍然没有成功。

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/edit_score_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:shapeAppearance="@drawable/edit_score_fab"
            app:shapeAppearanceOverlay="@drawable/edit_score_fab"
            android:background="@drawable/edit_score_fab"/>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <size
        android:height="5dp"
        android:width="10dp"/>
    <corners android:bottomLeftRadius="4dp" />
    <solid android:color="@color/color_primary"/>
</shape>

我的结果

我想要的

Answer 1

您可以使用具有自定义形状外观的 ExtendedFloatingActionButton。
类似于：

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

与：

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">50%</item>
  </style>

Answer 2

如果您想要一个可扩展的完全可定制的 FAB：

首先下载我的库 Viper Pack 并将其安装到您的项目中。

其次，转到您的 activity onCreate 循环并使用 Lava Lava.app.addLavaFab(...) 方法添加它 class :

简单的熔岩工厂：

Lava.app.addLavaFab(Context c, int imgres, String text, View.OnClickListener lis) 让您可以在您的应用程序中添加一个简单的图像和文本 lava fab，imgres 是来自资源的 fab 图像，text 是 fab 文本。

Lava.app.addLavaFab(Context c, int imgres, String text, String gravity, View.OnClickListener lis) 允许您在您的应用程序中添加一个简单的图像和文本熔岩工厂，重力是工厂位置，可以是 Lava.FabPosition.LEFT 或 Lava.FabPosition.RIGHT 或 Lava.FabPosition.CENTER , imgres 是来自资源的 fab 图片，text 是 fab 文本。

Lava.app.addLavaFab(Context c, Drawable d, String text, View.OnClickListener lis) 让您可以在您的应用中添加简单的图像和文本 lava fab，d 是作为可绘制对象的 fab 图像，text 是 fab 文本。

Lava.app.addLavaFab(Context c, Drawable d, String text, String gravity, View.OnClickListener lis) 允许您在您的应用程序中添加一个简单的图像和文本熔岩工厂，重力是工厂位置，它可以是 Lava.FabPosition.LEFT 或 Lava.FabPosition.RIGHT 或 Lava.FabPosition.CENTER, d 是可绘制的 fab 图像，text 是 fab 文本。

您可以使用 Lava.app.fabtext 和 Lava.app.fabimage.

获得简单的 lava fab textview 和 imageview

自定义熔岩工厂：

Lava.app.addLavaFab(Context c, View fixedview, View hiddenview, View.OnClickListener lis) 允许您在您的应用程序中添加自定义熔岩 fab，fixedview 是 fab 中始终出现的视图，它可以是图像、lottie 动画，任何东西； hiddenview 是仅在用户按下 fab 时出现的隐藏视图，它可以是文本或任何其他内容。

Lava.app.addLavaFab(Context c, View fixedview, View hiddenview, String gravity, View.OnClickListener lis) 允许您在您的应用程序中添加自定义熔岩 fab，fixedview 是 fab 中始终出现的视图，它可以是图像，lottie 动画，任何东西； hiddenview 是隐藏视图，只有当用户按下 fab 时才会出现，它可以是文本或其他任何东西，gravity 是 fab 位置，它可以是 Lava.FabPosition.LEFT 或 Lava.FabPosition.RIGHT 或 Lava.FabPosition.CENTER .

您可以通过 Lava.app.fab.

将 lava fab 本身作为 LinearLayout

非常容易添加，试试看并分享给其他人:)

如何自定义浮动操作按钮形状？

How do I customize a Floating Action Button shape?

android

android-button

floating-action-button

material-components

material-components-android

简单的熔岩工厂：

自定义熔岩工厂：