Adjust icon size of Floating action button (fab)

Question

Floating button 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:
Floating button result
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

Possible duplicate of : https://stackoverflow.com/a/59455009/3974530 — InsaneCat, Dec 23 '19 at 12:02

score 197 · Accepted Answer · answered Dec 15 '14 at 12:41

197

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.

answered Dec 15 '14 at 12:41

Gaëtan Maisse

12,208
9
44
47

Can you explain or drop a link to some site, why for example in **drawable-hdpi** folder there are _18dp.png, _24dp.png, _36dp.png, _48dp.png images. – vovahost Dec 15 '14 at 13:30
I don't understand your question, there are 18dp, 24dp, 36dp and 48dp for different size images. – Gaëtan Maisse Dec 15 '14 at 13:36
Do you remember the old Android_Design_Icons which had only one variant of the icon in hdpi folder which was 48px x 48px. Why now in hdpi folder there are 4 different resolution for the same icon i.e. 27px x 27 px, 36px x 36px, 54px x 54px, 72px x 72px ? – vovahost Dec 15 '14 at 13:38
yep I remember but I can't explain why these new icons are in multiple sizes... (to get them super clean when they are used ?). Hope someone has an answer to that – Gaëtan Maisse Dec 15 '14 at 13:45
Is **android:scaleType** applicable to an ImageButton because I don't get any suggestions when I use CTRL+SPACE. Without that tag it gives the same effect. Maybe for ImageButton *android:scaleType* is set by default to *center* – vovahost Dec 15 '14 at 13:48
1

ImageButton is a subclass of ImageView so you have a scaleType attribut and default scaleType is [ScaleType.FIT_CENTER](http://stackoverflow.com/questions/13828720/what-is-default-scale-type-of-imageview) – Gaëtan Maisse Dec 15 '14 at 13:52
Then I will not change it. I think the default value ScaleType.FIT_CENTER is safer to use for an ImageButton. – vovahost Dec 15 '14 at 14:11
android:scaleType="center" android:scaleType="centerCrop" are settings work on almost all views – Lakhwinder Singh Dhillon Mar 08 '17 at 12:00
5

No longer works with com.android.support:support-v4:28.0.0-rc01 – StarWind0 Aug 15 '18 at 22:18

Robin · Answer 2 · 2018-09-28T05:33:20.383

194

Try to use app:maxImageSize="56dp" instead of the above answers after you update your support library to v28.0.0

edited Sep 28 '18 at 05:33

answered Sep 03 '18 at 07:28

Robin

10,052
6
31
52

2

Any ways, you don't get this in 28.0.0 version, you will get it in androidx. – Khemraj Sharma Sep 28 '18 at 05:40
1

I haven't switched to AndroidX, this is what I am using: api 'com.android.support:design:28.0.0' – Robin Sep 28 '18 at 05:58
3

This worked for me but I would like more information to understand why defining a `maxIconSize` changes the icon size. – stramin Jun 20 '19 at 19:49
1

Can you please tell me how to set maxImageSize programmatically? I couldn't find the answer. – Chitrang Sep 16 '20 at 23:42
it works for me. thanks – neo Oct 22 '21 at 03:04

score 130 · Answer 3 · answered Apr 28 '19 at 21:18

130

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.

answered Apr 28 '19 at 21:18

varun

2,027
1
15
17

1

Can you please tell me how to set maxImageSize programmatically? I couldn't find the answer. – Chitrang Sep 16 '20 at 23:24
@Chitrang According to the API documentation, there are no public methods to set the FAB's "maxImageSize". However, there is a "setCustomSize" method... See if it works out for you. In the worst case, you need to create a new FAB view and append it into your layout... since there is no way to dynamically set attributes in XML without the view's setter method. – varun Sep 17 '20 at 05:45
1

maxImageSize worked for me for showing full drawable in floating button. – Akash Bisariya Mar 31 '21 at 12:31

Abhishek · Answer 4 · 2019-01-24T11:28:54.770

125

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"

edited Jan 24 '19 at 11:28

answered Jun 24 '16 at 05:28

Abhishek

3,348
3
15
34

1

Yes. It doesn't work with https://github.com/Clans/FloatingActionButton. It works when you are using androids FloatingActionButton – Abhishek Sep 06 '16 at 03:58
2

Yeaaaah but I don't Want to do it across the app! – StarWind0 Dec 18 '17 at 22:16
@StarWind0 I you have to use fabSize and scaleType attributes if want to apply for single floating action button. I have updated my answer. – Abhishek Dec 19 '17 at 03:42

score 30 · Answer 5 · answered Aug 10 '16 at 01:12

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", e.g.:

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

Chris K. · Answer 6 · 2014-12-15T12:58:55.623

18

<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)

enter image description here

Looks good to me.

edited Dec 15 '14 at 12:58

answered Dec 15 '14 at 12:33

Chris K.

977
8
18

7

I set the padding but it does nothing. And the right padding would be 16 dp not 32dp – vovahost Dec 15 '14 at 12:38

score 16 · Answer 7 · answered Oct 12 '18 at 10:37

What's your goal?

If set icon image size to bigger one:

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

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

score 11 · Answer 8 · answered Oct 23 '18 at 11:20

11

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

answered Oct 23 '18 at 11:20

Suhaib Roomy

2,501
1
16
22

This is exactly what I was looking for! You don't even need to set `layout_width` and `layout_height`. It just works. This is also available on `com.android.support:design:28.0.0` – Aloha Feb 17 '19 at 06:07

score 6 · Answer 9 · answered Feb 24 '19 at 17:44

6

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

answered Feb 24 '19 at 17:44

Andrew Glukhoff

898
11
9

score 5 · Answer 10 · answered Aug 24 '16 at 06:14

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.

score 3 · Answer 11 · answered Feb 25 '18 at 21:52

3

off of @IRadha's answer in vector drawable setting android:height="_dp" and setting the scale type to android:scaleType="center" sets the drawable to whatever size was set

answered Feb 25 '18 at 21:52

Daniel Dube

31
2

score 1 · Answer 12 · answered Mar 10 '21 at 10:41

1

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

answered Mar 10 '21 at 10:41

J.Stange

478
3
8

score 0 · Answer 13 · answered Apr 26 '21 at 17:16

0

You can easily set your FAB icon size by using,

final FloatingActionButton button = new FloatingActionButton(context);

button.setCustomSize(50);

answered Apr 26 '21 at 17:16

VIVek

121
1
4

score -1 · Answer 14 · answered Sep 30 '21 at 21:33

-1

    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

answered Sep 30 '21 at 21:33

Sertan

12
4

id and srcCompat I prefer that you adjust these parts according to yourself. – Sertan Sep 30 '21 at 21:34
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 01 '21 at 06:14

Adjust icon size of Floating action button (fab)

14 Answers14

Linked

Related