Android: Floating Button Icon is not centred

Question

I'm trying to create a floating button in my app. The button is there, but the image in the button is a bit upwards (see image).

I can't figure out what's wrong with it. Below is part of the XML for floating button.

<android.support.design.widget.FloatingActionButton         android:id="@+id/buttonUp"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginRight="16dp"         android:layout_marginTop="480dp"         android:clickable="true"         android:scaleType="center"         android:src="@drawable/btn_back_to_top_3x"         app:layout_anchor="@id/layout"         app:layout_anchorGravity="bottom|right|end"         app:backgroundTint="@android:color/background_light"         app:fabSize="normal" /> 

The button is showing where I wanted it. The only problem seems to be the image inside isn't center. Why is this happening?

EDIT: After some more looking around I realized the image itself was having problem where the image isn't actually centered and there are space at the bottom side (which cause the image to being push upward).

Answer 1

I have faced the same problem. the following solution have worked for me

app:fabCustomSize="40dp" 

Answer 2

You should set fabCustomSize value like FAB exactly size:

<android.support.design.widget.FloatingActionButton         android:layout_width="60dp"         android:layout_height="60dp"         app:fabCustomSize="60dp"         android:src="@drawable/plus_icon"         app:rippleColor="@color/colorPrimaryDark" />