How to specify RTL specific drawables

Question

I have few images that looks different on right-to-left. Is it possible to create rtl specific drawable directory or some rtl post-fix for file names to auto-load relevant images? Looks like ldrtl post-fix, added from 17 lvl, is good only for layouts directory.

Answer 1

It's pretty late to answer this question, but I want to share a method that I just found out. I will first recap what is mentioned by the others.

---

Let's start with a specification.

We need to build something like:

login --> take picture --> win prize

In RTL, it will become:

ezirp niw <-- erutcip ekat <-- nigol

So the big question is how we flip the drawable arrow, let's call it arrow_right.png: --> and in RTL you want it to be like this: <--

---

For Android >=19

As others mentioned, we can use the autoMirrored=true flag. (available from API19)

The usage:

<ImageView ...
    src="@drawable/arrow_right"
    autoMirrored="true" />    

The assets:

   ├── drawable-xxxhdpi
        └── arrow_right.png
   ├── drawable-xxhdpi
        └── arrow_right.png
   ├── drawable-xhdpi
        └── arrow_right.png
   ├── drawable-hdpi
        └── arrow_right.png
   ├── drawable-mdpi
        └── arrow_right.png

Note that:

• arrow_right.png inside drawable-* contain -->

Remarks: The only downside is that it's not backward compatible.

---

For Android <19, Option 1

Like others have pointed out, you can use the ldrtl option. (doc: Providing Resources)

The usage:

<ImageView ...
    src="@drawable/arrow_right" />

The assets:

   ├── drawable-xxxhdpi
        └── arrow_right.png
   ├── drawable-xxhdpi
        └── arrow_right.png
   ├── drawable-xhdpi
        └── arrow_right.png
   ├── drawable-hdpi
        └── arrow_right.png
   ├── drawable-mdpi
        └── arrow_right.png
   ├── drawable-ldrtl-xxxhdpi
        └── arrow_right.png
   ├── drawable-ldrtl-xxhdpi
        └── arrow_right.png
   ├── drawable-ldrtl-xhdpi
        └── arrow_right.png
   ├── drawable-ldrtl-hdpi
        └── arrow_right.png
   ├── drawable-ldrtl-mdpi
        └── arrow_right.png

Note that:

• arrow_right.png inside drawable-* contain -->
• arrow_right.png inside drawable-ldrtl-* contain <--.

Remarks: There is nothing wrong with this method, except you need to prepare like 10x assets files. So it leads me to find out the next option.

---

For Android <19, Option 2

This option will be using the rotationY="180" attributes. (available from API11)

If you set rotationY="180" to ImageView, --> will turn into <--.

So we can do something like the following.

The usage:

<ImageView ...
    src="@drawable/arrow_right"
    android:rotationY="@integer/angle_rtl_180" />

The assets:

  drawable
   ├── drawable-xxxhdpi
        └── arrow_right.png
   ├── drawable-xxhdpi
        └── arrow_right.png
   ├── drawable-xhdpi
        └── arrow_right.png
   ├── drawable-hdpi
        └── arrow_right.png
   ├── drawable-mdpi
        └── arrow_right.png
   ├── values
        └── integers.xml
   ├── values-ldrtl
        └── integers.xml

Note:

• arrow_right.png contains -->
• values/integers contains <integer name="angle_rtl_180">0</integer>
• values-ldrtl/integers contains <integer name="angle_rtl_180">180</integer>

Remarks: You only need 1 set of assets, and this solution can be used from API 11, and the usage is simple enough by simply adding android:rotationY="@integer/angle_rtl_180".

Hope it helps!