Android Mirror Vector Drawable

August 31, 2023 Post a Comment

I use a material icon (ic_play_arrow_black_24dp), imported it with the vector studio. Now I want the arrow to point in the other direction as well, without creating a second vecto

Solution 1:

For those who Use ImageView or TextView or EditText Scale works perfectly. Use

android:scaleX="-1"//To flip horizontally or
android:scaleY="-1"//To flip vertically

OR Try

android:rotationX="180"// for horizontal
android:rotationY="180"// for vertical

OR Simply rotation="180" for vertical

android:rotation="180"// for vertical

Edit: Additional If you want to flip/mirror icons/drawable when changing language RTL/LTR ("Right To Left"/"Left To Right"), there is a nice way of doing so in android vector drawable just check the ckeckbox Enable auto mirroring for RTL layout.

=> Right Click on drawable folder => New => Vector Asset => Select drawable => check the Checkbox

Solution 2:

I am using AndroidStudio 3.0.1 in Windows 10.

well, there is no need to create another vector image, you can do it with one single vector image just make sure you do the following step while importing the vector image

So, do usual step to create vector_drawable,

in case some one don't know,

than here it is..

1.) Right Click on your package of your app

2.) Than navigate to New => Vector Asset

3.) Than choose your desired icon, in @reebov case it will be ic_arrow_back_black_24dp

4.) You will find Checkbox with the OptionEnable auto mirroring for RTL layout.

EDIT

You can also Set android:autoMirrored="true" in your XML vector file

see below image for more info

and your are done. :)

Solution 3:

Set android:autoMirrored="true" in your XML vector file,

Solution 4:

There is an alternate way to mirror a drawable. You can modify the xml file to add a <group> tag to mirror the image (vertically here)

<vectorxmlns:android="http://schemas.android.com/apk/res/android"android:width="24dp"android:height="24dp"android:viewportWidth="30"android:viewportHeight="30"><groupandroid:scaleX="-1"android:translateX="30"><!-- viewportWidth here--><pathandroid:fillColor="#FFF"android:fillType="evenOdd"android:pathData="M14.667 4V0L9.333 5.333l5.334 5.334v-4c4.413 0 8 3.586 8 8a7.827 7.827 0 0 1-.934 3.733l1.947 1.947a10.574 10.574 0 0 0 1.653-5.68C25.333 8.773 20.56 4 14.667 4zm0 18.667c-4.414 0-8-3.587-8-8 0-1.347.333-2.627.933-3.734L5.653 8.987A10.574 10.574 0 0 0 4 14.667c0 5.893 4.773 10.666 10.667 10.666v4L20 24l-5.333-5.333v4z" /></group></vector>

Solution 5:

Here is the share image vectore xml file share.xml :

<vectorandroid:height="24dp"android:tint="#FFFFFF"android:viewportHeight="24.0"android:viewportWidth="24.0"android:width="24dp"xmlns:android="http://schemas.android.com/apk/res/android"><pathandroid:fillColor="#FF000000"android:pathData="M10,9V5l-7,7 7,7v-4.1c5,0 8.5,1.6 11,5.1 -1,-5 -4,-10 -11,-11z"/></vector>

Here is the image in xml layout file :

<ImageViewandroid:layout_width="32dp"android:layout_height="32dp"android:src="@drawable/share"android:scaleX="-1"android:scaleType="fitCenter"/>

This line is used to mirror a vector image :

   android:scaleX="-1"

Android Coder