안드로이드 개발노트2: 간단하지만 예쁜 레이아웃 만들기 (Android Developer's Note: Simple and Pretty Layout)

안드로이드 앱을 만들 때 대부분 기능적인 요소는 java 코드로 구현하고 사용자 인터페이스 같은 View는 layout 쪽의 xml 파일에 구현하는 것이 일반적이다. 그런데, xml의 경우 제한사항이 많아서 원하는 대로 디자인이 잘 나오지 않는 경우가 많다. (마치 css가 없는 html을 사용하는 기분...) 특히, 도형이나 이미지 등을 사용하고 싶다면 java 쪽에서 Canvas와 draw 관련 메서드 등을 사용해서 그때그때 액티비티가 생성되거나 로드될 때마다 기능적으로 그려주는 편법아닌 편법을 사용해야 하는 경우가 많다.

따라서 이번 포스트에서는 간단한 도형을 xml로 손쉽게 그리고 사용자와 인터랙션할 수 있는 초간단 레이아웃을 구현해보도록 하겠다. 위의 이미지와 동일하게 생긴 버튼을 만들어 보겠다.

우선 layout쪽의 xml에서 문자열을 담기 위한 TextView를 하나 만들어준다.

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="@string/score"
android:id="@+id/score" />

res/values/strings에 score라는 문자열을 따로 "0"으로 정의해두었다.
넓이와 높이를 설정하는 부분에서 match_parent는 부모의 크기에 따른다는 것이고, wrap_content는 필요한 만큼만 공간을 차지하겠다는 의미이다. 따라서 위의 코드는 넓이가 화면에 가득차고, 높이는 숫자 0의 세로 길이만큼만 차지하는 TextView를 생성할 것이다.
그리고 gravity는 문자를 가운데로 정렬하겠다는 의미이다. 그런데, width를 wrap_content로 바꿔보면, TextView 전체가 가운데 정렬이 된 것이 아니라, TextView 안에 있는 0만 가운데 정렬이 된 상태고, TextView 자체는 왼쪽으로 쏠려 있는 것을 관찰할 수 있다.

TextView 자체를 가운데 정렬하기 위해서는, RelativeLayout을 사용하면 된다. TextView의 앞뒤를 RelativeLayout으로 감싸고, TextView 안에

android:layout_centerInParent="true"

를 추가하면 된다.
만약 여러가지를 동시에 RelativeLayout에서 컨트롤하고 싶은 것이 아니라, 딱 한가지 개체를 가로 한 줄 기준으로 화면 중앙에 놓고 싶다면 번거롭게 RelativeLayout을 사용할 필요 없이 다음과 같은 간단한 코드 한줄로 구현할 수 있다.

android:layout_gravity="center_horizontal"

그리고 글자 색, 사이즈, 폰트 등을 설정하려면 TextView에 다음과 같은 속성들을 추가해주면 된다.

android:typeface= "monospace"
android:textSize= "15pt"
android:textColor= "#7EC0EE"
android:textStyle= "bold"

이제 도형을 그리면 된다. 사각형, 원, 직선 등 여러 다양한 도형을 그리려면 java 코드 쪽에서 Canvas라는 것을 활용하면 되는데, 기능적인 것들을 구현하는 부분과 외관을 구현하는 부분을 구별해주기 위해 xml을 통해 그리는 법을 알아보자.

우선 xml에서 도형을 그리려면 <shape>라는 태그를 사용하여야 한다. 그런데, layout에서의 xml 파일에 <shape>라는 태그를 사용하려 하면 해당 태그가 허용되지 않는다는 오류가 발생한다. 따라서 res/drawable 디렉터리 안에 아무이름으로 xml 파일을 하나 만들어서 사용하도록 하자. 원을 그릴 것이니 oval.xml로 파일을 하나 만든 뒤 다음 코드를 붙여 넣는다.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#FFFFFF"/>
<stroke android:width="5pt" android:color="#7EC0EE"/>
<corners android:radius="15pt"/>
</shape>

테두리 색은 앞서 만들어 둔 TextView의 글자 색과 깔맞춤을 했다. 이외에도 다양한 속성을 추가해서 점선을 그리거나, 그라데이션으로 색을 채우는 등 다양한 커스터마이징이 가능하기 때문에 <shape> 태그의 사용법에 대해 구글링 해보는 것을 추천한다.

이렇게 만들었으면 이제 이 원을 layout에서 불러오기만 하면 된다. 간단하게, 앞서 만들어 둔 TextView의 배경으로 이 원을 설정한다.