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" />

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

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)

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

View more solutions

Comments

[ataravati]

This is what I was looking for. My icon was originally rtl.