Search code examples
androidandroid-support-libraryswitchcompat

SwitchCompat is not shown properly on RTL mode


I need my app to support both LTR and RTL. I'm using NavigationView using support library. In the menu for this navigation view I included two items. One of them is just an icon and a text and the other is a Switch. Everything works as expected, excluding the Switch in RTL mode.

Here's how the navigation view looks like in LTR mode:

enter image description here

And here's the same thing when language of the device is set to a RTL one:

enter image description here

These are the problems with the Switch in RTL mode:

1- Icon of images is not shown

2- Text of the item is not shown

3- The switch is supposed to be at the left side of the navigation view not the center

How do I fix it?

Here's the XML for menu of navigation view:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_view_menu">
    <group>
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_home_white_24dp"
            android:title="Home" />
        <item
            android:id="@+id/image_switch_parent"
            android:icon="@drawable/ic_photo_library_white_24dp"
            android:title="@string/images"
            app:actionLayout="@layout/nav_view_switch"
            app:showAsAction="always" />
    </group>
</menu>

And here's the actual layout for the switch:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.SwitchCompat
        android:id="@+id/image_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />
</RelativeLayout>

Solution

  • I finally fixed it by changing RelativeLayout to LinearLayout and adding a top margin of 10dp to the SwitchCompat. so the code for SwitchCompat now looks like:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.SwitchCompat
            android:id="@+id/nav_image_switch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />
    </LinearLayout>