Floating Action Button with square shape

Question

When I set a color to my fab, it looks like so:

My layout xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity$PlaceholderFragment">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

Also the color doesn't change. Can anyone help me in understanding what I am doing wrong?

I also tried with a @color link but it crashed, with the background of a drawable (ex. android:background="@drawable/fab_background") nothing happens.

Here is the drawable fab_background.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <ripple android:color="@color/fab_color_1_muted">
        <item>
            <shape>
                <solid android:color="@color/fab_color_1" />
            </shape>
        </item>
    </ripple>
</item>

Solution 1

Use

app:backgroundTint="@android:color/holo_green_dark"

(for example) to set color of fab. Result below. Taken from this -tested- code snippet.

Also edit : "strange green color" should come from your accent color. That's the color fab takes by default.

Solution 2

Use this code in your xml

app:borderWidth="0dp"

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    app:borderWidth="0dp"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

Comments

[SMKS]

Using the code that is linked worked for me. Thanks! That green color is super cool.

[Bryan Bryce]

This was fixed in v22.2.1, no need to do the anymore.