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

Drawable이란?

Drawable이라는 단어는 '그릴 수 있는'이라는 뜻을 갖고 있는데 말 그대로 화면에 그릴 수 있는 것을 말한다.

res 폴더의 drawable 폴더에는 이미지 뿐만 아니라 그래픽을 어떻게 표현할 지를 xml 파일을 통해 만들 수 있는데 이를 drawable이라고 한다. 이 xml 파일 안에는 여러가지 정보를 넣을 수 있는데 예를 들어 이미지 파일을 지정하고 이를 어떻게 보여줄 지 정하거나(BitmapDrawable) 어떤 상태일 때 이미지를 바꾸거나(StateListDrawable) 모양을 직접 그리는(ShapeDrawable) 등의 여러 가지 그래픽 표현이 가능하다.

 

 

 

StateListDrawable(상태 드로어블)

상태 드로어블이란 앞서 말했듯 특정한 상황에서의 그래픽을 지정하기 위한 드로어블이다.

이를 활용하여 좋아요 버튼이 눌렀을 때 색이 바뀌도록 만들어보자.

 

 

먼저 drawable 폴더에 눌리지 않았을 때의 아이콘과 눌렸을 때의 아이콘을 넣고

 

 

drawable 폴더를 오른쪽 클릭에 xml 파일을 하나 생성하자.

 

 

생성한 xml 파일을 들어가보면  selector 태그가 생성되있는 것을 볼 수 있다.

이 selector 태그는 이미지를 선택해주는 태그라고 생각하면 되는데 여기에 조건을 지정하여 어떤 상황에 어떤 이미지가 선택할 지 정해주면 된다.

 

 

먼저 평소 상태의 이미지를 지정해주고

 

 

그 위에 state_pressed="true" 즉, item이 눌러진 상태일 때 ic_thumb_up_selected 이미지를 표시한다는 정보를 넣는다.

 

 

그리고 레이아웃 파일로 돌아가서 button의 background 속성을 방금 만든 xml 파일로 지정해주면

 

 

이처럼 버튼을 눌렀을 때 우리가 이미지가 바뀜으로서 우리가 원하는 그래픽 효과를 구현할 수 있다.

 

 

 

Shape Drawable(쉐이프 드로어블)

ShapeDrawable은 소스코드에서 Canvas를 사용할 필요없이 간단하게 도형을 그릴 수 있는 드로어블이다.

 

 

먼저 Drawable 파일을 만들어 주고

 

 

기본으로 생성된 selector 태그를 지우고 shape 태그로 바꾸어 주자.

 

 

그리고 그 안에 도형의 모양을 나타내기 위한 속성들을 지정해주자.

size는 도형의 크기

stroke는 도형의 테두리

solid는 도형의 채우기

padding은 도형의 안쪽 여백이다.

 

 

다시 레이아웃 파일로 돌아가 View를 하나 만들어 background를 방금 만든 드로어블로 지정해준다.

 

 

실행시켜보면 우리가 원하던 속성대로 그려진 사각형을 볼 수 있다.

 

 

만약 다른 모양을 그리고 싶다면 위와 같이 shape 태그 안에 shape="oval" 속성을 지정해보자

 

 

다시 실행시켜보면 지정해준 속성처럼 원이 만들어진 것을 볼 수 있다.

 

 

이 외에도 gradient 태그를 통해 그라데이션과 corners 태그를 통해 테두리 모양도 설정할 수 있다.

 

 

그리고 layer-list 태그를 통해서 여러 개의 shape 아이템을 만들어 겹칠 수도 있다.

 

 

Reference

[부스트코스]안드로이드 프로그래밍

https://www.edwith.org/boostcourse-android