Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RTL support for vector drawable for below API 19

I have a vector drawable.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
    <path
        android:fillColor="#65666a"
        android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z" />
</vector>

I have added android:autoMirrored="true" attribute to support RTL, but it is only used in API 19 and higher. But my minimum API level is API 17. How can I add backward comparability? Any help would be appreciated.

like image 216
Alex Chengalan Avatar asked Oct 23 '16 09:10

Alex Chengalan


Video Answer


1 Answers

Here's how I would do it, instead of using autoMirrored, use this workaround to do your own "automirror".

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group
        android:pivotX="12"
        android:scaleX="@dimen/rtl_automirror_scale">
        <path
            android:fillColor="#65666a"
            android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z" />
    </group>
</vector>

Here I've deleted the autoMirror attribute and instead wrapped the vector path in a <group> tag with a pivotX point of 12 (ie. the middle of the drawable) and a scaleX pointing to a Dimen resource.

In your normal values folder you would provide the resource as:

<resources>

    <item name="rtl_automirror_scale" format="float" type="dimen">1</item>

</resources>

A value of 1 for the scale means no change, just the normal drawable.

However you can then provide an alternate values resource for RTL devices in values-ldrtl:

<resources>

    <item name="rtl_automirror_scale" format="float" type="dimen">-1</item>

</resources>

A value of -1 means the VectorDrawable will be flipped horizontally for RTL devices.

Then whenever you have other VectorDrawables which need to be flipped, just wrap them in a group tag as above, pointing to the same dimen.

like image 67
Lewis McGeary Avatar answered Sep 21 '22 01:09

Lewis McGeary