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:
And here's the same thing when language of the device is set to a RTL one:
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>
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>