How to specify RTL specific drawables
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
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
insidedrawable-*
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
insidedrawable-*
contain-->
arrow_right.png
insidedrawable-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!
There's an option to auto-mirror the drawable. Check autoMirrored attribute.