Why is my floating action button not displaying its image properly?

Question

This is what my floating action button is showing

rather that just showing the actual circle part of the image, it tries to fit the background of my .png file into the floating action button.

here is my xml code:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addToKitchenButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:layout_gravity="bottom|end"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:src="@drawable/fab_icon"
    />

how do I get it to look like this?

I've given my .png file a transparent background already, so I don't know what else I need to do. Please Help.

Thank You.

Solution

(Assuming you are using Android Studio) -- Rather than using your own custom .png for the FloatingActionButton's src, create a new vector asset with that icon. Right click your res/drawable folder in Android Studio, and then click to New -> Vector Asset.

The icon you are using is built in to Android Studio, although you could import your own vector asset if you were doing something more custom. The XML it generates will look like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>

and you can change the color in fillColor. Set your FloatingActionButton to this drawable in android:src and you're good to go.