调整浮动操作按钮（FAB）的图标大小

Question

新的浮动操作按钮应为 56dp x 56dp，其中的图标应为 24dp x 24dp。因此，图标和按钮之间的间距应为 16dp。

<ImageButton
    android:id="@+id/fab_add"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:background="@drawable/ripple_oval"
    android:elevation="8dp"
    android:src="@drawable/ic_add_black_48dp" />

ripple_oval.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

以下是翻译的结果：

这是我得到的结果：

我使用了 \material-design-icons-1.0.0\content\drawable-hdpi\ic_add_black_48dp.png 的图标。
https://github.com/google/material-design-icons/releases/tag/1.0.1

如何使按钮内部的图标大小与指南中描述的完全一致？

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

- vovahost

---

可能是重复的问题：https://stackoverflow.com/a/59455009/3974530 - InsaneCat

Answer 1

由于您的内容为24dp x 24dp，因此应使用24dp图标。然后在ImageButton中设置android:scaleType="center"以避免自动调整大小。

- Gaëtan Maisse

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - vovahost

我不明白你的问题，不同尺寸图像有18dp、24dp、36dp和48dp。 - Gaëtan Maisse

ImageButton是ImageView的子类，因此您具有scaleType属性，其默认值为ScaleType.FIT_CENTER。 - Gaëtan Maisse

android:scaleType="center" android:scaleType="centerCrop" 这些设置适用于几乎所有视图。 - Lakhwinder Singh Dhillon

不再适用于com.android.support:support-v4:28.0.0-rc01。 - StarWind0

Answer 2

在更新您的支持库至v28.0.0之后，请尝试使用app:maxImageSize="56dp"，而不是以上答案。

- Robin

---

无论如何，在28.0.0版本中，您都无法获得此功能，您将在androidx中获得它。 - Khemraj Sharma

我还没有切换到AndroidX，我正在使用的是：api 'com.android.support:design:28.0.0'。 - Robin

这对我有用，但我希望能获得更多信息来理解为什么定义一个 maxIconSize 会改变图标的大小。 - stramin

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

它对我有效。谢谢。 - neo

Answer 3

定制 FABs 的三个关键 XML 属性：

• app:fabSize: 可以是 "mini" (40dp), "normal"(56dp)(默认) 或 "auto"
• app:fabCustomSize: 决定 FAB 的整体大小。
• app:maxImageSize: 决定图标的大小。

---

示例：

app:fabCustomSize="64dp" 
app:maxImageSize="32dp"

FAB的padding（图标和背景圆圈之间的空间，也称为涟漪）是通过隐式计算得出的：

4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16

---

请注意，工厂的边距可以通过常规的 android:margin xml标记属性进行设置。

---

- varun

---

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

@Chitrang 根据API文档，没有公开的方法来设置FAB的“maxImageSize”。但是，有一个“setCustomSize”方法...看看它是否适合您。在最坏的情况下，您需要创建一个新的FAB视图并将其附加到布局中...因为没有办法在没有视图setter方法的情况下动态设置XML属性。 - varun

maxImageSize 对我来说很有效，可以在浮动按钮中显示完整的可绘制图像。 - Akash Bisariya

Answer 4

在dimens文件中进行此条目的设置

<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>

这里的36dp是浮动按钮上图标的大小。这将为所有浮动操作按钮的图标设置36dp的大小。

根据评论更新

如果您想将图标大小设置为特定的浮动操作按钮，请使用浮动操作按钮属性，如app:fabSize="normal"和android:scaleType="center"。

  <!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need-->
  app:fabSize="normal" 

  <!--android:scaleType decides how the icon drawable will be scaled on Floating action button. You can use center(to show scr image as original), fitXY, centerCrop, fitCenter, fitEnd, fitStart, centerInside.-->
  android:scaleType="center"

- Abhishek

---

是的。它与https://github.com/Clans/FloatingActionButton不兼容。当您使用Android的FloatingActionButton时才能正常工作。 - Abhishek

耶，但我不想在整个应用程序中这样做！ - StarWind0

@StarWind0 如果你想应用于单个浮动操作按钮，就必须使用fabSize和scaleType属性。我已更新我的答案。 - Abhishek

Answer 5

设计指南规定了两种尺寸，除非有充分的理由偏离使用其中任何一个，否则可以使用 FloatingActionButton 组件的 fabSize XML 属性来控制尺寸。

考虑使用 app:fabSize="normal" 或 app:fabSize="mini" 进行指定，例如：

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_done_white_24px"
   app:fabSize="mini" />

- Cristian Almstrand

Answer 6

<ImageButton
        android:background="@drawable/action_button_bg"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:padding="16dp"
        android:src="@drawable/ic_add_black_48dp"
        android:scaleType="fitXY"
        android:elevation="8dp"/>

根据您提供的背景信息，在我的设备（Nexus 7 2012）上结果如下按钮：

在我看来很不错。

- Chris K.

---

我设置了填充(padding)，但是没有任何效果。正确的右侧填充应该是16 dp而不是32 dp。 - vovahost

Answer 7

你的目标是什么？

如果将图标图像大小设置为更大：

1. 确保拥有比目标大小更大的图像大小（这样您就可以为图标设置最大图像大小）。

2. 我的目标图标图像大小为 84dp ，fab 大小为 112dp ：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src= <image here>
    app:fabCustomSize="112dp"
    app:fabSize="auto"
    app:maxImageSize="84dp" />

- Shem Alexis Chavez

Answer 8

如果您正在使用androidx 1.0.0并且正在使用自定义的浮动操作按钮大小，则必须使用以下方式指定自定义大小：

app:fabCustomSize="your custom size in dp"

默认情况下大小为56dp，还有另一种变体是小型fab，大小为40dp。如果您使用任何东西，您必须指定它以便正确计算填充。

- Suhaib Roomy

---

这正是我一直在寻找的！你甚至不需要设置layout_width和layout_height。它就可以工作了。这也可以在com.android.support:design:28.0.0上使用。 - Aloha

Answer 9

你可以调整 FloatingActionButton 的以下设置：android:scaleType 和 app:maxImageSize。对我来说，如果android:scaleType="centerInside" 并且app:maxImageSize="56dp"，就可以得到满意的结果。

- Andrew Glukhoff

Answer 10

由于 FAB 像 ImageView，因此您可以使用 scaleType 属性来更改图标的大小，就像使用 ImageView 一样。 默认情况下，FAB 的 scaleType 是 fitCenter。 您可以使用 center 和 centerInside 分别使图标变小和变大。

所有可用的 scaleType 属性值为 - center，centerCrop，centerInside，fitCenter，fitEnd，fitStart，fitXY 和 matrix。

有关更多详细信息，请参见https://developer.android.com/reference/android/widget/ImageView.ScaleType.html。

- lRadha