I have following code for my vector:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
and Output is:
But I want this image in all direction as below:
Added <vector>
tag in between <rotate>
but its giving me warning like Element vector is not allowed here
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<vector
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
</rotate>
I have also tried to put <bitmap>
tag in between <rotate>
as below:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<bitmap app:srcCompat="@drawable/ic_round" />
</rotate>
but its giving me 'src' attribute should be defined and I can't use src
with vector images.
Any solution to use this (one image) with all angle?
NOTE: I want to use this image in
<TextView>
drawable.
Normally rotating vectors involves matrix math, but there's a really simple trick for rotating a 2D vector by 90° clockwise: just multiply the X part of the vector by -1, and then swap X and Y values.
To change the photo's perspective, tap Transform . Drag the dots to the edges of your desired photo or tap Auto. To rotate a photo 90 degrees, tap Rotate . To make minor adjustments to straighten the photo, use the dial above Rotate .
Show activity on this post. canvas. rotate(90) canvas. drawBitmap(visiblePage, 0, 0, paint);
This method is called as rotating image programmatically. setRotation (Float value) function is used to rotate image to any given float value angle. So here is the complete step by step tutorial for Android rotate imageview image programmatically example tutorial.
1 Open the Google Photos app on your Android Phone 2 Next, open the Photo that you want to Rotate and then tap on the Pencil icon located at the bottom of your screen (See image below). 3 On the next screen, tap on the Crop icon from the bottom right corner of your screen. ... More items...
However, for an app with only one job, its rotating options are limited. The app will only rotate a full 90 degrees each time; there is no way to make minor adjustments. There is also no batch rotate option, so if you have a lot of photos to rotate, you will have to do them one at a time.
Next, open the Photo that you want to Rotate and then tap on the Pencil icon located at the bottom of your screen (See image below). 3. On the next screen, tap on the Crop icon from the bottom right corner of your screen.
Try This Way , I have used the group tag outside of the image path data in vector drawable file.
First Type :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
android:translateX="314.015"
android:rotation="90">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>
Second Type :
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
android:translateX="314"
android:scaleX="-1"
android:rotation="0">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>
Third type:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
android:translateY="314.015"
android:rotation="270">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>
For me the best works when using pivot
of the center of the view.
Please notice that I've used as center half of viewport - not width/height
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="36dp"
android:height="36dp"
android:viewportWidth="24"
android:viewportHeight="24"
>
<group
android:rotation="45"
android:pivotY="12"
android:pivotX="12"
>
<path
android:fillColor="@android:color/white"
android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
/>
</group>
</vector>
For those looking for the fourth variant, to flip something upside down, the code looks like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group
android:translateY="24.0"
android:scaleY="-1"
android:rotation="0">
<path
android:fillColor="#FF000000"
android:pathData="M1,21h4L5,9L1,9v12zM23,10c0,-1.1 -0.9,-2 -2,-2h-6.31l0.95,-4.57 0.03,-0.32c0,-0.41 -0.17,-0.79 -0.44,-1.06L14.17,1 7.59,7.59C7.22,7.95 7,8.45 7,9v10c0,1.1 0.9,2 2,2h9c0.83,0 1.54,-0.5 1.84,-1.22l3.02,-7.05c0.09,-0.23 0.14,-0.47 0.14,-0.73v-1.91l-0.01,-0.01L23,10z"/>
</group>
</vector>
In fact you can not rotate vector.xml because it drawn by pathData, unless you do it in another combination.
you can separate TextView and ImageView and use it like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Set time"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium" />
<ImageButton
android:id="@+id/close_dialog"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="?attr/selectableItemBackgroundBorderless"
android:rotation="45"
android:src="@drawable/ic_close_black_24dp" />
</LinearLayout>
If you want to rotate like a mirror image, Add android:scaleY="-1",android:translateY
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:scaleY="-1"
android:translateY="24.0">
<path
android:fillColor="@android:color/transparent"
android:pathData="M12 2L2 12L12 22"
android:strokeWidth="2.5"
android:strokeColor="#ffffff"
android:strokeLineCap="round" />
</group>
</vector>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With