AutoMirror not working for MatterialButton with icon-CodePudding

I want to adapt my app for the RTL locales, but accidentally found that images set on com.google.android.material.button.MaterialButton are not auto mirrored. Here is a short example.

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

Style for icon only button

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

and the source of @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"/>
</vector>

Here is how it looks in the en_US locale:

And here is the image in the Arabic:

You see the arrow icon directs to the left in both locales, while it should be mirrored in Arabic and direct to the right. Any ideas how to solve the problem?

CodePudding user response：

Make sure you have declared in your app manifest that your app supports RTL mirroring :

android:supportsRtl="true"

If you are targeting your app to Android 4.2 (the app's targetSdkVersion or minSdkVersion is 17 or higher), then you should use “start” and “end” instead of “left” and “right”. For example, android:paddingLeft should become android:paddingStart.

CodePudding user response：

I was using the

<item name="iconGravity">textTop</item>

style on my buttons. Changed it to

<item name="iconGravity">textStart</item>

to resolve the issue.