調整浮動操作按鈕的圖標大小（fab）

Question

新的浮動操作按鈕應為56dp x 56dp ，其中的圖標應為24dp x 24dp 。 所以 icon 和 button 之間的間距應該是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 icon 。 然后在 ImageButton 中設置android:scaleType="center"以避免自動調整大小。

Answer 2

將支持庫更新到 v28.0.0 后，嘗試使用app:maxImageSize="56dp"而不是上述答案

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

Answer 4

自定義 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

---

請注意，fab 的邊距可以通過通常的android:margin xml 標簽屬性設置。

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

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

如果您使用的是 androidx 1.0.0 並使用自定義 fab 大小，則必須使用指定自定義大小

app:fabCustomSize="your custom size in dp"

默認情況下，尺寸為 56dp，還有另一種變體，即 40dp 的小型晶圓廠，如果您使用任何東西，則必須指定它才能正確計算填充

Answer 9

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

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 。

Answer 11

關閉@IRadha 在矢量可繪制設置中的答案android:height="_dp"並將縮放類型設置為android:scaleType="center"將可繪制設置為設置的任何大小

Answer 12

新的浮動操作按鈕應為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" />

波紋_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 13

使用 ExtendedFloatingActionButton，這為我解決了這個問題：

app:iconSize="<x>dp"

我試過iconPadding或fabCustomSize但我似乎沒有任何變化

Answer 14

您可以使用以下方法輕松設置 FAB 圖標大小，

最終 FloatingActionButton 按鈕 = 新的 FloatingActionButton(context);

button.setCustomSize(50);

Answer 15

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

我是這樣處理的