How to set border and background color of Floating Action Button with transparency through xml?

Question

I have tried this solution: https://stackoverflow.com/a/54074154/10299002 which works great as long as the FAB is over a dark background. However, it seems to break when it passes over a white background. What might be the issue?

Here is my FAB:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:theme = "?appAccentStyle"
        android:id="@+id/button_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:layout_margin="16dp"
        app:backgroundTint="?colorFloatingActionButtonBorder"
        android:src="@drawable/ic_arrow_downward_24dp"
        android:tint="?colorAccent"
        android:backgroundTint="?colorFloatingActionButtonBackground"
        tools:visibility="visible"
        android:layout_gravity="end|bottom" />

This is the style being applied:

<style name="LimeColorAccent">
        <item name="colorAccent">@color/Lime</item>
        <item name="appAccentStyle">@style/LimeColorAccent</item>
        <item name="colorFloatingActionButtonBorder">@color/LimeTranslucentBorder</item>
        <item name="colorFloatingActionButtonBackground">@color/LimeTranslucent</item>
    </style>

And here are the colors used:

<color name="Lime">#FFCDDC39</color>
<color name="LimeTranslucentBorder">#4cCDDC39</color>
<color name="LimeTranslucent">#26CDDC39</color>

Output:

Edit:

Tried this solution: https://stackoverflow.com/a/57307389/10299002

My fab.xml: (Same as in Solution)

My FloatingActionButton:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/button_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_arrow_downward_24dp"
        android:background="@drawable/fab"
        android:layout_margin="16dp"
        android:layout_gravity="end|bottom"
        app:fabSize="normal"
        app:backgroundTint="#55990000"
        app:borderWidth="0dp"
        app:elevation="2dp"
        tools:visibility="visible" />

Output: (Inner Circle Still Broken)

score 3 · Answer 1 · answered Aug 01 '19 at 12:29

3

I used you code and directly used color. and found two result with black background and white background .

and the code:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/button_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        android:layout_margin="16dp"
        app:backgroundTint="#4cCDDC39"
        android:src="@drawable/ic_action_profile"
        android:tint="@color/colorAccent"
        app:borderWidth="2dp"
        android:backgroundTint="#26CDDC39"
        tools:visibility="visible"
        android:layout_gravity="end|bottom" />

answered Aug 01 '19 at 12:29

Tariqul Islam

680
6
14

Is adding app:borderWidth="2dp" the only change you've suggested? – Noor Binte Amir Aug 02 '19 at 11:09
borderWidth only for understanding the border is showing or not. I changed the style and add directly color element. Because i thought may be style has problem . – Tariqul Islam Aug 02 '19 at 11:10
I removed the style and added the colors directly like you have. My inner circle still appears broken over the white background. – Noor Binte Amir Aug 02 '19 at 11:14
Copy pasted it exactly. Still get the broken inner circle. – Noor Binte Amir Aug 02 '19 at 11:42
what is your android:background="@drawable/fab"? is it a xml?? – Tariqul Islam Aug 02 '19 at 11:45
Yes it is. Same as used here: https://stackoverflow.com/questions/33005929/how-to-change-android-design-support-library-fab-button-border-color/33008431#33008431 – Noor Binte Amir Aug 02 '19 at 13:18
Dont use it. Just add border width it will be solved. Please remove the custom background. And test it – Tariqul Islam Aug 02 '19 at 18:08

score 0 · Answer 2 · answered Aug 01 '19 at 10:52

0

You should create your own FAB style extending com.google.android.material.floatingactionbutton.FloatingActionButton as parent, to properly custom your button.

Check out this answer, it should help you. The idea is to create your own border. FloatingActionButton only provides app:borderWidth to play with border thickness.

answered Aug 01 '19 at 10:52

Corentin Houdayer

988
2
8
19

The border is being applied in the color I want. My question is why the inner circle appears smaller and deshaped over a white background. – Noor Binte Amir Aug 02 '19 at 11:11
I have edited my answer to show output of your solution. – Noor Binte Amir Aug 02 '19 at 11:41

How to set border and background color of Floating Action Button with transparency through xml?

2 Answers2

Linked