Android - flip image in xml

Question

I want to flip image for button's background in xml. I've seen example how to do it, but it was programmatically way: http://xjaphx.wordpress.com/2011/06/26/image-processing-image-flipping-mirroring. Anyway, I have a xml file (button_left_state.xml) like below :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
<item android:state_pressed="true" >
    <rotate android:fromDegrees="180.0" android:toDegrees="180.0" 
    android:pivotX="50%" android:pivotY="50%" android:drawable="@drawable/buttonrightpressed" />    
</item>    

<item>
  <rotate android:fromDegrees="180.0" android:toDegrees="0.0" 
    android:pivotX="50%" android:pivotY="50%" android:drawable="@drawable/buttonright"/>
</item>   
</selector>

But this code just rotate image to 180 degrees. Is it possible to flip image in xml?

Any luck on this? I'm running into the same problem. I have a Button that's an Arrow with a Gradient. I flipped it so the arrow is facing the other direction, pretty much using the same code. However, now my gradient is upside down. — Frank Sposaro, Jul 26 '12 at 20:40

score 304 · Answer 1 · answered Dec 13 '13 at 11:57

304

Use the scale attributes in ImageView

android:scaleX="-1" //To flip horizontally or
android:scaleY="-1" //To flip vertically

answered Dec 13 '13 at 11:57

Tommaso Resti

5,800
4
18
34

19

Not showing as working in preview but works on device, thanks – John Feb 18 '15 at 09:53
2

This is so elegant, helped me fix a RTL mirroring issue on an asymmetric widget background. – Mattias Sep 16 '15 at 12:23
2

That also inverts the content (if a layout) – Gilian Sep 02 '16 at 13:52
shadow is also inverted. If you are using it in FAB, the shadow will appear at top – q126y Mar 08 '17 at 07:46
NICE ONE, THANK YOU – Matan Dahan May 21 '20 at 09:08

score 36 · Answer 2 · edited Mar 28 '22 at 18:34

Here's a very short and easy to understand solution.

Add this to the imageView:

 android:rotationY="180"

This will flip the imageView horizontally (left<->right).

For vertically, put this:

android:rotationX="180"

Example:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="original image:"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/test"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="flip horizontally :"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotationY="180"
        android:src="@drawable/test"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="flip vertically:"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotationX="180"
        android:src="@drawable/test"/>

</LinearLayout>

And the result (image taken from a JNI library that I've made, that can do it via JNI) :

this will only work for symetric images. rotating is not equal to flipping/mirroring an image!! — muetzenflo, May 03 '16 at 11:43
@muetzenflo Updated answer, including screenshot. Notice that it does work — android developer, May 04 '16 at 19:01
cool, I didn't realize one can rotate on 3D axis. thanks for the effort — muetzenflo, May 04 '16 at 22:00

score 14 · Accepted Answer · edited Dec 10 '18 at 10:01

I resolve my problem by using layer-list:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <item>
                <shape android:shape="rectangle">
                    <gradient android:startColor="#9f9" android:centerColor="#000"
                        android:endColor="#0f0" android:angle="-90" />
                    <stroke android:width="1.0px" android:color="#444" />
                    <corners android:bottomRightRadius="7dip"
                        android:bottomLeftRadius="0.1dp"
                        android:topLeftRadius="0.1dp"
                        android:topRightRadius="7dip"/>
                </shape>
            </item>
            <item>
                <rotate android:fromDegrees="180.0" android:toDegrees="180.0"
                    android:pivotX="50%" android:pivotY="50%" android:drawable="@drawable/arrow_right" />
            </item>
        </layer-list>
    </item>
</selector>

@LoungeKatt, first of all, take a look at the answer dates. The best one was given after almost a year since I had posted my question. — Nolesh, Jun 19 '18 at 04:16
It seems you agree that https://stackoverflow.com/a/20565940/461982 would be the accepted answer if it had been provided before accepting your own, so that is good information for future readers. — Abandoned Cart, Jun 19 '18 at 13:45

score 9 · Answer 4 · answered Oct 01 '20 at 10:09

Answer by @lewis-mcgeary link - original answer link :https://stackoverflow.com/a/43783080/4075178 is the easiest and self-explanatory.

This code is for fliping horizontally.

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">

<group
    android:name="rotationGroup"
    android:pivotX="12"
    android:scaleX="-1" >

    <path
        android:fillColor="#FFFFFF"
        android:pathData="M15,14C17.67,14 23,15.33 23,18V20H7V18C7,15.33 12.33,14 15,14M15,12A4,4 0 0,1 11,8A4,4 0 0,1 15,4A4,4 0 0,1 19,8A4,4 0 0,1 15,12M5,9.59L7.12,7.46L8.54,8.88L6.41,11L8.54,13.12L7.12,14.54L5,12.41L2.88,14.54L1.46,13.12L3.59,11L1.46,8.88L2.88,7.46L5,9.59Z" />
</group>

If you need to flip vertically, use

<group android:pivotY ="half of viewPortHeight"
android:ScaleY =" -1">

Android - flip image in xml

4 Answers4

Linked