How to change the fill color of the image of floating action button in android?

Question

I am learning android and wanted to know that is there any way to change the fill color of the FloatingActionButton from black to white. The vector asset I used is also in white fillcolor but still the fill color is black. I have read many articles and posts on FloatingActionButton but none of them helped me solving my problem.

Floating Action Button's xml code

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:clickable="true"
        android:tint="#ffffff"
        app:backgroundTint="#3F51B5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:rippleColor="#ffffff"
        app:srcCompat="@drawable/ic_baseline_add_24"
        android:focusable="true"
        tools:ignore="VectorDrawableCompat" />

Vector asset

<vector android:alpha="0.74" android:height="24dp"
    android:tint="#FFFFFF" android:viewportHeight="24"
    android:viewportWidth="24" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

Thanks in advance

Answer 1

In the themes.xml file (path: app -> src -> main -> res -> values -> themes.xml) change the value of the item with colorOnSecondary from @color/black to @color/white or any color of your choice but make sure the color should be in your colors.xml else add the hexadecimal color code in your themes.xml.

The themes.xml file will look like this

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.SmartNotes" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

or in the add app:tint in the Floating Action Button's xml code like given below

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        android:clickable="true"
        app:tint="#ffffff"
        app:backgroundTint="#3F51B5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:rippleColor="#ffffff"
        app:srcCompat="@drawable/ic_baseline_add_24"
        android:focusable="true"
        tools:ignore="VectorDrawableCompat" />