Android, FAB using android support design is square in API below 21

Question

I'm using android support design library and everything looks good on API-21 but not on API-16! The FAB (Floating action button) is square! This is my layout code:

<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res/com.example.recycleviewtest"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/dl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#6fff"
android:fitsSystemWindows="true" >

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp" />

            <android.support.design.widget.TextInputLayout
                android:id="@+id/textInputLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <EditText
                    android:id="@+id/editName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Enter your name:"
                    android:singleLine="true" />
            </android.support.design.widget.TextInputLayout>
        </RelativeLayout>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="30dp"
        android:src="@android:drawable/ic_input_add" />
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.NavigationView
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/navigation_header"
    app:itemBackground="@drawable/abc_list_pressed_holo_light"
    app:itemTextColor="@color/abc_primary_text_material_light"
    app:menu="@menu/main" />

I don't set anything in my java for FAB and This is the result!

My device for test is Samsung galaxy note 10.1 with android 4.1.2 (API-16)

Answer 1

This is a bug in the current support design v22.2.0 library.

Until it's fixed, try adding app:borderWidth="0dp" to your FAB as a workaround:

<android.support.design.widget.FloatingActionButton
    ...
    app:borderWidth="0dp" />