Android: Create bigger Floating Action Button with bigger icon

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 cr

Answer 1

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 2

Now you can easily custom fab size, just add

        app:fabCustomSize="32dp"

like

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

Answer 3

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

Answer 4

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

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