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

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 2

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.