Android: 如何创建带有更大图标的更大浮动操作按钮

Question

我想创建一个更大的浮动操作按钮（FAB），比通常的56 dp更大，并在其中放置一个更大的图标。 （对于我的目的，图标永远不会是自解释的，因此我将创建一个包含短文本的png文件，并使用该png作为图标。）

增加FAB的大小很容易：
由于我不使用迷你FloatingActionButton，我重新定义了迷你按钮大小。
在我的layout-xml中，我指定：

<android.support.design.widget.FloatingActionButton
    ...
    app:fabSize="mini"
    ....

在 dimensions.xml 文件中，我重新定义了小型 FAB 的尺寸：

<dimen name="fab_size_mini">80dp</dimen>

然而，我没有成功地让FAB上的图标变大。我从材料图标库中尝试了不同 dp 大小的图标，但都没有成功。另外，在 FAB 布局上设置 padding 也不起作用。

有什么建议吗？谢谢！

- gerhard

---

对于没有自定义图像的自定义大小 - 可以设置 scaleX，scaleY - https://dev59.com/y5Lea4cB1Zd3GeqP2XXp#41637787 - Gene Bo

Answer 1

您可以尝试重新定义dimensions.xml中 FAB 图像大小的最大值：

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>

必须确保覆盖设计库中的原始资源。如果这对您不起作用，请尝试使用design_fab_image_size而不是design_fab_content_size。

请小心使用，因为这只是一种hack，而不是真正的解决方案。如果未来的Design Library版本更改资源的名称，则该解决方案可能无法正常工作。我的建议是坚持使用在Design Library中定义的大小，因为它是基于Material Design的推荐设计指南，可以使您的整个应用程序看起来很好。

- Grace Coder

---

感谢Grace Coder。对我来说，如果我写“fab_size_mini”而不是“design_fab_size_mini”，以及“fab_content_size”而不是“design_fab_content_size”，它就完美地运行了。 - gerhard

很棒的答案。fab_size_mini和fab_size_normal都可以使用。 - Denys Vasylenko

优秀的回答 @Grace Coder - Brajendra Pandey

如果有人想知道，你可以在这里找到dimen名称：https://android.googlesource.com/platform/frameworks/support.git/+/master/design/res/values/dimens.xml ，看起来确实是design_fab_image_size。 - Tim

在我的情况下，这个方案完美地运作，因为我需要为单个设备进行定制。 - Bharat Raichur

为什么不在XML中这样做呢？ android:scaleType="fitCenter" android:scaleX="1.5" android:scaleY="1.5" - mehmet

Answer 2

我偶然发现了这个问题，通过尝试找到了答案。如果你将layout:width和layout:height都设置为match_parent并将浮动操作按钮包裹在FrameLayout中（不必如此，但这样做是有道理的，因为你只想设置按钮的大小）, 然后将FrameLayout的宽度和高度设置为所需值。

我点赞Grace Coder的回答，因为它确实解决了这个问题，但我认为这种方法可能更安全，也更受欢迎。

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/chronometer"
    android:layout_centerHorizontal="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/chronometer"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:clickable="true"
        android:src="@android:drawable/ic_btn_speak_now"
        android:id="@+id/record_fab" />
</FrameLayout>

您可以在我拍摄的这个屏幕截图中看到差异：

顶部的悬浮操作按钮使用了我的代码/解决方法，而底部的悬浮操作按钮使用标准(大多不可更改)尺寸。

- Dog Lover

---

如果有多个浮动操作按钮（FAB按钮），但只需要将其中一个增大，更好的解决方案是什么。 - BitByteDog

如果您将fab变得比正常尺寸更大，则可以使用，但是如果您将fab缩小，则无法调整fab内部的图标大小。 - lostintranslation

此解决方案在 Lollipop 之前的设备上会产生视觉伪影，请参阅我的回答了解详情。 - gmk57

Answer 3

要更改芯片尺寸，请使用

app:fabCustomSize="70dp"

对于图标大小

app:maxImageSize="50dp"

例子

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_start"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@android:color/holo_blue_bright"
            app:fabCustomSize="70dp"
            app:layout_anchor="@id/bottom_app_bar"
            app:rippleColor="@android:color/holo_blue_dark"
            app:srcCompat="@drawable/ic_play"
            app:layout_anchorGravity="center|top"
            android:focusable="true"
            app:maxImageSize="40dp"
            app:tint="@color/white_overlay_1"
            />

- polis

---

目前，2020年的情况下，这是最可接受且完整的答案。谢谢！ - Smaily Carrilho

不确定为什么这个没有被接受，这很棒，谢谢！ - RESTfulGeoffrey

请问您如何以编程方式设置maxImageSize？我找不到答案。 - Chitrang

Answer 4

自从Design Support Library 27.1.0以来，有一种官方方法可以设置自定义FAB大小: app:fabCustomSize XML属性和相应的setCustomSize 方法。要增加图标大小，可以使用android:scaleType="center"和更大的可绘制对象。 更新:android:scaleType现在已经失效，请改用fab.setScaleType(ImageView.ScaleType.CENTER)。

其他提出的解决方案存在一些缺点:

• 重新定义默认FAB尺寸无法应用于单个按钮，实质上是一种hack（使用非公共API，可能会发生变化）。
• 将FAB包装在FrameLayout中(或者只是将FAB的layout_width和layout_height设置为所需的大小，具有相同的效果)在早期的设备上看起来很糟糕。更新: 现在在Lollipop版本之后也是如此（请参见下面的截图）。

设置scaleX和scaleY需要调整边距（因为可视化的FAB尺寸现在与其布局尺寸不匹配），并缩放不可缩放的部分：按钮边框和（低于Lollipop版本的）阴影宽度。

在API 19（左图）和API 21（右图）上呈现的示例布局：

- gmk57

Answer 5

要调整FAB中图标的大小：

app:maxImageSize="100dp"

整个示例：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_marginEnd="25dp"
    android:layout_marginBottom="25dp"
    android:src="@drawable/ic_add"
    app:fabCustomSize="100dp"
    app:maxImageSize="75dp" />

- Mopto

Answer 6

对@GraceCoder的回答进行澄清，正如@Tim Castelijns在上面的评论中指出的那样

您应该进入res->values->dimensions.xml文件

并将其更改以添加

<dimen name="design_fab_size" tools:override="true">100dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">98dp</dimen>

注意：这里的

design_fab_size

不是

design_fab_size_mini

- HenriqueMS

Answer 7

<dimen name="design_fab_size_mini" tools:override="true">120dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">150dp</dimen>

- Boris Levochsky

Answer 8

在Android P预览版中，FAB与其父元素大小匹配的功能对我来说已经失效了，因为图标停止按比例缩放，使其变得太小并且偏离中心位置。最简单的替代方法是将FAB放置在FrameLayout中，在FAB上设置合理的边距，以便阴影不被切断（我使用了10dp），将两者的大小设置为“wrap_content”，然后在FrameLayout中添加“scaleX”和“scaleY”。

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleX="1.6"
    android:scaleY="1.6">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_send_white_24dp" />
</FrameLayout>

这个功能按预期工作，允许用户轻松地按特定数量进行缩放，并且不会影响任何其他浮动操作按钮。

- Ullallulloo

Answer 9

现在你可以轻松自定义制造尺寸，只需添加

        app:fabCustomSize="32dp"

像

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_main_unlock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_margin="@dimen/margin_normal"
        android:src="@drawable/ic_unlock"
        android:visibility="gone"
        app:backgroundTint="@color/colorPrimary"
        app:fabCustomSize="@dimen/margin_very_massive"
        tools:visibility="visible" />

- M Moersalin