안드로이드 앱을 개발하다 보면 닫기(Close) 버튼처럼 X자 형태의 아이콘이 필요한 경우가 자주 있습니다. 이번 글에서는 벡터 드로어블(Vector Drawable)을 활용해 안드로이드에서 닫기 모양을 직접 그리고 화면에 표시하는 방법을 단계별로 알아보겠습니다.
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 드로어블을 지정했습니다. ImageView의 크기를 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="612"
android:viewportHeight="612">
<path
android:fillColor="#FF000000"
android:pathData="M612,306C612,137.004 474.995,0 306,0C137.004,0 0,137.004 0,
306c0,168.995 137.004,306 306,306C474.995,612 612,474.995 612,
306zM168.3,424.032L286.333,306L168.3,187.967l19.667,-19.667L306,
286.333L424.032,168.3l19.668,19.667L325.667,306L443.7,424.032L424.032,
443.7L306,325.667L187.967,443.7L168.3,424.032z" />
</vector>이 벡터 드로어블은 두 개의 경로 데이터로 구성되어 있습니다. 첫 번째 부분은 원형 배경을 그리고, 두 번째 부분은 원 안에 X(닫기) 모양을 그립니다. android:fillColor 속성으로 색상을 지정할 수 있으며, 여기서는 검정색(#FF000000)을 사용했습니다. 색상을 변경하고 싶다면 이 값을 수정하면 됩니다.
앱 실행 및 결과 확인
이제 애플리케이션을 실행해 결과를 확인해 보겠습니다. 실제 안드로이드 기기를 컴퓨터에 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 실행할 모바일 기기를 선택합니다. 그러면 기기 화면에 다음과 같이 닫기(X) 모양 아이콘이 표시됩니다.
마무리
이처럼 벡터 드로어블과 pathData만 활용하면 이미지 리소스 없이도 닫기 아이콘 같은 도형을 쉽게 그릴 수 있습니다. 해상도와 무관하게 선명하게 표시되고 용량 부담도 적기 때문에, 간단한 아이콘은 벡터 드로어블로 직접 만들어 사용하는 것이 효율적입니다.