调整浮动操作按钮(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

Answer 1

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

Answer 2

在尺寸中输入此条目

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

Answer 3

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

Answer 4

设计指南定义了两种尺寸,除非有充分的理由偏离使用任何一种尺寸,否则可以使用组件的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" />

Answer 5

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

• app:fabSize：“迷你”（40dp），“普通”（56dp）（默认） 或“自动”
• app:fabCustomSize：这将决定FAB的整体大小。
• app:maxImageSize：这将决定图标的大小。

例：

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

FAB填充（图标和背景圆圈之间的间距，也称为涟漪）是通过以下方式隐式计算的：

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

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

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)

在我看来很好.

Answer 7

你的目标是什么？

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

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

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

Answer 8

就像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 。

Answer 9

如果您使用的是androidx 1.0.0，并且使用的是自定义晶圆厂尺寸，则必须使用

app:fabCustomSize="your custom size in dp"

缺省情况下，大小为56dp，还有另一个变化是小型fab，大小为40dp，如果您使用任何东西，则必须指定它才能正确计算填充

Answer 10

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