调整浮动操作按钮的图标大小（fab）

Question

The new floating action button should be 56dp x 56dp and the icon inside it should be 24dp x 24dp . So the space between icon and button should be 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>

And this is the result I get:

I used the icon from \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

How to make the size of the icon inside the button be exactly as described in guidelines?

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

Answer 1

As your content is 24dp x 24dp you should use 24dp icon . And then set android:scaleType="center" in your ImageButton to avoid auto resize.

Answer 2

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

Answer 3

Make this entry in dimens

<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>

Here 36dp is icon size on floating point button. This will set 36dp size for all icons for floating action button.

Updates As Per Comments

If you want to set icon size to particular Floating Action Button just go with Floating action button attributes like app:fabSize="normal" and 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

There are three key XML attributes for custom FABs:

• app:fabSize : Either "mini" (40dp), "normal"(56dp) (default) or "auto"
• app:fabCustomSize : This will decide the overall FAB size.
• app:maxImageSize : This will decide the icon size.

---

Example:

app:fabCustomSize="64dp" 
app:maxImageSize="32dp"

The FAB padding (the space between the icon and the background circle, aka ripple ) is calculated implicitly by:

4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16

---

Note that the margins of the fab can be set by the usual android:margin xml tag properties.

Answer 5

The design guidelines defines two sizes and unless there is a strong reason to deviate from using either, the size can be controlled with the fabSize XML attribute of the FloatingActionButton component.

Consider specifying using either app:fabSize="normal" or app:fabSize="mini" , eg:

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

With the background you provided it results in below button on my device (Nexus 7 2012)

Looks good to me.

Answer 7

What's your goal?

If set icon image size to bigger one:

1. Make sure to have a bigger image size than your target size (so you can set max image size for your icon)

2. My target icon image size is 84dp & fab size is 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

If you are using androidx 1.0.0 and are using a custom fab size, you will have to specify the custom size using

app:fabCustomSize="your custom size in dp"

By deafult the size is 56dp and there is another variation that is the small sized fab which is 40dp, if you are using anything you will have to specify it for the padding to be calculated correctly

Answer 9

You can play with the following settings of FloatingActionButton : android:scaleType and app:maxImageSize. As for me, I've got a desirable result if android:scaleType="centerInside" and app:maxImageSize="56dp".

Answer 10

As FAB is like ImageView so You can use scaleType attribute to change the icon size likewise ImageView . Default scaleType for a FAB is fitCenter . You can use center and centerInside to make icon small and large respectively.

All values for scaleType attribute are - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY and matrix .

See https://developer.android.com/reference/android/widget/ImageView.ScaleType.html for more details.

Answer 11

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

Answer 12

The new floating action button should be 56dp x 56dp and the icon inside it should be 24dp x 24dp . So the space between icon and button should be 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>

And this is the result I get:

I used the icon from \\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

How to make the size of the icon inside the button be exactly as described in guidelines ?

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

Answer 13

Using ExtendedFloatingActionButton, this solved the issue for me:

app:iconSize="<x>dp"

I've tried iconPadding or fabCustomSize but I haven't seem any changes

Answer 14

You can easily set your FAB icon size by using,

final FloatingActionButton button = new 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" />

I Handled It This Way