Android : Rotate Vector Image to 90 degree
Solution 1
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>
Solution 2
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>
Solution 3
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>
Solution 4
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>
Solution 5
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>
Pratik Butani
Pratik Butani is Android/Flutter Lead at 7Span - Ahmedabad. He is working with Flutter Development since 2020 and Android Development since 2013. He is on the list of Top 100 User’s (85th) in India and Top 10 User’s (6th) in Gujarat as Highest Reputation Holder on StackOverflow. He was co-organizer at Google Developer Group – Rajkot in 2014-17. All-time Learner of new things, Googler and Eager to Help IT Peoples. He is also likes to share his knowledge of Android and Flutter with New Learner. SOReadyToHelp ツ Fell in Love with Android ツ I really feel proud to up-vote My Favorite #SO friend. => Android Application Developer by Passion :) => Being Helpful by Nature ;) => Now in List of Top 100 User's (85) in India and Top 10 User's (6) in Gujarat as Highest Reputation Holder on StackOverflow => Visit my blogs for learning new things : Happy to Help :) :) => My Apps on Playstore: AndroidButs & PratikButani => My Articles on Medium => Join Me on LinkedIn => Tweet Me on Twitter => Follow Me on Quora - Top Writer on Quora in 2017 => Hangout with Me on [email protected] => Social Networking Facebook => Get Users list whose bio's contains given keywords More about me :) -> Pratik Butani
Updated on July 08, 2022Comments
-
Pratik Butani almost 2 years
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:
What I have tried:
Added
<vector>
tag in between<rotate>
but its giving me warning likeElement 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. -
Pratik Butani about 5 yearsUnfortunately, this is not a solution. its only trick and it will increase my line of code.
-
Bhaven Shah about 4 years@jeevashankar this all three steps are working. but can you tell me the main concept of this? because I need to rotate many sides but don't know how to rotate.
-
jeevashankar about 4 years@BhavenShah it is based on the different angle of rotation logic like [90,0,270,180]
-
Vikas Pandey over 3 years@jeevashankar where can i learn about group and paths in more detail bro?
-
Bhargav Thanki almost 3 yearsThis answer worked for me rather than an accepted answer. Thanks a lot man
-
Muhammad over 2 yearsThanks alot..It worked !
-
dknchris about 2 yearsMuch cleaner way than the accepted answer. Thanks!