안드로이드 위젯 컨트롤에 round 적용과 디자인 업그레이드 - Shape Drawable

안드로이드 위젯 컨트롤에 round 적용과 디자인 업그레이드 - Shape Drawable

 

개발환경 : JDK 1.5, eclipse-galileo, Google API 7(android API 2.1), window XP

 

아이폰에 비해 안드로이드는 구글이 지향하는 바 처럼 디자인이 투박하다.

아이폰에서는 어느정도 디자인된 모듈을 제공함으로서 기본 컨트롤만 사용해도

어플을 배포하는데는 지장이 없다. 하지만 안드로이드는 기본 디자인으로

배포하기에는 뭔가 아쉽다. 개발하는 입장에서 자기 자식이나 마찬가지인

어플을 세상에 보여줄 때 이쁘게 치장해 보여주고 싶은 것이 인지상정이다.

 

이번에 소개할 것은 컨트롤에 라운드를 주는 작업이다. 직사각형이 아닌 모서리가

깍인 라운드만 주더라도 그렇게 딱딱해 보이지 않는다. 이작업을 하는 것이

Shape Drawable 이다. drawable 폴더에 shape xml 태그를 작성해 넣으면 되는데

shape 태그의 속성들은 다음과 같다.

shape 태그에서 shape 값은 line과 oval 이있는데 line 은 간단하게 선을 만들며

oval 은 타원형 형태로 만들어진다. 아래는 TextView 를 테스트 해본 그림이다.

테스트 결과 corners 의 속성값에 영향을 받지 않는다.

rounded_corner1.xml

shape 에 line 을 넣었을 때다. line 셋팅시 한줄의 라인을 표시하는 것이다.

dashWidth 값을 주어서 점선으로 표현하였다.

 

rounded_corner1.xml

shape 속성값을 알아보았으니 이제 shap 내에 들어가는 태그 값들에 속성을 알아본다.

solid : 단색으로 채워 넣는다.

stroke : 테두리를 그린다. 점선은 dashWidth, dashGap 사용한다.

corners : 가장자리를 round 처리한다.

padding : 패딩처리를 한다.

gradient : solid 대신 gradient 효과를 주기 위해 대체되는 속성

 

위의 속성값을 이용해서 TextView를 꾸며 보았다. 밋밋한 형태보다 테두리를 두르고

Border 색깔을 주니 기본 형태보다는 좋은 것 같다. 각진 형태를 없애기 위해 라운드를

주고 stroke 속성값을 통해 TextView의 테두리를 주어서 좀더 보기 좋게 표현하였다.

다음은 구글에서 그라디에이션을 적용한 예제이다.

drawable xml 값을 컨트롤에 적용하기 위해서 xml background 를 사용하였는데

이것을 소스에서 적용하고 싶다면 다음과 같이 사용하면 된다

Resources res = getResources();
Drawable shape = res.getDrawable(R.drawable.rounded_corner1);
TextView tv = (TextView)findViewById(R.id.txt_real);
tv.setBackgroundDrawable(shape);

TextView 는 조금만 더 다듬는다면 shape 속성값으로 원하는 디자인이 나올 것

같은데 일반 버튼이나 TextEdit 는 형태 자체를 없애버리므로 TextEdit 인지 button 인지

구분이 가지 않는다.

그래서 나름대로 버튼을 개선해보기로 했다. 먼저 Button 컨트롤은 주위에 테두리를 주고

마우스를 클릭했을 때 색깔이 바뀌는 걸로 해보자.

이 내용도 위와 비슷하며 단지 차이가 있다면 selector 태그를 이용해 버튼 이벤트에 따라

적용되는 내용이 달라진다는 것이다. xml 설정값에 보면 포커스가 갔을 때, 눌렀을때,

기본값일 때 등으로 나눠 져 있는 것을 볼수 있다. 색깔값은 values/strings.xml 에

지정해 두었다. 위저드를 이용할 경우 Color 를 선택해 색깔값을 넣고 저장하면 된다.

버튼에 적용된 xml 설정값이며 drawable 폴더에 들어가 있어야 한다. 아래 xml 을 적용하기

위해서는 android:background=”custom_button” 같이 하면 된다.

custom_button.xml

적용한 결과 화면이다. 디자인 감각이 조금더 있었으면 좀더 보기 좋았을 텐데

아쉽다. 하다보면 좋아지겠지라는 막연한 믿음을 가지고 디자인은 여기까지 ㅋ