如何自定义切换按钮？

Question

我正在寻找自定义 Switch 按钮变成如下：

如何做到这一点？

原文由 NotCool 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

但是，我可能没有采用最好的方法，但这就是我在一些应用程序中创建一些 Switch 类的 UI 的方式。这是代码 -

 <RadioGroup
        android:checkedButton="@+id/offer"
        android:id="@+id/toggle"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_marginBottom="@dimen/margin_medium"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_marginTop="@dimen/margin_medium"
        android:background="@drawable/pink_out_line"
        android:orientation="horizontal">

        <RadioButton
            android:layout_marginTop="1dp"
            android:layout_marginBottom="1dp"
            android:layout_marginLeft="1dp"
            android:id="@+id/search"
            android:background="@drawable/toggle_widget_background"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="Search"
            android:textColor="@color/white" />

        <RadioButton
            android:layout_marginRight="1dp"
            android:layout_marginTop="1dp"
            android:layout_marginBottom="1dp"
            android:id="@+id/offer"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@drawable/toggle_widget_background"
            android:button="@null"
            android:gravity="center"
            android:text="Offers"
            android:textColor="@color/white" />
    </RadioGroup>

pink_out_line.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="#80000000" />
    <stroke
        android:width="1dp"
        android:color="@color/pink" />
</shape>

toggle_widget_background.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/pink" android:state_checked="true" />
    <item android:drawable="@color/dark_pink" android:state_pressed="true" />
    <item android:drawable="@color/transparent" />
</selector>

这是输出 -

原文由 Sanjeet A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

示例 1：

custom_thumb.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">
            <corners android:radius="20dp" />
            <solid android:color="@color/white"/>
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="@color/white" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <corners android:radius="20dp" />
            <solid android:color="@color/white"/>
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="#0000ffff" />
        </shape>
    </item>
</selector>

custom_track.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    android:visible="true"
    android:dither="true"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black"/>
    <corners
        android:radius="20dp"/>
    <size
        android:width="50dp"
        android:height="26dp" />
    <stroke android:color="@color/white"
        android:width="4dp"/>
</shape>

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/black"
        android:gravity="center">

        <Switch
            android:id="@+id/switch1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:thumb="@drawable/custom_thumb"
            android:track="@drawable/custom_track"
            tools:ignore="UseSwitchCompatOrMaterialXml" />

    </LinearLayout>

</LinearLayout>

示例 2：

custom_thumb.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">
            <corners android:radius="20dp" />
            <solid android:color="@color/black"/>
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="@color/white" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <corners android:radius="20dp" />
            <solid android:color="@color/black"/>
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="@color/white" />
        </shape>
    </item>
</selector>

custom_track.xml

 <?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    android:visible="true"
    android:dither="true"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black"/>
    <corners
        android:radius="20dp"/>
    <size
        android:width="50dp"
        android:height="26dp" />
    <stroke android:color="@color/white"
        android:width="4dp"/>
</shape>

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/black"
        android:gravity="center">

        <Switch
            android:id="@+id/switch1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:thumb="@drawable/custom_thumb"
            android:track="@drawable/custom_track"
            tools:ignore="UseSwitchCompatOrMaterialXml" />

    </LinearLayout>

</LinearLayout>

示例 3：

custom_thumb.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">
            <corners android:radius="20dp" />
            <solid android:color="@color/white" />
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="@color/black" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <corners android:radius="20dp" />
            <solid android:color="@color/white" />
            <size android:width="37dp" android:height="37dp" />
            <stroke android:width="4dp" android:color="#cdcdcd" />
        </shape>
    </item>
</selector>

custom_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/black" />
            <corners android:radius="20dp" />
            <size android:width="50dp" android:height="26dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
           <solid android:color="#cdcdcd" />
            <corners android:radius="20dp" />
            <size android:width="50dp" android:height="26dp" />
        </shape>
    </item>
</selector>

activity_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#EDEDED"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:thumb="@drawable/custom_thumb"
        android:track="@drawable/custom_track"
        tools:ignore="UseSwitchCompatOrMaterialXml" />

</LinearLayout>

原文由 Meet Bhavsar 发布，翻译遵循 CC BY-SA 4.0 许可协议