Question

我想创建一个更大的浮动动作按钮（FAB），超过通常的56 dp，里面有一个更大的图标。（为了我的目的，一个图标永远不会自我解释，所以我将创建一个包含短文本的png文件，并使用此png作为图标。）

增加FAB的尺寸可以正常工作：
因为我不使用mini-FloatingActionButton，我重新定义了迷你按钮尺寸在我的 layout-xml 中，我指定：

<android.support.design.widget.FloatingActionButton
    ...
    app:fabSize="mini"
    ....

并在 dimensions.xml 中重新定义了mini-fab的大小：

<dimen name="fab_size_mini">80dp</dimen>

但是，我没有设法在FAB上获得更大的图标。我在材料图标库中尝试了不同dp的图标 - 没有成功。在FAB布局上设置填充也不起作用。

有什么建议吗？谢谢！

Answer 1

您可以尝试在dimensions.xml中重新定义fab图像尺寸的最大尺寸：

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_size_mini" tools:override="true">80dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">48dp</dimen>
</resources>

必须确保覆盖设计库中的原始资源。如果这对您不起作用，请尝试design_fab_image_size而不是design_fab_content_size。

谨慎使用，因为这是一个黑客而非实际的解决方案。如果在将来的Design Library版本中更改了资源的名称，则解决方案可能无效。我的意见是坚持设计库中定义的大小，因为它是基于Material Design的推荐设计指南，使您的整体应用看起来很好。

Answer 2

我偶然发现了这个，然后通过反复试验找到答案。如果您将layout:width和layout:height都设置为match_parent并将浮动操作按钮包装在FrameLayout中（似乎没有），您似乎可以增加浮动操作按钮的大小是的，但是因为你只想设置按钮的大小而有意义。）

然后将FrameLayout的宽度和高度设置为您想要的任何值。

我赞成了Grace Coder的回答，因为它确实解决了这个问题，但我认为这种方法更安全，可能更合适。

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_below="@+id/chronometer"
    android:layout_centerHorizontal="true">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/chronometer"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:clickable="true"
        android:src="@android:drawable/ic_btn_speak_now"
        android:id="@+id/record_fab" />
</FrameLayout>

您可以在我拍摄的屏幕截图中看到差异：

顶级FAB使用我的代码/解决方法，而底部FAB使用标准（大多数不可更改）维度。

Answer 3

自设计支持库27.1.0起，有一种官方方法来设置自定义FAB大小：app:fabCustomSize XML attribute和相应的setCustomSize method。要增加图标大小，可以使用android:scaleType="center"和更大的drawable。更新：android:scaleType现在为broken，请改用fab.setScaleType(ImageView.ScaleType.CENTER)。

其他建议的解决方案也有一些缺点：

Redefining default FAB dimensions不能应用于单个按钮，本质上是一种黑客行为（使用可能会更改的非公开API）。
Wrapping FAB in FrameLayout（或者只是将FAB的layout_width和layout_height设置为所需的大小，效果相同）在棒棒糖之前的设备上看起来很糟糕。更新：现在也在棒棒糖发布后（请参见下面的屏幕截图）。
Setting scaleX and scaleY需要调整边距（因为视觉FAB尺寸现在不匹配其布局尺寸）并缩放不可缩放的部分：按钮边框和（棒棒糖之前的）阴影宽度。

Sample layout（在API 19（左）和API 21（右）上呈现）：

Answer 4

向@GraceCoder澄清@Tim Castelijns在上面的评论中注意到的答案

您应该转到res-＆gt; values-＆gt; dimensions.xml文件

并将其更改为添加

<dimen name="design_fab_size" tools:override="true">100dp</dimen>
    <dimen name="design_fab_content_size" tools:override="true">98dp</dimen>

<强>注意：它是

design_fab_size

不

design_fab_size_mini

Answer 5

要更改晶圆厂大小，请使用

app:fabCustomSize="70dp"

对于图标大小

app:maxImageSize="50dp"

示例

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_start"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@android:color/holo_blue_bright"
            app:fabCustomSize="70dp"
            app:layout_anchor="@id/bottom_app_bar"
            app:rippleColor="@android:color/holo_blue_dark"
            app:srcCompat="@drawable/ic_play"
            app:layout_anchorGravity="center|top"
            android:focusable="true"
            app:maxImageSize="40dp"
            app:tint="@color/white_overlay_1"
            />

Answer 6

<dimen name="design_fab_size_mini" tools:override="true">120dp</dimen>
<dimen name="design_fab_size_normal" tools:override="true">150dp</dimen>

Answer 7

要在 FAB 内调整图标大小：

app:maxImageSize="100dp"

整个例子：

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_marginEnd="25dp"
    android:layout_marginBottom="25dp"
    android:src="@drawable/ic_add"
    app:fabCustomSize="100dp"
    app:maxImageSize="75dp" />

Answer 8

在Android P预览中，让FAB匹配其父级的尺寸对我来说不再起作用，因为该图标停止缩放，使其变得太小且偏离中心。

我找到的最简单的替代方法是将FAB放置在FrameLayout中，在FAB上设置合理的边距，以使阴影不会被遮挡（我使用10dp），将两者的大小都设置为wrap_content ，然后将scaleX和scaleY添加到FrameLayout。

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleX="1.6"
    android:scaleY="1.6">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_send_white_24dp" />
</FrameLayout>

这可以按预期工作，可以轻松按特定比例缩放，并且不影响任何其他浮动操作按钮。

Answer 9

现在您可以轻松自定义晶圆厂的大小，只需添加

        app:fabCustomSize="32dp"

喜欢

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_main_unlock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_margin="@dimen/margin_normal"
        android:src="@drawable/ic_unlock"
        android:visibility="gone"
        app:backgroundTint="@color/colorPrimary"
        app:fabCustomSize="@dimen/margin_very_massive"
        tools:visibility="visible" />

Android：使用更大的图标创建更大的浮动操作按钮

9 个答案: