如何给android中开关的圆圈加色?
how to add color to the circle in the switch in android?
我想创建一个如下所示的开关
我是这样做的
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp"
/>
<Switch
android:id="@+id/theSwitchId"
android:textOn=""
android:textOff=""
android:layout_width="wrap_content"
android:layout_height="20dp"
android:thumbTextPadding="5dp"
android:switchMinWidth="90dp"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:layout_gravity="center|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnAvailable"
android:layout_marginStart="40dp"
android:textColor="#224e6d"
android:textSize="20sp"
/>
</LinearLayout>
我无法更改开关的高度,而且在这张图片中看起来也不怎么样。请帮我解决这个问题
在style.xml
<style name="switchCompatStyle">
<item name="colorControlActivated">@color/colorPrimary</item>
</style>
开关代码就像
<android.support.v7.widget.SwitchCompat
android:id="@+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/_10sdp"
app:theme="@style/switchCompatStyle" />
您在 drawable 中创建了 Thumb xml:
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/ic_thumbselecter"/>
<item android:drawable="@drawable/ic_thumbselecter"/>
</selector>
然后切换到开关(在我的例子中我使用的是那个):
<Switch
app:kswThumbDrawable="@drawable/thumb"/>
您需要做的就是使用自定义绘图作为 track of switch
这是自定义绘图的代码:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners
android:radius="@dimen/_40sdp" />
<solid
android:color="@android:color/darker_gray" />
<padding
android:bottom="@dimen/_5dp"
android:left="@dimen/_5dp"
android:right="@dimen/_5dp"
android:top="@dimen/_5dp" />
</shape>
</item>
进一步对您现有的布局进行这些修改
添加 android:thumbTint="@android:color/holo_blue_dark" 或任何符合您要求的颜色
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp" />
<Switch
android:id="@+id/theSwitchId"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center|center_vertical"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:switchMinWidth="90dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp"
android:thumbTint="@android:color/holo_blue_dark"
android:track="@drawable/track_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:text="UnAvailable"
android:textColor="#224e6d"
android:textSize="20sp" />
希望这对您有所帮助
单击此处查看生成的屏幕截图
screenshot
使用以下方法更改拇指(开关上的圆圈)颜色:
android:thumbTint="@color/thumbColor"
在你的 colors.xml 上:
<color name="thumbColor">#FFFFFF</color>
我想创建一个如下所示的开关
我是这样做的
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp"
/>
<Switch
android:id="@+id/theSwitchId"
android:textOn=""
android:textOff=""
android:layout_width="wrap_content"
android:layout_height="20dp"
android:thumbTextPadding="5dp"
android:switchMinWidth="90dp"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:layout_gravity="center|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnAvailable"
android:layout_marginStart="40dp"
android:textColor="#224e6d"
android:textSize="20sp"
/>
</LinearLayout>
我无法更改开关的高度,而且在这张图片中看起来也不怎么样。请帮我解决这个问题
在style.xml
<style name="switchCompatStyle">
<item name="colorControlActivated">@color/colorPrimary</item>
</style>
开关代码就像
<android.support.v7.widget.SwitchCompat
android:id="@+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/_10sdp"
app:theme="@style/switchCompatStyle" />
您在 drawable 中创建了 Thumb xml: thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="@drawable/ic_thumbselecter"/>
<item android:drawable="@drawable/ic_thumbselecter"/>
</selector>
然后切换到开关(在我的例子中我使用的是那个):
<Switch
app:kswThumbDrawable="@drawable/thumb"/>
您需要做的就是使用自定义绘图作为 track of switch
这是自定义绘图的代码:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners
android:radius="@dimen/_40sdp" />
<solid
android:color="@android:color/darker_gray" />
<padding
android:bottom="@dimen/_5dp"
android:left="@dimen/_5dp"
android:right="@dimen/_5dp"
android:top="@dimen/_5dp" />
</shape>
</item>
进一步对您现有的布局进行这些修改 添加 android:thumbTint="@android:color/holo_blue_dark" 或任何符合您要求的颜色
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp" />
<Switch
android:id="@+id/theSwitchId"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center|center_vertical"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:switchMinWidth="90dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp"
android:thumbTint="@android:color/holo_blue_dark"
android:track="@drawable/track_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:text="UnAvailable"
android:textColor="#224e6d"
android:textSize="20sp" />
希望这对您有所帮助
单击此处查看生成的屏幕截图
screenshot
使用以下方法更改拇指(开关上的圆圈)颜色:
android:thumbTint="@color/thumbColor"
在你的 colors.xml 上:
<color name="thumbColor">#FFFFFF</color>