MenuItem icon is not displaying correctly in RTL Layouts

Question

In RTL, option menu item icon not displayed correctly!! but in LTR, everything is displayed well and beautifully.

With the help of this command, I make the RTL program

getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

My menu layout.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"
    android:gravity="start"
    android:layoutDirection="rtl"
    android:layout_gravity="start">
    <item
        android:id="@+id/action_more"
        android:icon="@drawable/ic_add_white_24dp"
        android:title=""
        app:showAsAction="always">
        <menu>
            <item
                android:id="@+id/action_settings"
                android:icon="@drawable/ic_wb_sunny_black_24dp"
                android:title="آیتم شماره 1"/>

            <item
                android:id="@+id/action_settings2"
                android:icon="@drawable/ic_star_black_24dp"
                android:title="آیتم شماره 2"/>

            <item
                android:id="@+id/action_settings3"
                android:icon="@drawable/ic_wb_sunny_black_24dp"
                android:title="آیتم شماره 3"/>
        </menu>
    </item>
</menu>

Please help me to fix this.

Screenshot

Please post a screenshot to demonstrate what is not displayed correctly. — Ankur Aggarwal, Jan 14 '19 at 10:51

Motaz Alnuweiri · Answer 1 · 2020-02-15T18:46:39.120

I faced the same problem in RTL layout, If you are using Support Library or AndroidX you can apply this easy fix:

In you project create new layout file in res -> layout with this name abc_list_menu_item_icon.xml.

Copy the code below to the file in step 1.

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
           android:id="@+id/icon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_vertical"
           android:layout_marginLeft="8dip"
           android:layout_marginRight="-8dip"
           android:layout_marginStart="8dip"
           android:layout_marginEnd="-8dip"
           android:layout_marginTop="8dip"
           android:layout_marginBottom="8dip"
           android:scaleType="centerInside"
           android:duplicateParentState="true"/>

score 7 · Accepted Answer · answered Apr 09 '19 at 12:20

Custom Toolbar popupTheme, override

android:layout_marginStart android:layout_marginEnd

First add this lines to your res/values/styles.xml

<style name="PopupTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:layout_marginStart">2dp</item>
    <item name="android:layout_marginEnd">2dp</item>
</style>

then set Toolbar's popupTheme to 'PopupTheme' as shown above, just like this:

......
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:navigationIcon="@drawable/arrow_back"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/PopupTheme"
    app:title="@string/toolbar_title"/>
......

Cheers!

score 0 · Answer 3 · answered Nov 13 '20 at 17:32

0

The fix is available in appcompat:1.3.0-alpha02

In changelog :

Support RTL in menu items with icons (I2f5c5): https://android-review.googlesource.com/c/platform/frameworks/support/+/1353122

answered Nov 13 '20 at 17:32

CmoiJulien

659
8
6

score 0 · Answer 4 · answered Mar 31 '21 at 21:07

As I can see you're using either a vector/xml drawable (i.e. not png), in this case you can use inset, specifically android:insetRight attribute

You can apply this to all of your drawables: (ic_wb_sunny_black_24dp, ic_star_black_24dp, & ic_wb_sunny_black_24dp)

Example for vector drawable:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetRight="16dp">
    <vector
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24"
        android:viewportHeight="24"
        app:tint="@color/item_text">
        <path
            android:fillColor="@color/item_text"
            android:pathData="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z" />
    </vector>
</inset>

Example for xml drawable:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetRight="16dp">

    <shape android:shape="oval">

        <solid android:color="@color/highlight_1" />
        <stroke
            android:width="2dp"
            android:color="@color/transparent" />
        <size
            android:width="30dp"
            android:height="30dp" />
    </shape>

</inset>

Muhamed El-Banna · Answer 5 · 2019-01-14T10:56:30.827

-1

You have to create another folder for your language

ex : layout-ar for arabic language

edited Jan 14 '19 at 10:56

answered Jan 14 '19 at 10:46

Muhamed El-Banna

593
7
21

MenuItem icon is not displaying correctly in RTL Layouts

5 Answers5