title: Why the text in custom SwitchCompat inside track show always below the thum
body: <p>I am trying to implement custom SwitchButton with text inside it's track like these image in On/Off cases </p>
  
  <p><img src="https://i.stack.imgur.com/y0P6w.jpg" alt="enter image description here">]<a href="https://i.stack.imgur.com/y0P6w.jpg" rel="nofollow noreferrer">1</a></p>
  
  <p><a href="https://i.stack.imgur.com/aw3La.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aw3La.jpg" alt="enter image description here"></a></p>
  
  <p>my problem is i fount the text appears under the thumb not beside it like </p>
  
  <p><a href="https://i.stack.imgur.com/etqtH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/etqtH.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GIIhZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GIIhZ.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code</p>
  
  <pre><code> &lt;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" /&gt;
  </code></pre>
  
  <p>selector_thumb xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:state_checked="false"&gt;
      &lt;shape android:dither="true" android:shape="oval" android:useLevel="false" android:visible="true"&gt;
          &lt;solid android:color="#ffffff" /&gt;
          &lt;size android:width="18dp" android:height="25dp" /&gt;
          &lt;stroke android:width="4dp" android:color="#0000ffff" /&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  </code></pre>
  
  <p></p>
  
  <p>selector_track xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:state_checked="true"&gt;
      &lt;shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true"&gt;
          &lt;solid android:color="@color/colorGreen" /&gt;
          &lt;corners android:radius="50dp" /&gt;
          &lt;size android:width="2dp" android:height="10dp" /&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  &lt;item android:state_checked="false"&gt;
      &lt;shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true"&gt;
          &lt;solid android:color="@color/colorCherry" /&gt;
          &lt;corners android:radius="50dp" /&gt;
          &lt;size android:width="2dp" android:height="10dp" /&gt;
      &lt;/shape&gt;
  &lt;/item&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can fix this text direction? 
  P.S. Arabic text required.</p>
  
  <p>Thanks in advance.</p>