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
– BOUTERBIAT Oualid, Commented May 28, 2016 at 13:17
<style name="AppTheme" parent="Base.Theme.AppCompat.Light"> <item name="colorAccent">@color/accent</item> </style> define your color to style theme in your project — Mohammed Sameer Ahmad
– Mohammed Sameer Ahmad, Commented May 28, 2016 at 13:17
try to delete your background drawable and see what will happen — BOUTERBIAT Oualid
– BOUTERBIAT Oualid, Commented May 28, 2016 at 14:04

Rustam Samandarov · Accepted Answer · 2018-02-21 18:27:27Z

26

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

answered Feb 21, 2018 at 18:27

Rustam Samandarov

9029 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WaBayang · Accepted Answer · 2016-11-02 16:53:15Z

20

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 2, 2016 at 16:53

WaBayang

3092 silver badges6 bronze badges

2 Comments

lenooh Over a year ago

it works, but this also makes the icon transparent ... :-/

ikmazameti Over a year ago

This is XML version: app:backgroundTint="#FFFFFF" android:alpha="0.3"

Kartik Chugh · Accepted Answer · 2020-06-30 03:53:54Z

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, 2020 at 3:53

answered Dec 5, 2017 at 19:22

Kartik Chugh

1,1531 gold badge16 silver badges31 bronze badges

2 Comments

David Over a year ago

I have the same issue, but only app:elevation="1dp" helped. 0 hides the FAB at all

Kartik Chugh Over a year ago

I'm guessing it depends on different themes, APIs/SDKs, and all that?

lenooh · Accepted Answer · 2017-12-30 23:33:44Z

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 👍

Collectives™ on Stack Overflow

Android Floating Action Button Semi Transparent Background Color

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related