调整浮动操作按钮的图标大小（fab）答案

【问题标题】：Adjust icon size of Floating action button (fab)调整浮动操作按钮的图标大小（fab）
【发布时间】：2019-02-09 04:10:36
【问题描述】：

新的浮动操作按钮应该是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

【问题讨论】：

可能重复：stackoverflow.com/a/59455009/3974530

标签： android material-design floating-action-button material-components-android android-icons

【解决方案1】：

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

【讨论】：

你能解释一下或放一个链接到某个网站吗，例如为什么在 drawable-hdpi 文件夹中有 _18dp.png、_24dp.png、_36dp.png、_48dp。 png 图像。
我不明白你的问题，不同尺寸的图片有 18dp、24dp、36dp 和 48dp。
你还记得旧的 Android_Design_Icons，它在 hdpi 文件夹中只有一个图标变体，即 48px x 48px。为什么现在在 hdpi 文件夹中，同一个图标有 4 种不同的分辨率，即 27px x 27 px、36px x 36px、54px x 54px、72px x 72px？
ImageButton 是 ImageView 的子类，所以你有一个 scaleType 属性，默认 scaleType 是ScaleType.FIT_CENTER
不再适用于 com.android.support:support-v4:28.0.0-rc01

【解决方案2】：

将支持库更新到 v28.0.0 后，尝试使用 app:maxImageSize="56dp" 而不是上述答案

【讨论】：

不管怎样，28.0.0版本没有这个，你会在androidx中得到。
我还没切换到AndroidX，我用的是这个：api 'com.android.support:design:28.0.0'
这对我有用，但我想了解更多信息以了解为什么定义 maxIconSize 会改变图标大小。
您能告诉我如何以编程方式设置 maxImageSize 吗？我找不到答案。
它对我有用。谢谢

【解决方案3】：

在维度中输入此条目

<!--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"

【讨论】：

是的。它不适用于github.com/Clans/FloatingActionButton。它在您使用 androids FloatingActionButton 时有效
是啊，但我不想在整个应用程序中这样做！
@StarWind0 如果要申请单个浮动操作按钮，您必须使用 fabSize 和 scaleType 属性。我已经更新了我的答案。

【解决方案4】：

自定义 FAB 有三个关键的 XML 属性：

app:fabSize：“mini”（40dp）、“normal”（56dp）（默认）或“auto”
app:fabCustomSize：这将决定整个 FAB 的大小。
app:maxImageSize：这将决定图标的大小。

例子：

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

FAB 内边距（图标和背景圆圈之间的空间，又名波纹）由以下方式隐式计算：

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

请注意，fab 的边距可以通过通常的android:margin xml 标签属性来设置。

【讨论】：

您能告诉我如何以编程方式设置 maxImageSize 吗？我找不到答案。
@Chitrang 根据 API 文档，没有设置 FAB 的“maxImageSize”的公共方法。但是，有一个“setCustomSize”方法......看看它是否适合你。在最坏的情况下，您需要创建一个新的 FAB 视图并将其附加到您的布局中......因为没有视图的 setter 方法就无法在 XML 中动态设置属性。
maxImageSize 为我工作，用于在浮动按钮中显示完整的可绘制对象。

【解决方案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" />

【讨论】：

【解决方案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）

我觉得不错。

【讨论】：

我设置了填充，但它什么也没做。正确的填充是 16 dp 而不是 32dp

【解决方案7】：

你的目标是什么？

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

确保图片尺寸大于目标尺寸(so you can set max image size for your icon)

我的目标图标图像尺寸是 84dp 而晶圆厂尺寸是 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" />

【讨论】：

【解决方案8】：

如果您使用的是 androidx 1.0.0 并使用自定义 fab 尺寸，则必须使用

指定自定义尺寸

app:fabCustomSize="your custom size in dp"

默认大小为 56dp，还有另一种变体，即 40dp 的小型 fab，如果您使用任何东西，您必须指定它才能正确计算填充

【讨论】：

这正是我想要的！你甚至不需要设置layout_width 和layout_height。它只是工作。这也可以在com.android.support:design:28.0.0 上找到

【解决方案9】：

您可以使用 FloatingActionButton 的以下设置：android:scaleType 和 app:maxImageSize。至于我，如果 android:scaleType="centerInside" 和 app:maxImageSize="56dp" ，我得到了一个理想的结果。

【讨论】：

【解决方案10】：

因为FAB 就像ImageView 所以你可以使用scaleType 属性来改变图标大小同样ImageView。 FAB 的默认 scaleType 是 fitCenter。您可以使用center 和centerInside 分别使图标变小和变大。

scaleType 属性的所有值都是 - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY 和 matrix。

【讨论】：

【解决方案11】：

关闭@IRadha 的回答在矢量可绘制设置中android:height="_dp" 并将比例类型设置为android:scaleType="center" 将drawable设置为设置的任何大小

【讨论】：

【解决方案12】：

使用 ExtendedFloatingActionButton，这解决了我的问题：

app:iconSize="<x>dp"

我尝试过iconPadding 或fabCustomSize，但似乎没有任何变化

【讨论】：

【解决方案13】：

您可以通过使用轻松设置您的 FAB 图标大小，

final FloatingActionButton button = new FloatingActionButton(context);

button.setCustomSize(50);

【讨论】：

【解决方案14】：

    android:id="@+id/floatingActionButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:clickable="true"
    app:backgroundTint="#FBFAFA"
    app:fabCustomSize="70dp"
    app:fabSize="mini"
    app:maxImageSize="84dp"
    app:srcCompat="@drawable/resim"
    app:tint="#E81C1C"
    tools:layout_editor_absoluteX="325dp"
    tools:layout_editor_absoluteY="517dp" />

我是这样处理的

【讨论】：

id 和 srcCompat 我更喜欢你根据自己调整这些部分。
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。