26

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" />
muad-dweeb
  • 995
  • 1
  • 9
  • 24

3 Answers3

38

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 :)

muad-dweeb
  • 995
  • 1
  • 9
  • 24
28

You can use the following steps:

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


2). Select Drawable Tab ( If not selected )
enter image description here


3). Click "+" icon and select Import Drawables
enter image description here


4). Select the files and click OK.
enter image description here


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


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.
enter image description 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.

Himanshu Bansal
  • 2,003
  • 1
  • 23
  • 46
2

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

Desilio Neto
  • 484
  • 5
  • 4