My FloatingActionButton has some weird lines coming out of it on 4.4 and lower

Question

As the title says, my FloatingActionButton has some weird lines coming out of it only on 4.4 or lower. On Lollipop it works fine.

This is a picture of the issue:

The play image doesn't have those lines in it. My xml:

<android.support.design.widget.FloatingActionButton
            android:id="@+id/play"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:src="@drawable/ic_av_play_arrow"
            app:borderWidth="0dp"
            app:elevation="6dp"
            app:layout_anchor="@+id/image"
            app:layout_anchorGravity="center_vertical|right|end"
            app:rippleColor="@color/color_primary_light" />

So what am I doing wrong?

EDIT: goes away if I set my elevation to 0dp so I think I'll do that just for older phones

Answer 1

Your problem here is that you're making the FloatingActionButton an unexpected size. The FloatingActionButton in the support library only supports two sizes, and it must be set using the fabSize attribute.

You should change:

<android.support.design.widget.FloatingActionButton
            android:id="@+id/play"
            android:layout_width="48dp"
            android:layout_height="48dp"

to be:

<android.support.design.widget.FloatingActionButton
            android:id="@+id/play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

If you want a smaller version:

<android.support.design.widget.FloatingActionButton
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fabSize="mini"

Source: http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html