xml – Android Floating Action Button Semi Transparent Background Color-ThrowExceptions

Exception or error:

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

enter image description here

And without any drawable.

enter image description here

How to solve:

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.

###

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

###

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

app:elevation="0dp"

###

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 👍

Leave a Reply

Your email address will not be published. Required fields are marked *