마스터Q&A 안드로이드는 안드로이드 개발자들의 질문과 답변을 위한 지식 커뮤니티 사이트입니다. 안드로이드펍에서 운영하고 있습니다. [사용법, 운영진]

이런 switch 버튼은 커스템해야하나요?

0 추천

 

오른쪽 형태의 스위치버튼을 만들어서 값을 선택하는 방식을 사용하고 싶은데요,

이상하게 switch라고 검색해봐도.. 저런 식의 레이아웃 모양은 하나도 없고

다 긴 막대에 둥그런 모양의 스위치가 전부 다더라구요..

혹시 커스텀해야하는건가요?

 

+ 그리고 번외질문으로

xml에서 그냥 Swtich와 SwtichCompat이 있던데 차이점이 뭔가요?

Switch를 사용하니 Switch 코드부분이 전부 노란색이 되면서 

tools:ignore="UseSwitchCompatOrMaterialXml"

라는걸 사용하라고 문구가 뜨더라구요.

codeslave (3,940 포인트) 님이 2021년 12월 31일 질문

1개의 답변

0 추천

네. 오른쪽에 on/off에 상태의 해당하는 이미지를 준비하신 다음, selector를 만들어서 background로 설정해 주시면 됩니다.

selector를 만드는 건 별로 어렵지 않으니, 개발자 문서를 보고 하셔도 되고 안드로이드 스튜디오 플러그인을 사용하셔도 되고,

https://angrytools.com/android/button/

https://tdscientist.github.io/button4Android/ 

와 같은 사이트를 이용하셔서 기본 골격을 만드신 다음에  selector에 이미지를 설정해 주시면 됩니다.

 

drawable/selector_my_switch.xml

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

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

    <item android:drawable="@drawable/deafult_image" /> 
</selector>

위처럼 된  selector 를  drawable 폴더에 만들고. 해당 뷰의 background를 만드신 selector 로 설정해 주시면 됩니다.

android:background="@drawable/selector_my_switch"

컴포넌트는 Switch 버튼을 사용하셔도 되는데 RadioButton을 사용하셔도 됩니다. RadidoButton 의 경우는 button 속성을 @null로 만들어 주시면 기본으로 설정된 이미지가 없어질 겁니다. SwitchButto은 그렇게는 안되고 방법을 찾아봐야 겠네요. SwitchButton을 사용하신다면, 이 부분은 구글링해보시길 바랍니다.

android:background="@drawable/selector_my_switch"
android:button="@null"

 

그리고 *Compat는 오래된 안드로이드 버전을 지원하기 위해 만들어진 겁니다. xml에서는  Compat이 안붙은 걸 사용하시면 내부적으로 알아서 처리해 줍니다.

spark (227,830 포인트) 님이 2021년 12월 31일 답변
올리신 이미지를 보다보니 예전에 Icecream Sandwitch 버전이 나왔을 때 Holo theme이란 걸 사용했었습니다. 구글에 검색해보시면 아마도 해당 이미지를 찾으실 수 있을 거예요.
https://www.google.com/search?q=Android+switch+holo+theme&sxsrf=AOaemvJTTr1znmvJBlvZzgBpiYjUzrB99w:1640895927143&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjlxObWrYz1AhWDTGwGHY2rCg0Q_AUoAnoECAEQBA&biw=1920&bih=944&dpr=2#imgrc=DRX7yig1TVWSvM
...