android - 调整浮动操作按钮的图标大小（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" />

波纹椭圆形.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

score 192 · Accepted Answer

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

score 168 · Accepted Answer

168

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

于 2018-09-03T07:28:08.040 回答

score 124 · Accepted Answer

以尺寸输入此条目

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

score 108 · Accepted Answer

自定义 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:marginxml 标签属性设置。

score 28 · Accepted Answer

设计指南定义了两种尺寸，除非有强烈的理由不使用其中任何一种，否则尺寸可以通过组件的fabSizeXML 属性来控制FloatingActionButton。

考虑使用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" />

score 15 · Accepted Answer

<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）

在此处输入图像描述

在我看来很好。

score 15 · Accepted Answer

你的目标是什么？

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

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

我的目标图标图像大小是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" />

score 10 · Accepted Answer

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

app:fabCustomSize="your custom size in dp"

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

score 1 · Accepted Answer

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

app:iconSize="<x>dp"

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

score 0 · Accepted Answer

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

最终 FloatingActionButton 按钮 = new FloatingActionButton(context);

button.setCustomSize(50);

score -1 · Accepted Answer

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

我是这样处理的

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

14 回答 14

Related

Reference