[Android] Custom Toggle button size, icon, evenly distributed, text color (안드로이드 맞춤형 토글 버튼, 색깔, 사이즈, 이모티콘, 균등 배열)

안녕하세요. 박프로입니다.

알람 어플의 요일 선택과 같이 on/off 기능을 구현하고자 할때 자주 사용되는 안드로이드 토글 버튼에 대해 정리해보았습니다.

 

Hello, I'm ParkPro.

In this page, I post some tips about how to use toggle button in android

 

1. Toggle button ?

Toggle button

 

토글버튼은 옆의 그림과 같은 ON/OFF 기능을 구현할 때 사용하는 버튼입니다.

Toggle button is used to implement ON/OFF fuctionality as left picture.

 

 

2. Basic concept in XML

- textOff, textOn : displayed text when toggle turns on/off

- checked : initial state of toggle button

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

    <ToggleButton
        android:id="@+id/toggle_exam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:textOff="Off"
        android:textOn="On" />

    <ToggleButton
        android:id="@+id/toggle_exam2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
        android:textOff="Off"
        android:textOn="On" />

</LinearLayout>

 

3. Customized toggle button (토글 버튼 꾸미기)

In the alarm app, I used toggle buttons to select the day of the week.

Toggle buttons example

(1) Toggle button on/off icon (토글 버튼 아이콘 사용)

STEP 1. Create images for representing toggle on/off

- You can use toggle images in Vector Asset.

 

STEP 2. Create ic_toggle.xml file in the res/drawble folder

- This xml file is used for background of a toggle button.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false"
        android:drawable="@drawable/ic_slide_switch_off" />
    <item android:state_checked="true"
        android:drawable="@drawable/ic_slide_switch_on" />
</selector>

STEP 3. Put ic_toggle in toggle background characteristic  

- If you don't want to display text, you leave textOn/Off empty.

<ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn=""
            android:textOff=""
            android:background="@drawable/ic_toggle"/>

(2) Toggle text color (토글 버튼 텍스트 색 설정)

- You can select text color by using below the color table

 

https://www.color-hex.com/

(3) How to distribute Toggle buttons evenly (토글 버튼 균등 배열)

- You can distribute two buttons evely by layout_width = "0dp" and layout_weight = "0.5" in a horizontal LinearLayout.

- When you distribute seven buttons evenly by laytout_wegith = "0.14".

(You can refer to the below source code)

 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/timepicker"
        android:id="@+id/Daychoice"
        >

        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Mon"
            android:textOff="Mon"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Tue"
            android:textOff="Tue"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Wed"
            android:textOff="Wed"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Thu"
            android:textOff="Thu"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Fri"
            android:textOff="Fri"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Sat"
            android:textOff="Sat"
            android:textColor="#ff0000ff"
            android:background="@drawable/ic_toggle"/>
        <ToggleButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.14"
            android:checked="false"
            android:textOn="Sun"
            android:textOff="Sun"
            android:textColor="#f00"
            android:background="@drawable/ic_toggle"/>

    </LinearLayout>

 

읽어주셔서 감사합니다.

Thank you for your reading!