How to center image in FloatingActionButton behind transparent background?

Just Write in your .Xml, inside your Fab

android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabCustomSize="your-size"
app:maxImageSize="your-size"

It will work fine!!


Image is positioned properly but the shadow in background no. If you press the button then it is even worse.

transparent floating action button over oragne background

To minimaze this effect you can change elevation and pressedTranslationZ

      app:elevation="1dp"
      app:borderWidth="0dp"
      app:pressedTranslationZ="1dp"

And you will get:

effect after changing elevation and pressedTranslationZ


Use this attribute: app:fabCustomSize="60dp" make this equal to height and width of your fab. This helped me. This was my code.

<com.google.android.material.floatingactionbutton.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="60dp"
    android:layout_height="60dp"
    app:fabCustomSize="60dp"
    android:backgroundTint="@color/colorPrimary"
    android:src="@drawable/ic_insert_drive_file_24dp" />

Another way could be using android:foreground attribute instead of src and then setting android:foreground_gravity to center.


Hi, this works for me:

android:layout_width="30dp"
android:layout_height="30dp"
app:fabCustomSize="30dp"

add this line app:fabCustomSize="@dimen/my_dimension" and set the same value for these:

android:layout_width="@dimen/my_dimension"

android:layout_height="@dimen/my_dimension"