Search code examples
androidvectorrotationdrawable

Android : Rotate Vector Image to 90 degree


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.


Solution

  • 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>