안드로이드 스튜디오 버튼 모양, 색깔 바꾸기 kotlin

안녕하세요. 공돌이 입니다.

지난번 포스팅에 이어 버튼 button의 옵션 기능에 대해서 공유하겠습니다. 기본적으로 제공되는 버튼의 모양은 회색의 박스 타입의 구조입니다. 유저가 클릭했을 때 회색에서 찐한 회색으로 변하는 모습을 확인하실 수 있습니다. 개발자의 의도에 따라 버튼의 색을 다양한 색상으로 바꾸기도 하고, 또 눌렀을 때 피드백될 수 있도록 색의 변화를 주는 방법이 있습니다. 그리고 네모 반듯한 구조의 버튼보다는 조약돌처럼 둥그스름한 모양의 버튼이 조금 더 예뻐 보이기에 네모 박스에서 코너를 라운딩 시키는 방법에 대해서도 함께 소개하도록 하겠습니다. 아래 이미지는 최종 버튼들의 모양입니다.

 

기본 버튼에서 파란색, 붉은색으로 변화를 준 모습입니다. 그리고 우측 그림은 가운데 버튼을 터치했을 때의 색상 변화의 모습입니다. 버튼 뿐만이 아니라, 어떤 항목에 대해서도, layout의 .xml파일에서 android:background=””으로 색을 변경할 수 있습니다. “” 사이에 #fxxxxxx이런 형태의 색깔 코드 명령어를 넣어도 되고, 또 drawable에서 가져오는 형태로 @drawable/id 와 같은 형태로도 버튼의 색상을 변경할 수 있습니다. 하지만 이 방법으로는 버튼의 색상만 바뀌는 것이지, 위의 그림처럼 버튼의 모양이나, 눌렀을 때의 변화는 줄 수가 없습니다. 위의 예시와 같은 변화를 주기 위해서는 xml파일이 필요로 하게 됩니다. 먼저 res 폴더의 drawable에 color_change라는 xml 파일을 만들어줍니다. 그리고, layout의 .xml파일에서 버튼의 background 정보를 "@drawable/color_change"로 표기하여 해당 정보를 불러올 수 있도록 경로를 설정합니다.

 

<Button

android:id="@+id/button2"

android:text="Button"

android:background="@drawable/color_change"

/>

 

그리고, 다시 drawable에 작성한 color_change.xml파일에 대해서 아래와 같이 코드를 작성합니다. 아래 코드에 대해서 많은 설명이 필요합니다.

 

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.~~~~~~~~~~~~~">

    <item android:state_enabled="false">

        <shape>

            <solid android:color="#0B59DF"></solid>

            <corners android:radius="20dp"></corners>

        </shape>

    </item>

    <item android:state_pressed="true">

        <shape>

            <solid android:color="#E8C854"><solid>

            <corners android:radius="10dp"></corners>

        </shape>

    </item>

</selector>

 

먼저 <item android:state_enabled="false"> 부분 입니다. 이 코드는 아래에 동일하게 <item android:state_pressed="true">로 반복이 되며, false와 true의 차이가 있음을 확인할 수 있습니다. False는 버튼이 눌러지지 않은 상태, true는 버튼이 눌러진 상태를 뜻합니다. 즉 버튼을 눌러 줬을 때는 어떻게 하고, 선택되지 않은 상태에서는 어떻게 있어라 하는 내용입니다. 다음은 <shape>입니다. <shape>이후에오는 <solid android:color="#0B59DF"></solid>가 해당 상황에서의 버튼 색상을 의미합니다.그리고 이어지는 <corners android:radius="20dp"></corners>가 바로 반듯한 네모 박스의 버튼의 모서리를 얼마나 둥그렇게 만들 것인지 결정하는 부분입니다.라고 표기된 부분이 바로 그 부분입니다. 여기서 눈치가 빠르신 분은 버튼이 터치되었을 때와 그렇지 않았을 때 모양을 바꿀 수 있다 라는 사실을 알 수 있습니다. 처음에 첨부한 그림을 다시 자세히 보시면 두 번째 버튼이 클릭 후에 모서리의 모양이 달라져 있음을 확인하실 수 있습니다.

 

Drawable 폴더에 이 xml파일을 이름을 다르게 하여 여러 개 만드신 후 layuout 폴더의 activity_main.xml파일에 background 경로를 수정함으로써 유저가 원하는 모양의 버튼 구조와 색상 변경이 가능합니다. 2~3개 정도 복사해 두고 필요할 때 가져와서 조금씩 수정하여 사용하시면 매우 편리합니다.

이전 포트스에서 터치를 원하지 않은 경우 View.INVISIBLE로 숨겨 버리는 방법을 소개했었습니다.하지만 만약 버튼을 숨기지 않고, 터치가 불가능하게만 만들고 싶을 경우가 있을 수 있는데요. 이 방법은 MainActivity.kr에서 button2.isClickable=false 라는 code를 onCreate 아래에 넣어 주시면 됩니다. 다시 터치가 가능하게 하고 싶을 경우에도 동일하게 하되 false를 true로 바꾸어 button2.isClickable=true로 입력하면 터치가 가능하도록 변경이 됩니다.

 

그리고, tip으로 보통 button은 setOnClickListener를 활용하여 click 시 특정 action을 취하도록 프로그래밍하게 됩니다. 하지만! 유저가 클릭하지 않아도 특정 시간, 특정 환경이 됐을 때 마치 터치가 일회 실행되는 것처럼 하고 싶은 경우가 있습니다. 물론 setOnClickListener에 작성 코드를 다시 한번 써도 되지만 클릭이 된 것처럼 인식해라 라는 명령어가 있다면 좋겠죠? 그 명령어는 callOnClick입니다. 사용방법은 button.callOnClick() 이라고 작성만 하면 됩니다. 특성 상황이 왔을 때 해당 명령어를 넣으면, 유저가 터치를 하지 않았음에도 마치 터치된 것처럼 인식하여 해당 작업을 진행하게 됩니다.

 

다음 포스트에는 animation입니다. Animation 방법에는 다양한 기법이 있습니다. 무거운 특수 프로그램을 사용할 수도 있지만, 안드로이드 스튜디오에서 제공하는 간단한 방법으로 특정 모션이 가능한데요. 해당 기능에 대해 간략히 소개해 보고자 합니다.

 

감사합니다.