Android: Create bigger Floating Action Button with

Question

I want to create a bigger Floating Action Button (FAB), more than the usual 56 dp, with a bigger icon inside. (For my purpose an icon will never be self-explanatory so I will create a png-file containing a short text and use this png as icon.)

Increasing the size of the FAB works fine:
as i don't use the mini-FloatingActionButton, i redefined the mini-button-size.
in my layout-xml i specify:

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

and in the dimensions.xml i redefine the size for the mini-fab:

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

However, I didn't manage to get a bigger icon on the FAB. I tried icons with different dp's from the material icons library - no success. Also setting a padding on the FAB-layout did not work.

Any suggestions? Thanks!

Answer 1

Since Design Support Library 27.1.0 there is an official way to set custom FAB size: app:fabCustomSize XML attribute and corresponding setCustomSize method. For increasing icon size you can use android:scaleType="center" and larger drawable. UPDATE: android:scaleType is now broken, use fab.setScaleType(ImageView.ScaleType.CENTER) instead.

Other proposed solutions have some drawbacks:

• Redefining default FAB dimensions cannot be applied to single button and is essentially a hack (uses non-public API which is subject to change).
• Wrapping FAB in FrameLayout (or just setting FAB's layout_width and layout_height to desired size, which has the same effect) looks awfully on pre-Lollipop devices. UPDATE: Now on post-Lollipop too (see screenshots below).
• Setting scaleX and scaleY requires adjusting margins (because visual FAB size now does not match its layout size) and scales non-scalable parts: button border and (pre-Lollipop) shadow width.

Sample layout as rendered on API 19 (left) and API 21 (right):

Answer 2

You can try to redefine the maximum size of the fab image size in your dimensions.xml:

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

Must make sure you override the original resources in the Design Library. Try design_fab_image_size instead of design_fab_content_size if this does not work for you.

Use with care as this is a hack not an actual solution. Solution might not work if the resource's name is changed in the future Design Library release. My opinion is to stick with the size that is define in the Design Library as it is the recommended design guideline based on the Material Design which make your overall app looks good.

Answer 3

I stumbled across this and then found an answer through trial and error. It seems that you can increase the size of the floating action button if you set both layout:width and layout:height to match_parent and wrap the floating action button in a FrameLayout (doesn't have to be, but makes sense since you're only wanting to set the size of the button).

Then set the FrameLayout width and height to whatever you desire.

I upvoted Grace Coder's answer because it certainly addresses the problem but I thought this method would be safer and possibly more desirable.

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

You can see the difference in this screenshot I took:

The top FAB uses my code/workaround, whereas the bottom FAB uses the standard (mostly unchangeable) dimensions.

Answer 4

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

Answer 5

Just making a clarification to @GraceCoder 's answer that @Tim Castelijns noted well in a comment above

You should go to your res->values->dimensions.xml file

and change it to add

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

Attention: It is

design_fab_size

not

design_fab_size_mini

Answer 6

In the Android P preview, having the FAB match its parent's size stopped working for me, as the icon stopped scaling in size, making it much too small and way off-center.

The easiest method I have found as a replacement is to place the FAB in a FrameLayout, set a fair margin on the FAB so the shadow is not cut off (I used 10dp), set both's sizes to wrap_content, and then add scaleX and scaleY to the 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>

This works as expected, allows one to easily scale by specific amounts, and does not affect any other floating action buttons.