Alpha applied to floating action button creates weird circle?

Question

In my app I am using a material design floating action button. Whenever I change the backgroundTintColor property of the button to something with an alpha below 255, it creates this strange circle within the button. I have provided a picture of the button below with my xml code... Any help would be greatly appreciated.

    <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right|end"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:clickable="true"
        android:layout_margin="12dp"
        android:src="@drawable/ic_play"
        app:backgroundTint="#64a9a9a9"
        android:layout_gravity="center"
        />

</FrameLayout>

Answer 1

Its most likely because background is used to create shadow or elevation and src to show the main content of fab but you are changing it take a look at this source code of fab https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/FloatingActionButton.java?autodive=0%2F%2F