이 튜토리얼에서는 안드로이드에서 원형 배경 모양 위에 체크 표시(틱 마크)를 그리는 방법을 단계별로 소개합니다. 벡터 드로어블(VectorDrawable) 하나만 사용하기 때문에 어떤 화면 해상도에서도 선명하게 표현되며, 별도의 이미지 리소스 없이도 깔끔한 체크 아이콘을 만들 수 있다는 점이 큰 장점입니다.
1단계 — 새 프로젝트 생성
Android Studio에서 File → New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 정보를 모두 입력하여 프로젝트를 만듭니다.
2단계 — 레이아웃 파일 작성
res/layout/activity_main.xml 파일에 아래 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_marginTop="30dp"
tools:context=".MainActivity">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@drawable/background"/>
</LinearLayout>
위 코드에서는 ImageView를 하나 배치하고, 해당 뷰의 배경으로 background.xml 드로어블을 지정했습니다. 크기는 100dp로 설정되어 있으며, 필요에 따라 자유롭게 조절할 수 있습니다.
3단계 — 벡터 드로어블 작성
drawable/background.xml 파일에 아래 코드를 추가합니다.
<vector xmlns:android="https://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:autoMirrored="true"
android:viewportWidth="426.667"
android:viewportHeight="426.667">
<path
android:fillColor="#6AC259"
android:pathData="M213.333,0C95.518,0 0,95.514 0,213.333s95.518,213.333 213.333,
213.333c117.828,0 213.333,-95.514 213.333,-213.333S331.157,
0213.333,0zM174.199,322.918l-93.935,-93.931l31.309,-31.309l62.626,
62.622l140.894,-140.898l31.309,31.309L174.199,322.918z" />
</vector>
이 벡터 드로어블은 426.667 × 426.667 뷰포트 안에 초록색(#6AC259) 원형 경로를 그리고, 그 위에 체크 표시 경로를 함께 담고 있습니다. fillColor 값만 변경하면 원하는 색상으로 손쉽게 커스터마이징할 수 있습니다.
앱 실행 후 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바의 실행
아이콘을 클릭하세요. 기기 목록에서 본인의 모바일 기기를 선택하면, 아래와 같은 화면이 표시됩니다.
