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 image

Answer 1

There's an option to auto-mirror the drawable. Check autoMirrored attribute.

Answer 2

For 17+ (4.2.x+) you can use layout direction (ld) resources qualifier, for right to left (RTL) you can use ldrtl and for left to right (LTR) you can use ldltr, e.g. you can use

res/ drawable // Default drawable-ldltr // LTR drawable-ldrtl // RTL

Also as any other qualifier you can combine it with many others e.g. drawable-ldrtl-xhdpi, please note how ldrtl comes before xhdpi otherwise aapt will complain.

And as @Dennis mentioned from 19+ (4.4+) it gets easier as you can use autoMirrored

Answer 3

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!