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.

try to create this color in your `color.xml` and use `app:backgroundTint="@color/yourcolor"` — BOUTERBIAT Oualid, May 28 '16 at 13:17
try to delete your background drawable and see what will happen — BOUTERBIAT Oualid, May 28 '16 at 14:04

score 20 · Answer 1 · answered Feb 21 '18 at 18:27

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

score 19 · Answer 2 · answered Nov 02 '16 at 16:53

19

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.

answered Nov 02 '16 at 16:53

WaBayang

199
1
6

7

it works, but this also makes the icon transparent ... :-/ – lenooh Dec 30 '17 at 22:28

Kartik Chugh · Answer 3 · 2020-06-30T03:53:54.693

10

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.

edited Jun 30 '20 at 03:53

answered Dec 05 '17 at 19:22

Kartik Chugh

1,104
14
28

1

I have the same issue, but only `app:elevation="1dp"` helped. 0 hides the FAB at all – David Jul 29 '18 at 18:30
I'm guessing it depends on different themes, APIs/SDKs, and all that? – Kartik Chugh Jul 31 '18 at 03:09

score 0 · Answer 4 · answered Dec 30 '17 at 23:33

I was able to solve the problem using Jerzy Chalupski floating action button: https://github.com/futuresimple/android-floating-action-button

To use in your project add:

compile 'com.getbase:floatingactionbutton:1.10.1'

to your dependencies,

and then add:

<com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/my_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_marginRight="8dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:onClick="myMethod"
            fab:fab_icon="@drawable/my_icon"
            fab:fab_colorNormal="@color/my_transparent_color"
            fab:fab_colorPressed="@color/white"
            />

into your XML file.

It works

Android Floating Action Button Semi Transparent Background Color

4 Answers4

Linked