안드로이드 shape - andeuloideu shape

Drawable이란?

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

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

StateListDrawable(상태 드로어블)

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

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

Shape Drawable(쉐이프 드로어블)

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

안드로이드 shape - andeuloideu shape

먼저 Drawable 파일을 만들어 주고

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

size는 도형의 크기

stroke는 도형의 테두리

solid는 도형의 채우기

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

안드로이드 shape - andeuloideu shape

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

Reference

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

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