Android : Rotate Vector Image to 90 degree

AndroidVectorRotationDrawable

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

enter image description here

But I want this image in all direction as below:

enter image description here enter image description here enter image description here

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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPratik ButaniView Question on Stackoverflow
Solution 1 - AndroidjeevashankarView Answer on Stackoverflow
Solution 2 - AndroidmurtView Answer on Stackoverflow
Solution 3 - AndroidPer Christian HendenView Answer on Stackoverflow
Solution 4 - AndroidYossiView Answer on Stackoverflow
Solution 5 - AndroidSuhad Bin ZubairView Answer on Stackoverflow