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

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

CodePudding user response：

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

CodePudding user response：

Hmmmm, a vector is technically a drawing so not sure what you mean by text color.

But maybe you could be after android:strokeColor?

But it looks like you have a drawable assigned on the button, is the text part of the drawing? Without setting it we probably can't answer your question properly.

You might be able to play around with tintMode to get the affect/color applied to the text in the image only.