Why the text in custom SwitchCompat inside track show always below the thum

Question

I am trying to implement custom SwitchButton with text inside it's track like these image in On/Off cases

]1

my problem is i fount the text appears under the thumb not beside it like

Here is my code

 <androidx.appcompat.widget.SwitchCompat
                android:id="@+id/switch_availability"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="false"
                android:textOn="متاح"
                android:textOff="مغلق"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:background="@android:color/transparent"
                android:button="@null"
                android:textColor="@color/colorWhite"
                android:thumb="@drawable/selector_thumb"
                app:track="@drawable/selector_track"
                app:showText="true" />

selector_thumb xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
    <shape android:dither="true" android:shape="oval" android:useLevel="false" android:visible="true">
        <solid android:color="#ffffff" />
        <size android:width="18dp" android:height="25dp" />
        <stroke android:width="4dp" android:color="#0000ffff" />
    </shape>
</item>

selector_track xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
    <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
        <solid android:color="@color/colorGreen" />
        <corners android:radius="50dp" />
        <size android:width="2dp" android:height="10dp" />
    </shape>
</item>
<item android:state_checked="false">
    <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
        <solid android:color="@color/colorCherry" />
        <corners android:radius="50dp" />
        <size android:width="2dp" android:height="10dp" />
    </shape>
</item>

How can fix this text direction? P.S. Arabic text required.

Thanks in advance.