Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to specify RTL specific drawables

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.

like image 287
Vitaliy A Avatar asked Dec 15 '13 10:12

Vitaliy A


People also ask

What is the preferred image format for the Drawables?

Supported file types are PNG (preferred), JPG (acceptable), and GIF (discouraged). App icons, logos, and other graphics, such as those used in games, are well suited for this technique.

How do you add Drawables?

Drag and drop your images directly onto the Resource Manager window in Android Studio. Alternatively, you can click the plus icon (+), choose Import Drawables, as shown in figure 3, and then select the files and folders that you want to import. Figure 3: Select Import Drawables from the dropdown menu.

What folder is Drawables directory in?

In the Android SDK documentation, all of the examples used with the @drawable/my_image xml syntax directly address images that are stored in the res/drawable directory in my project.

How do you cite Drawables in Android?

Note: A color resource can also be used as a drawable in XML. For example, when creating a state list drawable, you can reference a color resource for the android:drawable attribute ( android:drawable="@color/green" ).


1 Answers

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!

like image 51
I'm a frog dragon Avatar answered Oct 01 '22 00:10

I'm a frog dragon