Android: Floating Button Icon is not centred

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

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

app:fabCustomSize="40dp"

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

I just set the app:fabCustomSize=”40dp” (needed size) and I set the height and width as wrap_content then issue solved

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

You have to add only app:fabCustomSize="40dp" it's work for me

In addition to above answers, Whatever size you set for FAB, set same to fabCustomSize

for example, if width and height are "48dp" then set fabCustomSize to "48dp":

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:backgroundTint="@color/grey"
    android:src="@drawable/ic_baseline_arrow_back"
    app:fabCustomSize="48dp" />

Here it is about setting three options together to adjust the navigation button with icon size

1. layout width & height.

2. change icon size inside the nav.Button ~ Using (maxImageSize="..dp").

3. change fab size ~ Using (app:fabCustomSize="..dp") OR (app:fabSize="") You can try three options here ("mini" or "auto" or "normal"). For example:

   <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:maxImageSize="20dp"
    app:fabSize="mini"/>
   

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"

This usually arises when using custom-sized floating action button(FAB), because android by default, only supports 40dp FAB. The best way is to override it, by telling your view that you are using a custom sized FAB, and give the same size as value to it too.

For example, while using a 60dp x 60dp FAB, this will do the trick.

app:fabCustomSize="60dp"

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

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

Use layout width and height of floatingActionButton as wrap-content. It will solve all the problems .

 <com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/iconPath"
    app:fabCustomSize="50dp"
     />

Customize size as you want.