es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

AutoMirror no funciona para el botón de MaterialButton con ícono.

25 Jul, 2023 Programación

Quiero adaptar mi aplicación para los locales RTL, pero accidentalmente descubrí que las imágenes establecidas en com.google.android.material.button.MaterialButton no se reflejan automáticamente. Aquí tienes un breve ejemplo.

<com.google.android.material.button.materialbutton android:id="@+id/move_first" style="@style/Widget.App.Button.IconButton" android:layout_width="48dp" android:layout_height="48dp" app:icon="@drawable/ic_navigate_first"></com.google.android.material.button.materialbutton>

Estilo para un botón de solo icono.

<style name="Widget.App.Button.IconButton" parent="Widget.MaterialComponents.Button.TextButton.Icon">
    <item name="iconTint">@null</item>
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:paddingLeft">12dp</item>
    <item name="android:paddingRight">12dp</item>
    <item name="android:minWidth">48dp</item>
    <item name="android:minHeight">48dp</item>
</style>

Y aquí está la fuente de @drawable/ic_navigate_first:

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="32dp" android:height="32dp" android:automirrored="true" android:viewportwidth="24.0" android:viewportheight="24.0">
    <path android:fillcolor="#777777" android:pathdata="M18.41,16.59L13.82,12l4.59,-4.59L17,6l-6,6 6,6zM6,6h2v12H6z"></path>
</vector>

Así es como se ve en el local en_US:

EN

Y aquí está la imagen en árabe:

AR

Notarás que el ícono de flecha apunta hacia la izquierda en ambos locales, cuando en árabe debería reflejarse y apuntar hacia la derecha. ¿Alguna idea de cómo solucionar el problema?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema aquí es que el MaterialButton no refleja automáticamente el ícono en los idiomas de escritura de derecha a izquierda (RTL). Para resolver este problema, puedes reflejar manualmente el ícono agregando android:scaleX="-1" al ImageView que muestra el ícono. Aquí tienes un ejemplo de cómo puedes modificar tu código para reflejar automáticamente la imagen ic_navigate_first en los idiomas RTL:

    <com.google.android.material.button.materialbutton android:id="@+id/move_first" style="@style/Widget.App.Button.IconButton" android:layout_width="48dp" android:layout_height="48dp" app:icon="@drawable/ic_navigate_first" app:automirrored="true"></com.google.android.material.button.materialbutton>

    Y aquí está el archivo modificado @drawable/ic_navigate_first:

    <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="32dp" android:height="32dp" android:automirrored="true" android:viewportwidth="24.0" android:viewportheight="24.0">
  <path android:fillcolor="#777777" android:pathdata="M18.41,16.59L13.82,12l4.59,-4.59L17,6l-6,6 6,6zM6,6h2v12H6z"></path>
  <group android:name="arrow_group" android:pivotx="12" android:pivoty="12">
    <path android:name="arrow" android:strokewidth="2" android:strokecolor="#777777" android:strokelinecap="round" android:strokelinejoin="round" android:pathdata="M8,8 L16,16"></path>
  </group>
</vector>

    Ten en cuenta que hemos agregado android:autoMirrored="true" al MaterialButton, lo cual indica a la plataforma que refleje automáticamente el ícono en idiomas RTL. Luego, hemos agregado un elemento group con pivotX y pivotY que especifica el centro de la ruta arrow. Por último, hemos agregado android:scaleX="-1" al arrow_group para que todo el grupo se refleje.

    Con estos cambios, el ícono se reflejará automáticamente en idiomas RTL y debería dirigirse hacia la derecha como se esperaba.

Comments are closed.