Why is my FloatingActionButton icon black?
AndroidAndroid LayoutAndroidxAndroid Problem Overview
Following is the code I'm using. I'm using androidx. Every FAB has a black icon, even if it has a white color.
mylayout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<include layout="@layout/content_geral" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="24dp"
app:backgroundTint="@color/colorPrimary"
app:srcCompat="@drawable/ic_cloud_upload"
tools:ignore="VectorDrawableCompat" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
style.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Android Solutions
Solution 1 - Android
If you're using AndroidX, to change the color of the icon you must use app:tint
opposed to android:tint
<com.google.android.material.floatingactionbutton.FloatingActionButton
style="@style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:backgroundTint="@color/colorPrimary"
app:tint="@color/white"
app:srcCompat="@drawable/ic_add"
/>
Solution 2 - Android
I have an icon(vector) with multiple colors(attached file) but I cannot use app:tint="@color/white" because my icon's color turns to single color such as white and I did not need this.
So I Fixed my problem with set setting app:tint to null:
app:tint="@null"
My Icon (SVG) :
Solution 3 - Android
The FloatingActionButton
class from AndroidX uses the colorOnSecondary
theme attribute to tint its icon.
If you follow the MaterialComponents
theme definitions down into the base definitions, you'll see that the default value for colorOnSecondary
is design_default_color_on_secondary
... and that is defined as #000000
.
You can fix this by either adding the app:tint
attribute directly to your FloatingActionButton or by re-defining @color/colorOnSecondary
in your theme to be whatever you want.
Solution 4 - Android
You're changing background color of FAB, not the icon color. To change icon color, use:
android:tint
UPDATE
You can also change color programmatically:
Drawable myFabSrc = getResources().getDrawable(android.R.drawable.ic_input_add);
Drawable willBeWhite = myFabSrc.getConstantState().newDrawable();
willBeWhite.mutate().setColorFilter(Color.WHITE, PorterDuff.Mode.MULTIPLY);
myFabName.setImageDrawable(willBeWhite);
Solution 5 - Android
You are using android:backgroundTint
this property sets the background color of FAB but to change the color of FAB icon use android:tint
property like this:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:tint="@android:color/white"
android:src="@android:drawable/ic_input_add"
/>
Solution 6 - Android
In your drawable folder click on
ic_cloud_upload
And change fillColor to
android:fillColor="#FFFFFF" // #FFFFFF is for white color
This will turn your black icon to white.