[안드로이드 스튜디오 독학#24] Custom Button

이 게시물은 다음 링크를 참조하여 학습했습니다.

[안드로이드 스튜디오 정리#8-2] Resource-drawable/

기본적인 Drawable 사용법 - Selector, Shape

android custom button 커스텀버튼 만들기

[Button] android:background not working · Issue #889 · material-components/material-components-android

지난번에 정리했던 [안드로이드 스튜디오 정리 #8] 내용 중에 내가 생각하기에

다른 내용들은 java의 클래스처럼 값을 저장해두고 사용하는 느낌이여서,

이벤트에 따른 이미지의 변경이 가능한 drawable/의 내용을 능숙하게 사용할 수 있도록 연습해보았다.

CustomButton을 구현하면서 두 가지 오류가 발생했다.

1. 버튼 색상이 변하지 않는 오류

간단하게 Custom Button을 만들려 했는데, drawable 안에 상태 드로어블 xml을 만들고 activity_main.xml에서

background 속성으로 넣어주고 사용하려 했으나, 크기와 테두리의 모양만 바뀌고 색상이 기본값에서 변하지 않는 오류가 발생했다.

혼자 고민해보고 내린 결론은

"어떠한 속성"이 내가 정한 색상을 무시하고 그 위에 기본으로 지정된 default 색상 값을 입력해주기 때문에 생긴 오류

였다.

버전이 달라서 그런건지 한글로 된 블로그는 다 비슷비슷한 내용이였고 오류에 대한 언급은 없었다.

그래서 영어로 cant change button color andoid를 검색했고, github에서 나와 똑같은 오류가 발생한 사람을 찾을 수 있었다.

"app:backgroundTint" 속성 값이 문제였다. 이 속성 값이 어디선가 기본 색상 값으로 지정되는 것 같았다.

그래서 구현한 각각의 버튼안에 app:backgroundTint = "@null" 을 넣어주니 오류를 해결할 수 있었다.

2. 가상기기가 동작하지 않는 오류

코드를 수정하고 디버깅을 하니 오류가 발생하지 않았는데, 가상기기에서 동작시키니 가상기기가 작동하지 않았다.....

오류가 뜬 문구를 자세히 확인하지 못했는데 대충 "~~ was killed" 라고 떴던 것 같다.

혼자 고민하다가 혹시나 싶어서 가상기기를 삭제하고 다시 설치했더니 오류가 해결되었다.

아마 그동안 혼자 공부했던 앱 예제들이 다 담겨있어서 용량 문제 혹은 다른 문제로 기기가 맛이 간것 같다.

가상기기도 맛이 갈 수 있다는게 참 신기했다.

어쨌든 이러한 오류들을 해결하면서 Custom Button을 구현할 수 있었다.

이 오류를 해결하면서 github의 중요성을 다시한번 느꼈고, 빨리 기본적인 UI를 끝내고 github 사용법을 배워야겠다 느꼈다.

3. 소스코드

소스코드는 xml파일이 좀 많아서 핵심이 되는 내용만 올리겠다.

button_left.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#f4ac51"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
            <corners
                android:topLeftRadius="10dp"
                android:bottomLeftRadius="10dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#0a64be"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
            <corners
                android:topLeftRadius="10dp"
                android:bottomLeftRadius="10dp"/>
        </shape>
    </item>
</selector>

button_center.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#f4ac51"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#0a64be"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
        </shape>
    </item>
</selector>

button_right.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#f4ac51"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
            <corners
                android:topRightRadius="10dp"
                android:bottomRightRadius="10dp"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid
                android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#0a64be"/>
            <size
                android:width="100dp"
                android:height="30dp"/>
            <corners
                android:topRightRadius="10dp"
                android:bottomRightRadius="10dp"/>
        </shape>
    </item>
</selector>

button_image.xml

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

버튼은 각각 클릭되면 색상이 변하도록 만들었다.

button_left.xml은 왼쪽에 곡선을 준 버튼이고,

button_center.xml은 사각형 버튼이고,

button_right.xml은 오른쪽에 곡선을 준 버튼이다.

button_image.xml은 drawable에 저장한 이미지를 버튼이 눌리고 안눌림에 따라 변화시켜준다.

Custom Button 초기화면