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

Reason is your image is not in the right size!!

Floating action button default circle size is 56 x 56dp , to get the best fit use that for your background image!!

If you are going for a mini one should be : 40 x 40dp

If you only want to change the Interior icon(only icon) use a 24 x 24dp icon for default size

To test this again i download an image form internet and scaled it down to 56dp and kept a small space to balance it (i am no good with Photoshop)

and added this to your FB view and made background yellow to make it clear.Let's see

out put:

This means it depends on the image that you add and its size if you want to go full background you can even use an imageButton

Refer : https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

Answer 2

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

app:fabCustomSize="40dp"

Answer 3

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

Answer 4

Best solution is not to hardcode the FAB's dimension.

Icon will be centered with attribute android:scaleType="center"

<android.support.design.widget.FloatingActionButton
                android:id="@+id/search_fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="center"
                android:layout_marginEnd="10dp"
                android:src="@drawable/fab_search_icon"
                app:backgroundTint="@color/colorPrimary"
                app:elevation="4dp"
                app:fabSize="normal"/>

Answer 5

Try to do to fix your height and width...

    android:layout_width="50dp"
    android:layout_height="50dp"

and please adjust your layout in bottom another way ..bacause here yo do

 android:layout_marginTop="480dp" 

it is not a proper way my suggestion try to set your FloatingActionButton inside Relative Layout..and set like this property..

    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"

Answer 6

Use (https://github.com/futuresimple/android-floating-action-button) and set fab:fab_icon="@drawable/ic_fab_star" to center icon