[Android] Material design Button

Kim Nahyeong·2021년 10월 7일
0

[발생 문제]

  1. 스위치 형식의 토글 버튼을 제작해야하는데 스위치 내에 글씨를 넣는 방식이 없는 것 같음
  2. Material Toggle Button Group 을 이용했더니 style이 이미 지정되어있어 변경 쉽지 않았음


무조건 이러한 형태를 가지게 되더라
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의 자연스러운 애니메이션을 포기해버린게 되어 굉장히 딱딱하고 못생겼다(ㅋㅋ) 조금 더 내공이 쌓이면 고쳐보기로


결과물

0개의 댓글