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

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.

Answer 2

For changing the fab size use

app:fabCustomSize="70dp"

And for the icon size

app:maxImageSize="50dp"

Example

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/button_start"
            style="@style/Widget.MaterialComponents.FloatingActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:backgroundTint="@android:color/holo_blue_bright"
            app:fabCustomSize="70dp"
            app:layout_anchor="@id/bottom_app_bar"
            app:rippleColor="@android:color/holo_blue_dark"
            app:srcCompat="@drawable/ic_play"
            app:layout_anchorGravity="center|top"
            android:focusable="true"
            app:maxImageSize="40dp"
            app:tint="@color/white_overlay_1"
            />