CODEWITHSUNDEEP
androidxmlandroid-studio
Noor Binte Amir
Noor Binte Amir

Reputation: 31

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

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:

FAB correctly styles over black background FAB looks broken over white

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)

Inner Circle Still Broken

Upvotes: 1

Views: 2230

Answers (2)

Tariqul Islam
Tariqul Islam

Reputation: 704

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

enter image description here

enter image description here

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

Upvotes: 3

Corentin Houdayer
Corentin Houdayer

Reputation: 988

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.

Upvotes: 0

Related Questions