switch 버튼 색상 바꾸기

먼저 Track부터 바꿔보자!

먼저 track을 바꿔보도록

하겠습니다.

Off부터 만들어보겠습니다.

[drawable]-[switch_track_off.xml]

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="15dp" />
    <size
        android:width="75dp"
        android:height="25dp" />
    <solid
        android:color="#000000" />
    <stroke
        android:width="2dp"
        android:color="#000000" />
</shape>

일단 이정도로 만들어보면

이렇게 생겼다네요!

일단 만들어놓고 입맛에 맞게

수정하도록 하죠!

그 다음

On을 만들어보겠습니다.

정열의 빨간색으로!!

[drawable]-[switch_track_on.xml]

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:radius="15dp" />
    <size
        android:width="75dp"
        android:height="25dp" />
    <solid
        android:color="#FF0000" />
    <stroke
        android:width="2dp"
        android:color="#FF0000" />
</shape>

두 가지를 만들었으면!

합쳐야죠!!

[drawable]-[switch_track_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/switch_track_off"
        android:state_checked="false"/>

    <item
        android:drawable="@drawable/switch_track_on"
        android:state_checked="true"/>

</selector>

그럼 이제 thumb를 만들어보자!

음 근데 thumb을

색깔 나누는게 이쁜가요?

일단 한개로 만들어보죠

안이쁘면 2개로 바꾸죠

(완성이 목표..)

[drawable]-[switch_thumb.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="25dp"
        android:height="25dp" />

    <solid
        android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#FFFFFF" />

</shape>

자 일단 하나로 돌려보고!

[drawable]-[switch_thumb_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="25dp"
        android:height="25dp" />

    <solid
        android:color="#FFFFFF" />

    <stroke
        android:width="1dp"
        android:color="#FFFFFF" />

</shape>

일단 완성!!

한번 돌려보자!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context="com.tistory.itpangpang.customswitch.MainActivity">

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:track="@drawable/switch_track_selector"
        android:thumb="@drawable/switch_thumb_selector"
        />

</RelativeLayout>

만든 2가지를 넣어서

돌려보면 되겠죠?

나름 봐줄만 하네요!

그 다음 마무리로

스위치 기준 왼쪽과

오른쪽에 On/Off 써주겠습니다

그리고 Switch 자체 Text는 제거해버리겠습니다

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/rl"
    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"
    tools:context="com.tistory.itpangpang.customswitch.MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/sw"
        android:layout_marginRight="10dp"
        android:textColor="#000000"
        android:textSize="20dp"
        android:textStyle="bold"
        android:text="off"/>
    <Switch
        android:id="@+id/sw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:track="@drawable/switch_track_selector"
        android:thumb="@drawable/switch_thumb_selector"
        android:text=""
        android:textOn=""
        android:textOff=""
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/sw"
        android:layout_marginLeft="10dp"
        android:textColor="#FF0000"
        android:textSize="20dp"
        android:textStyle="bold"
        android:text="on"/>

</RelativeLayout>

어느정도 된 것 같습니다

아 추가로 Switch 길이를 늘리려면

android:switchMinWidth = "~dp"

을 써주면 됩니다

출처: http://itpangpang.xyz/283 [ITPangPang]