Search code examples
androidiconsdrawableright-to-leftandroid-vectordrawable

Right to left check arrow


I need right to left check arrow like the second arrow in picture for my background drawable in android

check arrow image

   I need to rotate left to right check arrow vector icon 
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
          android:width="24dp"
           android:height="24dp"
          android:viewportWidth="24.0"
          android:viewportHeight="24.0"
            >
        <path
        android:fillColor="#FFFFFFFF"
         android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-     1.4,-1.4L9,16.2z"/>

    </vector>

Solution

  • A simple way to flip an existing VectorDrawable like this is to scale it using a negative number.

    The <group> tag of a VectorDrawable is where we can play with the scaleX and scaleY properties. Using these properties, a value of 1 is full size and a value of 0 is scaled down to nothing; 2 would be double the size, 0.5 would be half size etc.

    If we use a negative number it shrinks all the way down to zero, then starts increasing in size in the opposite direction. So in your example, to flip the check-mark horizontally we can use:

    <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="-1">
            <path
                android:fillColor="#FFFFFFFF"
                android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z" />
        </group>
    </vector>
    

    We wrapped the path in a <group> tag and gave it a scaleX value of -1, meaning the normal size but in the opposite direction. Also the pivotX value is 12, this is because the full width of your viewport is 24, and we want to flip the icon right around the centre line.

    Which transforms this:

    normal check-mark

    Into this:

    flipped check-mark

    Edit to add:

    I see that your question is tagged with right-to-left, as in for languages which are read from right to left. The answer above may not be what you wanted in this case, so here's an alternative:

    If you want the VectorDrawable to appear the original way when being used on a left-to-right device, but the opposite way on a right-to-left device then there is a specific property to enable this: autoMirrored.

    By setting autoMirrored to true the drawable will show the default way in left-to-right mode but will be horizontally flipped when in right-to-left mode(but note this is only supported on API 19 and up):

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0"
        android:autoMirrored="true">
    
        <path
            android:fillColor="#000000"
            android:pathData="M9,16.2L4.8,12l-1.4,1.4L9,19 21,7l-1.4,-1.4L9,16.2z" />
    
    </vector>