Use a different image if Dark Mode is enabled on Android

Question

I have two variants of a PNG, one where the drawn text is black and one where it is white. By default, on a white background, I am using the black image variant, but when the system dark mode is enabled the image becomes nearly invisible against the background.

How can I instruct my app to use the alternate image when dark mode is enabled?

The image is set in the activity's XML:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.me.some_app.someActivity">

    <ImageView
        android:id="@+id/Logo"
        android:layout_width="176dp"
        android:layout_height="219dp"
        android:contentDescription="@string/LogoDescription"
        app:layout_constraintBottom_toTopOf="@+id/divider"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo_black" />

Answer 1

I solved this with the following process:

1. Create a new directory at app/src/main/res/drawable-night, mimicking the already existing path at app/src/main/res/drawable.
2. Move the white variant image into the new drawable-night directory, changing the name from logo_white.png to logo.png.
3. Rename the black variant image in the standard drawable directory from logo_black.png to logo.png
4. Update the ImageView drawable reference from @drawable/logo_black to @drawable/logo

It appears that Android recognizes the night variant directory and flips accordingly. Very nice :)

Answer 2

You can use the following steps:

1). Go to Resource Manager from Left Side Bar or View > Tool Windows > Resource Manager

2). Select Drawable Tab ( If not selected )

3). Click "+" icon and select Import Drawables

4). Select the files and click OK.

5). Rename both files to same name. baseline_feedback_20 in my case ( Ignore the warning for now )

6). Click Add another qualifier, select Night Mode with value Day Time for Light mode and Night Time for Dark Mode.

You can read about Qualifiers more here.

7). Click Next then Import and you are done.

You can use the resources as usual @drawable/logo or @drawable/baseline_feedback_20 in my case and the system will fetch the file as per the selected mode.

Answer 3

I have simple solution for it, and you need only a set of images, the color doesn't matter, on the component you'll use the image set the following attribute:

android:tint="@color/you_desired_color" or app:tint="@color/you_desired_color" depends of component.

For example

<ImageView
        android:id="@+id/icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:tint="@color/you_desired_color" />

In res folder you need to have the following folders values and values-night, each of them with its respective themes.xml and colors.xml