AutoMirror no funciona para el botón de MaterialButton con ícono.
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:
Y aquí está la imagen en árabe:
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?
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 agregandoandroid:scaleX="-1"
alImageView
que muestra el ícono. Aquí tienes un ejemplo de cómo puedes modificar tu código para reflejar automáticamente la imagenic_navigate_first
en los idiomas RTL:Y aquí está el archivo modificado
@drawable/ic_navigate_first
:Ten en cuenta que hemos agregado
android:autoMirrored="true"
alMaterialButton
, lo cual indica a la plataforma que refleje automáticamente el ícono en idiomas RTL. Luego, hemos agregado un elementogroup
conpivotX
ypivotY
que especifica el centro de la rutaarrow
. Por último, hemos agregadoandroid:scaleX="-1"
alarrow_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.