Search code examples
androidright-to-leftandroid-vectordrawable

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.


Solution

  • 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.