调整浮动操作按钮(fab)的图标大小

问题描述 投票:139回答:11

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

android android-layout android-drawable floating-action-button android-icons
11个回答
178
投票

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


3
投票

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


1
投票

您可以使用FloatingActionButton的以下设置:android:scaleType和app:maxImageSize。至于我,如果android:scaleType =“centerInside”和app:maxImageSize =“56dp”,我有一个理想的结果。


99
投票

在尺寸中输入此条目

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

55
投票

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


26
投票

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

15
投票
<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)

在我看来很好。


7
投票

你的目标是什么?

如果将图标图像大小设置为较大的一个:

  1. 确保图像尺寸大于目标尺寸(so you can set max image size for your icon)
  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" />

7
投票

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


4
投票

由于FAB就像ImageView所以你可以使用scaleType属性同样改变图标大小ImageViewscaleType的默认FABfitCenter。您可以使用centercenterInside分别制作小图标和大图标。

scaleType属性的所有值都是 - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYmatrix

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


4
投票

如果您使用的是androidx 1.0.0并使用自定义fab大小,则必须使用指定自定义大小

app:fabCustomSize="your custom size in dp"

默认情况下,大小为56 dp,还有另一种变体,即40dp的小型工厂,如果你使用任何东西,你必须指定它才能正确计算填充

© www.soinside.com 2019 - 2024. All rights reserved.