무조건 이러한 형태를 가지게 되더라
backgroud 수정 시 style에 override하는 형식?이라서 제대로 고쳐지지도 않고 ㅠㅠ
res/values 아래 ToggleButtonGroupStyle.xml 파일 생성 후 style을 따로 지정해 수정이 가능하다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="ToggleButtonGroupStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="backgroundTint">@color/darkGray</item>
<item name="strokeWidth">5dp</item>
<item name="strokeColor">@color/darkGray</item>
<item name="android:textColor">@color/black</item>
</style>
</resources>
그리고 xml에서 ToggleButtonGroup 하위의 Button의 속성에
style="@style/ToggleButtonGroupStyle"
를 기존 style 대신 적용시키면 된다.
Material Button Toggle Group github
를 통해 스타일을 분석해서 필요한 경우에 따라 변경하면 좋을 듯 하다.
그리고,
클릭시에 background 색을 변경시켜야 했는데
background 속성은 적용 x
대신 backgroundTint 속성을 적용해야한다.
toggleButton.addOnButtonCheckedListener{ toggleButton, checkedId, isChecked ->
if(isChecked) {
when (checkedId) {
R.id.btnIn -> {
Toast.makeText(activity,"입고", Toast.LENGTH_SHORT).show()
btnIn.getBackground().setTint(view.getResources().getColor(R.color.white));
btnOut.getBackground().setTint(view.getResources().getColor(R.color.darkGray));
}
R.id.btnOut -> {
Toast.makeText(activity,"출고", Toast.LENGTH_SHORT).show()
btnOut.getBackground().setTint(view.getResources().getColor(R.color.white));
btnIn.getBackground().setTint(view.getResources().getColor(R.color.darkGray));
}
}
} else {
if(toggleButton.checkedButtonId == View.NO_ID) {
Toast.makeText(activity,"선택 사항 없음", Toast.LENGTH_SHORT).show()
}
}
}
아직 화면 설계를 보고 UI 제작하는 과정이라 야매로 하드코딩을 통해 나름 해결? 했는데 Material Toggle Button의 자연스러운 애니메이션을 포기해버린게 되어 굉장히 딱딱하고 못생겼다(ㅋㅋ) 조금 더 내공이 쌓이면 고쳐보기로
기본 상태
버튼 선택시
참고 url : https://material.io/components/buttons/android#toggle-button