안드로이드 토글 버튼 on/off (아이폰 스타일)

 

Toggle button (off)

Toggle button (on)

 

 

 

실제 어플 적용 화면

 

drawable 폴더에 toggle 버튼으로 쓸 on, off 이미지를 각각 넣어줍니다

저는 photoscape X 라는 무료 툴을 사용하여 만들었습니다.

 

 

토글 버튼을 사용할 layout 에 code를 입력해줍니다

 

[.xml]

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="77dp"
    android:layout_height="44dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_gravity="center"
    android:background="@drawable/toggle_selector"
    android:checked="false" />

 

android:cheked = "false" 혹은 "true"를 이용하여 화면 표출시 toggle button의 on/off를 제어할 수 있습니다.

toggle on/off 활성화를 위해 drawble에 toggle_selector.xml 파일을 만들어줍니다

 

 

[toggle_selecter.xml]

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

    <item android:drawable="@drawable/toggle_on" android:state_checked="true"/>
    <item android:drawable="@drawable/toggle_off" android:state_checked="false"/>

</selector>

 

이 부분까지만 해도 toggle button이 동작하는 경우가 있는데요 

동작하지 않으신다면 toggle 버튼을 사용할 class 파일에 코드를 입력해주시면 됩니다 

 

 

저는 fragment창에 만들어주었습니다

 

[Fragment.java]

ToggleButton toggleButton;

전역변수로 ToggleButton을 선언해줍니다

 

fragment 창이므로 onCreateView 함수 안에 입력해줬습니다. 

 

@Override
public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_temp, container, false);

    toggleButton = view.findViewById(R.id.toggleButton1);
    
    toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                if(toggleButton.isChecked()) {
                    toggleButton.setChecked(true);
                    Toast.makeText(getActivity(), "on", Toast.LENGTH_SHORT).show();
                }else {
                    Toast.makeText(getActivity(), "off", Toast.LENGTH_SHORT).show();
                }
            }
        });
        
        return view;
        }

 

 

궁금한점은 편하게 댓글 남겨주세요

toggle button 이미지 파일 원하시는 경우에도 댓글 남겨주세요

 

감사합니다