Android Floating Action Button Semi Transparent Background Color

Question

I want to use FAB with semi transparent background color. But I am getting a FAB with two different colors. What's the problem?

<android.support.design.widget.FloatingActionButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|left"
    android:fadingEdgeLength="5dp"
    app:borderWidth="0dp"
    app:elevation="4dp"
    app:backgroundTint="#99f03456"
    app:fabSize="normal"/>

And without any drawable.

Solution 1

Got the same issue here. I tried to set alpha transparency in xml using backgroundTint but it didn't work and resulted in the same appearance as in your screenshots (two circles).

So I set it in code like this :

floatingButton = (FloatingActionButton) findViewById(R.id.fab);
floatingButton.setAlpha(0.25f);

And the look is now consistent.

Solution 2

Set elevation and pressedTranslationZ zero to remove the effects

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onClickMyLocation"
    app:backgroundTint="@color/transparentColor"
    app:srcCompat="@drawable/ic_my_location"
    app:elevation="0dp"
    app:pressedTranslationZ="0dp"/>

Solution 3

Unless the elevation is necessary, you can remove the "inner circle" by setting it to 0:

app:elevation="0dp"

As @David notes in the comments, you may want to try 1dp if 0 does not work.