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


172

浮动按钮 新的浮动操作按钮应为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中的图标
/标记/1.0.1

如何使按钮内的图标大小完全符合准则中所述?

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button



@InsaneCat也许相反,因为您提到的问题比我的要新。
vovahost

Answers:


184

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


您能否解释或删除某个站点的链接,例如为什么在drawable-hdpi文件夹中有_18dp.png,_24dp.png,_36dp.png,_48dp.png图像。
vovahost 2014年

我不明白您的问题,对于不同尺寸的图像,有18dp,24dp,36dp和48dp。
加埃唐M.

您还记得旧的Android_Design_Icons,它在hdpi文件夹中只有一个图标变体,即48px x 48px。为什么现在在hdpi文件夹中,同一图标有4种不同的分辨率,即27px x 27px,36px x 36px,54px x 54px,72px x 72px?
vovahost 2014年

1
的ImageButton是ImageView的子类,所以你有一个scaleType attribut和默认scaleType是ScaleType.FIT_CENTER
盖坦·M.

4
不再与com.android.support:support-v4:28.0.0-rc01配合使用
StarWind0 '18

116

使此条目变暗

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

3
这正是我所需要的-简单,容易。感谢您的发布。
Blisterpeanuts

1
是。它不适用于github.com/Clans/FloatingActionButton。当您使用androids FloatingActionButton
Abhishek

2
是的,但我不想在整个应用程序中都这样做!
StarWind0

@ StarWind0如果要申请单个浮动操作按钮,则必须使用fabSize和scaleType属性。我已经更新了答案。
阿比舍克(Abhishek)

110

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


1
无论如何,您不会在28.0.0版本中获得此功能,而会在androidx中获得它。
Khemraj

1
我还没有切换到AndroidX,这是我使用的是什么:API“com.android.support:design:28.0.0”
罗宾

3
这对我有用,但我想了解更多信息,以了解为什么定义一个maxIconSize更改图标大小。
stramin

44

自定义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的边距。


27

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

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
我设置了填充,但没有任何作用。而正确的填充应为16 dp而非32dp
vovahost 2014年

10

你的目标是什么?

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

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

6

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

app:fabCustomSize="your custom size in dp"

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


这正是我想要的!您甚至不需要设置layout_widthlayout_height。它只是工作。这也可以在com.android.support:design:28.0.0
-PNDA


3

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


2

您可以使用FloatingActionButton的以下设置进行播放:android:scaleType和app:maxImageSize。对于我来说,如果android:scaleType =“ centerInside”和app:maxImageSize =“ 56dp”,我得到了理想的结果。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.