Android : Rotate Vector Image to 90 degree
AndroidVectorRotationDrawableAndroid Problem Overview
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 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.
Android Solutions
Solution 1 - Android
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 - Android
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 - Android
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 - Android
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 - Android
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>