Как исправить пользовательский внешний вид коммутатора на Android 4

Question

У меня есть элемент пользовательского переключателя, который отлично смотрится на Android 5 и 6. Но есть проблема с Android 4. Вопрос в том, как сохранить форму кругового кругового движения?

Android 5,6. Изображение 1

Android 4. Изображение 2

Вот мой код:

<Switch 
      android:id="@+id/row_device_switch" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:textOn="ON" 
      android:thumb="@drawable/customswitchselector" 
      android:track="@drawable/custom_track" 
      android:textOff="OFF" 
      android:layout_marginRight="14dp" 
      android:switchMinWidth="@dimen/custom_switcher_track_width" 
      /> 

custom_track.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape 
      android:shape="rectangle" 
      android:visible="true" 
      android:dither="true" 
      android:useLevel="false" 
      > 
      <corners 
       android:radius="@dimen/cutsom_switcher_track_radius"/> 
      <size 
       android:width="@dimen/custom_switcher_track_width" 
       android:height="@dimen/custom_switcher_track_height" /> 
      <stroke 
       android:width="@dimen/custom_switcher_stroke_thickness" 
       android:color="@android:color/white" 
       /> 
     </shape> 
    </item> 
    <item 
     android:left="@dimen/custom_switcher_track_line_horizontal_margin" 
     android:right="@dimen/custom_switcher_track_line_horizontal_margin" 
     > 
     <shape 
      android:shape="line" 
      > 
      <stroke 
       android:width="@dimen/custom_switcher_екфсл_thickness" 
       android:color="@android:color/white" 
       /> 
     </shape> 
    </item> 
</layer-list> 

customswitchselector.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_checked="true"> 
     <layer-list> 
      <item> 
       <shape 
        android:shape="oval" 
        android:visible="true" 
        android:dither="true" 
        android:useLevel="false" 
        > 
        <solid 
         android:color="@color/colorListEnd" 
         /> 
        <size 
         android:width="@dimen/custom_switcher_circle_size" 
         android:height="@dimen/custom_switcher_circle_size" /> 
        <stroke 
         android:width="@dimen/custom_switcher_stroke_thickness" 
         android:color="@android:color/white"/> 
       </shape> 
      </item> 
      <item 
       android:left="@dimen/custom_switcher_between_circles_margin" 
       android:right="@dimen/custom_switcher_between_circles_margin" 
       android:top="@dimen/custom_switcher_between_circles_margin" 
       android:bottom="@dimen/custom_switcher_between_circles_margin" 
       > 
       <shape 
        android:shape="oval" 
        > 
        <size 
         android:width="@dimen/custom_switcher_inner_circle_size" 
         android:height="@dimen/custom_switcher_inner_circle_size" /> 
        <solid 
         android:color="@android:color/white"/> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
    <item android:state_checked="false"> 
     <layer-list> 
      <item> 
       <shape 
        android:shape="oval" 
        android:visible="true" 
        android:dither="true" 
        android:useLevel="false"> 

        <solid 
         android:color="@color/colorListEnd" 
         /> 
        <size 
         android:width="@dimen/custom_switcher_circle_size" 
         android:height="@dimen/custom_switcher_circle_size" /> 
        <stroke 
         android:width="@dimen/custom_switcher_stroke_thickness" 
         android:color="@android:color/white"/> 
       </shape> 
      </item> 
      <item 
       android:left="@dimen/custom_switcher_between_circles_margin" 
       android:right="@dimen/custom_switcher_between_circles_margin" 
       android:top="@dimen/custom_switcher_between_circles_margin" 
       android:bottom="@dimen/custom_switcher_between_circles_margin" 
       > 
       <shape 
        android:shape="oval"> 
        <size 
         android:width="@dimen/custom_switcher_inner_circle_size" 
         android:height="@dimen/custom_switcher_inner_circle_size" 
         /> 
        <stroke 
         android:width="@dimen/custom_switcher_stroke_thickness" 
         android:color="@android:color/white" 
         /> 
       </shape> 
      </item> 
     </layer-list> 
    </item> 
</selector> 

Answer 1

Есть несколько небольших проблем с Switch, что делает его не работать равномерно. В вашем случае вам необходимо использовать android:textOff и android:textOn со значением "". В противном случае ширина дорожки и больших пальцев будет скорректирована, чтобы удерживать текст. Также вам необходимо определить android:thumbTextPadding, чтобы обеспечить размер большого пальца. Выбираемый только фон и не влияет на него напрямую.

<Switch 
    android:id="@+id/row_device_switch" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_vertical" 
    android:layout_marginRight="14dp" 
    android:switchMinWidth="@dimen/custom_switcher_circle_radius" 
    android:textOff="" 
    android:textOn="" 
    android:thumb="@drawable/customswitchselector" 
    android:thumbTextPadding="@dimen/switch_thumb_radius" 
    android:track="@drawable/custom_track" /> 

@dimen/custom_switcher_circle_radius должен иметь значение половины @dimen/custom_switcher_circle_size размерности.