Home » Android » android – My FloatingActionButton has some weird lines coming out of it on 4.4 and lower

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

Posted by: admin June 15, 2020 Leave a comment

Questions:

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:

FAB

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

How to&Answers:

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