[안드로이드] 토글 버튼(Toggle) 쉽게 꾸미는 방법

이번 시간에는 토글버튼 쉽게 꾸미는

방법에 대하여 알아보겠습니다.

토글버튼은 둘 중 하나를 선택하는

간단한 모양의 버튼입니다.

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

implementation 'com.github.angads25:toggle:1.1.0'

참조문서

https://github.com/Angads25/android-toggle

GitHub - Angads25/android-toggle: Custom Switches for Android

 

 

3. 메인 화면 구성 activity_main.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.github.angads25.toggle.widget.LabeledSwitch
            android:id="@+id/toggle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:textSize="14sp"
            app:on="true" />

        <com.github.angads25.toggle.widget.LabeledSwitch
            android:id="@+id/toggle2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:textSize="14sp"
            app:on="true" />

        <TextView
            android:id="@+id/toggleState1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:text="끄기"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.github.angads25.toggle.widget.LabeledSwitch
            android:id="@+id/toggle3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:textSize="14sp"
            app:colorBorder="#D50000"
            app:colorOff="#EDE7F6"
            app:colorOn="#673AB7"
            app:on="true"
            app:textOff="끄기"
            app:textOn="켜기" />

        <com.github.angads25.toggle.widget.LabeledSwitch
            android:id="@+id/toggle4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:textSize="14sp"
            app:colorBorder="#D50000"
            app:colorOff="#EDE7F6"
            app:colorOn="#673AB7"
            app:on="true"
            app:textOff="끄기"
            app:textOn="켜기" />

        <TextView
            android:id="@+id/toggleState3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:textSize="20sp" />
    </LinearLayout>

</LinearLayout>

4. 메인 코드 구현 MainActivity.java

 - 속성 -

 setEnabled: true(활성화), false(비활성화)

 setOn: true(On), false(Off)

public class MainActivity extends AppCompatActivity {

    TextView toggleState1, toggleState3;
    LabeledSwitch toggle1, toggle2, toggle3, toggle4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toggle1 = findViewById(R.id.toggle1);
        toggle2 = findViewById(R.id.toggle2);
        toggle3 = findViewById(R.id.toggle3);
        toggle4 = findViewById(R.id.toggle4);

        toggleState1 = findViewById(R.id.toggleState1);
        toggleState3 = findViewById(R.id.toggleState3);


        toggle1.setOnToggledListener(new OnToggledListener() {
            @Override
            public void onSwitched(ToggleableView toggleableView, boolean isOn) {

                if(isOn){
                    toggle2.setEnabled(true); //활성화
                    toggle2.setOn(true); //On으로 변경
                    toggleState1.setText("ON");

                }else{
                    toggle2.setEnabled(false); //비활성화
                    toggle2.setOn(false); //Off로 변경
                    toggleState1.setText("OFF");
                }
            }
        });

        toggle3.setOnToggledListener(new OnToggledListener() {
            @Override
            public void onSwitched(ToggleableView toggleableView, boolean isOn) {

                if(isOn){
                    toggle4.setEnabled(true);
                    toggle4.setOn(true);
                    toggleState3.setText("켜기");

                }else{
                    toggle4.setEnabled(false);
                    toggle4.setOn(false);
                    toggleState3.setText("끄기");
                }
            }
        });

    }//onCreate

} //MainActivity

 

2020.12.12 - [안드로이드] - [안드로이드]스위치(Switch) On, Off 만들어 보기

[안드로이드]스위치(Switch) On, Off 만들어 보기

2020.12.18 - [안드로이드] - [안드로이드]TextSwitcher 글자변환 애니메이션 만들어보기

[안드로이드]TextSwitcher 글자변환 애니메이션 만들어보기

2020.06.11 - [안드로이드] - [안드로이드] 스위치(Switch) 텍스트뷰 색상변경

[안드로이드] 스위치(Switch) 텍스트뷰 색상변경