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.

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

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