'How to fix image view icon color changes in dark mode and lite mode of the device
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>
Solution 1:[1]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Vasant Raval |