CODEWITHSUNDEEP
androidxmlkotlinandroid-optionsmenu
wbk727
wbk727

Reputation: 8408

Bidirectional menu items in Toolbar not mirrored properly

After adding some menu items to a Toolbar they are not behaving as expected. The direction of the arrows is correct in LTR (left-to-right) layout. However, when RTL (right-to-left) layout is used the posiiton of the icons changes as expected but not the direction of them. Why do these icons refuse to mirror themselves when android:autoMirrored="true" has been declared with the drawable XMLs? My manifest already contains android:supportsRtl="true".

Guides consulted

According to Material.io

enter image description here

enter image description here

LTR direction

enter image description here

RTL direction

enter image description here

Back arrow

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:autoMirrored="true"
    android:tint="#FFFFFF"
    android:height="24dp" android:viewportHeight="24.0"
    android:width="24dp" android:viewportWidth="24.0">
    <path android:fillColor="#FF000000" android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

Forward arrow

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:autoMirrored="true"
    android:tint="#FFFFFF"
    android:height="24dp" android:viewportHeight="24.0"
    android:width="24dp" android:viewportWidth="24.0">
    <path android:fillColor="#FF000000" android:pathData="M12,4l-1.41,1.41L16.17,11H4v2h12.17l-5.58,5.59L12,20l8,-8z"/>
</vector>

Menu items XML

<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".WebviewActivity">

    <item
        android:id="@+id/action_webbrowser_back"
        android:title="@string/back"
        android:icon="@drawable/ic_arrow_back_white"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/action_webbrowser_forward"
        android:title="@string/forward"
        android:icon="@drawable/ic_arrow_forward"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_webbrowser_reload"
        android:title="@string/reload"
        android:icon="@drawable/ic_refresh"
        app:showAsAction="never"/>
</menu>

Upvotes: 2

Views: 515

Answers (1)

tp9imka
tp9imka

Reputation: 1

The same issue happened to me, and the only way I found to fix it is to create mirrored icons and put them in the drawable-ldrtl folder.

Upvotes: 0

Related Questions