Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fliping Drawable Image in Vector Drawable

Tags:

I have found this vector drawable resource here. What I would like to do is flip it so the X is on the other side.

I managed to do this in the layout, like in this example by adding: android:scaleX="-1" to my ImageView and it works.

Now I would like to change it directly in the Vector Drawable, but when I try the code below it is invisible.

account_remove.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:width="24dp"     android:height="24dp"     android:viewportHeight="24"     android:viewportWidth="24">      <group         android:name="rotationGroup"         android:scaleX="-1" >          <path             android:fillColor="#FFFFFF"             android:pathData="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />     </group> </vector> 

And when I add:

android:pivotX="10.0" android:pivotY="10.0" 

to rotationGroup it is tilted to the right.

What values should I add to my rotationGroup to make it work correctly?

like image 802
Banana Avatar asked May 04 '17 12:05

Banana


People also ask

How do I rotate a vector image?

How to rotate the whole vector image. To rotate the whole of your vector image by 90 degrees clockwise click the Vector Edit Menu > Modify > Rotate > 90 Degrees Clockwise. You can also rotate a selection of a vector image.

How do I flip an image in Android Studio?

With the image open in the editor, switch to the “Tools” tab in the bottom bar. A bunch of photo editing tools will appear. The one that we want is “Rotate.” Now tap the flip icon in the bottom bar.

What is VectorDrawable?

A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector drawable is image scalability.


1 Answers

You were almost doing it, just with the wrong pivot point.

It needs to flip around the centre of the image, so looking at the viewport the full width is 24, so the pivot point needs to be at 12.

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:width="24dp"     android:height="24dp"     android:viewportHeight="24"     android:viewportWidth="24">      <group         android:name="rotationGroup"         android:pivotX="12"         android:scaleX="-1" >          <path             android:fillColor="#FFFFFF"             android:pathData="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />     </group> </vector> 
like image 94
Lewis McGeary Avatar answered Sep 24 '22 15:09

Lewis McGeary