How to fix image view icon color changes in dark mode and lite mode of the device

Question

I'm trying to include icons in imageview but when the dark mode is on the color is dark and when on lite mode its shows in white, I want color to be white in both modes

Vector // icon

<vector android:height="24dp" android:tint="@color/white"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@color/white" android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

ImageView // icon included as background

<ImageView
        android:id="@+id/backArrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/ic_baseline_arrow_back_24"
        android:contentDescription="@string/todo"
        android:elevation="10dp" />

themes.xml // litemod/normal

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyAppNotFinal" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#FFFFFFFF</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/lite_grey</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/black</item>
        <!-- Customize your theme here. -->
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    </style>
</resources>

themes.xml // dark mod/night

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyAppNotFinal" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">#FFFFFFFF</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. -->
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
    </style>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="grey">#181818</color>
    <color name="lite_grey">#e2e2e2</color>
    <color name="dark_red">#bd081c</color>
    <color name="green">#0B5B37</color>
</resources>

score 2 · Accepted Answer · answered Jul 20 '21 at 06:41

Ok i got an answer to my question, acttualy my app already has dark elements and when i add a white background to an imageview or some more elements but it changes to dark grey in the dark mod of the device which i dont want ,so i got an solution to this issue

Step 1

Delete the night/dark theme.xml in the values

Step 2

In the normal/light theme.xml in the values change the

<style name="Theme.MyAppNotFinal" parent="Theme.MaterialComponents.DayNight.NoActionBar">

to

<style name="Theme.MyAppNotFinal" parent="Theme.MaterialComponents.Light.NoActionBar">

Step 3

In the same theme.xml // light/normal theme

add this line

 <item name="android:forceDarkAllowed" tools:targetApi="q">false</item>

inside the style

like this

<style name="Theme.MyAppNotFinal" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>

this method worked for me if anyone still have some issues please check the bellow question it has many answers hope it will work for you

Question

How to fix image view icon color changes in dark mode and lite mode of the device

1 Answers1