My FloatingActionButton has some weird lines coming out of it at 4.4 and below

Question

As the name says, my FloatingActionButton has some weird lines coming out of it only at 4.4 or lower. It works great on Lollipop.

This is a picture of the problem:

The playback image does not contain these lines. 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 value to 0dp, so I think I will only do this for older phones

Answer 1

Your problem is that you are making the FloatingActionButton unexpected size. FloatingActionButton in the support library supports only two sizes and must be set using the fabSize attribute.

You must change:

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

:

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

If you need 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