status bar notification icon stays black whatever I do

Question

I started making a foreground service and according to the documentation I need to associate with any foreground service a notification to make the user keep track that my service is working.

my problem is that I chose an icon, created it as an image asset and chose white to be its color, but whatever values I change in it's xml it appears black (I've literally changed every color value to white and still it's black).

I wonder if the problem cause is the application theme (there's some theme attribute I have to override) or if there's an attribute missing in the image xml, I know that for Lollipop and above all icons must be white but what about pre-Lollipop ? and what if the status bar color is white how to change icon color to black then ?

I'm using Theme.MaterialComponents on api 18

my image asset xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="@color/white"
    app:tint="@color/white"
    android:alpha="0.8">
  <group android:scaleX="1.2"
      android:scaleY="1.2"
      android:translateX="-2.4"
      android:translateY="-2.4">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
    <path
        android:fillColor="@android:color/white"
        android:pathData="M12.5,7H11v6l5.25,3.15 0.75,-1.23 -4.5,-2.67z"/>
  </group>
</vector>

my notification code in service

NotificationCompat.Builder builder = new NotificationCompat.Builder(this, CHANNEL_ID)
            .setSmallIcon(R.drawable.ic_clock)
            .setContentTitle(getText(R.string.starting_notification_title))
            .setContentText(getText(R.string.starting_notification_desc))
            .setPriority(priority);
Notification notification = builder.build();
startForeground(startId,notification);

---

update

(normal) themes.xml

   <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.FacebookTest" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</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/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
    <style name="number_picker_custom_style" parent="@android:style/Theme" />
    <style name="Theme.FacebookTest.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.FacebookTest.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.FacebookTest.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
    <style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>
    </resources>

(Night) theme.xml

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

    <style name="Theme.FacebookTest.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.FacebookTest.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.FacebookTest.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

App manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.pretest">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <!--android:maxSdkVersion="28"
    android:hardwareAccelerated="false"
        android:largeHeap="true"-->
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MaterialComponents">
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>

        <activity
            android:name="com.example.pretest.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.FacebookTest.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <receiver android:name=".services.BootBroadcastReceiver"  android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED"/>
            </intent-filter>
        </receiver>
        <service android:name=".services.AlarmSettingService" android:exported="false"/>
        <receiver
            android:name=".services.AlarmReceiver"
            android:enabled="true"
            android:exported="true" />
    </application>

</manifest>

---

update

My drawable files (I'm using the ic_clock which doesn't seem to have any version code beside it)

Answer 1

So I went through your code & found out that problem is the color resource you're using. If you hover over @android:color/white

You'll see a message appears saying:

Resource references will not work correctly in images generated for this vector icon for API < 21; check generated icon to make sure it looks acceptable

So you'll have change such color resources to something direct color code. e.g android:fillColor="#FFFFFF"

Your final drawable would look something like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:width="24dp"
    android:height="24dp"
    android:alpha="0.8"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <group
        android:scaleX="1.2"
        android:scaleY="1.2"
        android:translateX="-2.4"
        android:translateY="-2.4">
        <path
            android:fillColor="#FFFFFF"
            android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z" />
        <path
            android:fillColor="#FFFFFF"
            android:pathData="M12.5,7H11v6l5.25,3.15 0.75,-1.23 -4.5,-2.67z" />
    </group>
</vector>

Answer 2

along with Mayur's solution which got my attention to a warning that I never noticed.

I found the problem as I checked the drawables-*dpi folders, they weren't getting updated according to what the xml says, it also seems that the Notification.setSmallIcon uses one of the drawables-*dpi instead of following what the xml says.
so simply I deleted the clock resource and created it from the beginning to get newly updated *dpi.png images.

I'm not sure if that was just the image asset problem of not updating the *dpi.png images, or is it an api behaviour in setSmallIcon method but that solved my problem.