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>

Gemperle

Add app:borderWidth="0dp" to layout. – Inwrought

possible duplicate of FAB - square on pre Lollipop and without shadow on Lollipop – Inwrought

is it resolved ? or what is the behaviour you are expecting? – Fisher

Answer 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.

Bon

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

Answer 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" />

Laforge

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

Answer 3

just add app:borderWidth="0dp"

Fatidic

Answer 4

simply setting app:borderWidth="0dp" resolve the issue.

Hawkinson