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

Floating button 新的浮动操作按钮应该是 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>

这就是我得到的结果:
Floating button result
我用的是 Materials-design-icon-1.0.0 content draable-hdpic _ 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

232465 次浏览
小开 
<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)

enter image description here

我觉得不错。

小开
最佳答案

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

小开

使这一项以维数表示

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

设计指南定义了两种大小，除非有强烈的理由不使用其中任何一种，否则大小可以用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" />
小开

因为FAB类似于ImageView，所以你可以使用scaleType属性来改变图标的大小。FAB的默认scaleType是fitCenter。你可以使用center和centerInside分别将图标变小和变大。

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

更多细节参见https://developer.android.com/reference/android/widget/ImageView.ScaleType.html。

小开

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

小开

在您将支持库更新到v28.0.0后，尝试使用app:maxImageSize="56dp"代替上述答案

小开

你的目标是什么?

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

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

  2. 我的目标图标图像大小是84 dp &fab size为112 dp:

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

如果您正在使用androidx 1.0.0并且正在使用自定义fab大小，则必须使用

app:fabCustomSize="your custom size in dp"

尺寸是56dp，还有另一种变化是小型fab，它是40dp，如果你使用任何东西，你必须指定它，以便正确计算填充

小开

你可以使用FloatingActionButton的以下设置:android:scaleType和app:maxImageSize。对于我来说，我得到了一个理想的结果，如果android:scaleType=“centerInside”和app:maxImageSize=“56dp”。

小开

定制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:margin xml标记属性设置。

小开

使用ExtendedFloatingActionButton，这解决了我的问题:

app:iconSize="<x>dp"

我已经尝试了iconPadding或fabCustomSize，但我似乎没有任何变化

小开

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

final FloatingActionButton按钮= new FloatingActionButton(context);

button.setCustomSize (50);

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

我是这样处理的


提交答案