Android: Create bigger Floating Action Button with bigger icon

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.


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:

enter image description here

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