Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 496
Pratik Butani Avatar asked Mar 07 '19 07:03

Pratik Butani


People also ask

How do you rotate a vector by 90 degrees?

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.

How do I rotate a picture on android?

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 .

How do I rotate a bitmap image in Android?

Show activity on this post. canvas. rotate(90) canvas. drawBitmap(visiblePage, 0, 0, paint);

How to rotate image view programmatically in Android?

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.

How to rotate a photo in Google Photos?

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

Is there an app that can rotate photos 90 degrees?

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.

How to rotate or crop a photo on iPhone?

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.


5 Answers

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>
like image 99
jeevashankar Avatar answered Oct 16 '22 19:10

jeevashankar


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>
like image 39
murt Avatar answered Oct 16 '22 18:10

murt


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>
like image 15
Per Christian Henden Avatar answered Oct 16 '22 18:10

Per Christian Henden


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>
like image 6
Yossi Avatar answered Oct 16 '22 20:10

Yossi


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>
like image 4
Suhad Bin Zubair Avatar answered Oct 16 '22 19:10

Suhad Bin Zubair