Android mirror vector drawable

Question

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 vector. Is this possible in xml and how?

I use the drawable in two Floating Action Button, one for next the other for previous.

Edit here is the fab button's XML. I tried already rotation and scale, but it didn´t work

<android.support.design.widget.FloatingActionButton
    android:id="@+id/previous"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="start|bottom"
    android:layout_marginBottom="0dp"
    android:layout_marginEnd="80dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    android:src="@drawable/next_prev_24dp"
    app:layout_anchor="@id/next"
    app:layout_anchorGravity="left" />

Possible duplicate of [Android - flip image in xml](http://stackoverflow.com/questions/9338447/android-flip-image-in-xml) — Ritave, Mar 31 '16 at 09:42
I saw this already but it didn´t work for my fab. I added the xml of the fab, maybe something is wrong in there? — reebow, Mar 31 '16 at 09:46
Related: mirroring arbitrary Drawable programmatically https://stackoverflow.com/a/48502102/3050249 — Miha_x64, Jul 22 '20 at 22:03

Inzimam Tariq IT · Accepted Answer · 2018-01-24T15:43:36.920

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

.

Ravi Vaniya · Answer 2 · 2019-07-04T07:47:52.327

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 Option Enable 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. :)

score 12 · Answer 3 · answered Oct 07 '21 at 16:16

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)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="30"
    android:viewportHeight="30">
    
    <group
        android:scaleX="-1"
        android:translateX="30"> <!-- viewportWidth here-->
        
        <path
            android: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>

This is what I was looking for. My icon was originally rtl. – ataravati Nov 12 '21 at 19:04 — ataravati, Nov 12 '21 at 19:04

score 10 · Answer 4 · edited Feb 10 '19 at 12:14

10

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

edited Feb 10 '19 at 12:14

Timisorean

1,388
7
20
30

answered Feb 10 '19 at 10:31

Amr263

143
2
8

score 0 · Answer 5 · answered Jul 13 '20 at 16:12

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

<vector android: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">
    <path android: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 :

<ImageView
      android: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 mirror vector drawable

5 Answers5

Linked