Android – voltear imagen en xml

4 minutos de lectura

Quiero voltear la imagen para el fondo del botón en xml. He visto un ejemplo de cómo hacerlo, pero fue programáticamente: http://xjaphx.wordpress.com/2011/06/26/image-processing-image-flipping-mirroring. De todos modos, tengo un archivo xml (button_left_state.xml) como el siguiente:

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

Pero este código solo gira la imagen a 180 grados. ¿Es posible voltear la imagen en xml?

  • ¿Has probado mi enlace?

    – raman

    23 de marzo de 2012 a las 6:28

  • ¿Ha habido suerte con esto? Me estoy encontrando con el mismo problema. Tengo un botón que es una flecha con un degradado. Le di la vuelta para que la flecha mire en la otra dirección, más o menos usando el mismo código . Sin embargo, ahora mi gradiente está al revés.

    – Frank Sposaro

    26 de julio de 2012 a las 20:40

  • Vea abajo. Publiqué la respuesta.

    – Nolesh

    27 de julio de 2012 a las 5:32

Usar los atributos de escala en ImageView

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

  • No se muestra como funcionando en la vista previa pero funciona en el dispositivo, gracias

    – John

    18 de febrero de 2015 a las 9:53

  • Esto es tan elegante que me ayudó a solucionar un problema de duplicación RTL en un fondo de widget asimétrico.

    – Matías

    16 de septiembre de 2015 a las 12:23

  • Eso también invierte el contenido (si es un diseño)

    – Gilian

    02/09/2016 a las 13:52


  • la sombra también está invertida. Si lo está utilizando en FAB, la sombra aparecerá en la parte superior

    – q126y

    8 de marzo de 2017 a las 7:46

  • BUENÍSIMO, GRACIAS

    – Matan Dahan

    21 de mayo de 2020 a las 9:08

avatar de usuario
desarrollador de Android

Aquí hay una solución muy breve y fácil de entender.

Agregue esto a la vista de imagen:

 android:rotationY="180"

Esto volteará la vista de imagen horizontalmente (izquierda derecha).

Para verticalmente, pon esto:

android:rotationX="180"

Ejemplo:

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

Y el resultado (imagen tomada de un biblioteca JNI que he hechoque puede hacerlo a través de JNI):

ingrese la descripción de la imagen aquí

  • esto solo funcionará para imágenes simétricas. ¡rotar no es lo mismo que voltear/reflejar una imagen!

    – muetzenflo

    3 mayo 2016 a las 11:43

  • @muetzenflo Respuesta actualizada, incluida la captura de pantalla. fijate que si funciona

    – desarrollador de Android

    4 mayo 2016 a las 19:01

  • genial, no me di cuenta de que uno puede rotar en el eje 3D. gracias por el esfuerzo

    – muetzenflo

    4 mayo 2016 a las 22:00

avatar de usuario
Nolesh

Resuelvo mi problema usando 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, en primer lugar, eche un vistazo a las fechas de respuesta. El mejor fue dado después de casi un año desde que publiqué mi pregunta.

    – Nolesh

    19 de junio de 2018 a las 4:16

  • Parece que está de acuerdo en que stackoverflow.com/a/20565940/461982 sería la respuesta aceptada si se hubiera proporcionado antes de aceptar la suya, por lo que es una buena información para futuros lectores.

    – Carro abandonado

    19 de junio de 2018 a las 13:45

Respuesta por @ lewis-mcgeary enlace – enlace de respuesta original: https://stackoverflow.com/a/43783080/4075178 es el más fácil y se explica por sí mismo.

Este código es para voltear horizontalmente.

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

Si necesita voltear verticalmente, use

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

¿Ha sido útil esta solución?