Why is my floating action button not displaying properly?

Question

My floating button image looks like this

It's a smaller button inside a larger circle, How do I fix this?

layout file:

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

vector code:

  <vector android:height="50dp" android:viewportHeight="24dp"
    android:viewportWidth="24dp" android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#FF000000" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM17,13h-4v4h-2v-4L7,13v-2h4L11,7h2v4h4v2z"/>

</vector>

Answer 1

I answered your previous question so I think I have realised what you missed here. Have a look at this image. You have accidentally added the Add circle. Add the selected one with 24dp or 48dp with white color it will work]1