안드로이드 앱을 개발하다 보면 별 모양처럼 다양한 도형을 화면에 표시해야 할 때가 있습니다. 이번 튜토리얼에서는 벡터 드로어블(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>위 코드는 LinearLayout 안에 ImageView 하나를 배치하고, 해당 ImageView의 배경으로 background.xml 드로어블 리소스를 지정하는 구조입니다. gravity 속성을 center로 설정해 화면 중앙에 별 모양이 표시되도록 했습니다.
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="512"
android:viewportHeight="512">
<path
android:fillColor="#D80027"
android:pathData="M512,198.525l-176.891,-25.704L256,12.53l-79.108,160.291L0,
198.525l128,124.769L97.784,499.47L256,416.291l158.217,
83.179l-30.219,-176.176L512,198.525zM256,376.749l-111.731,
58.74l21.338,-124.415l-90.393,-88.111l124.92,-18.152L256,
91.613l55.867,113.198l124.918,18.152l-90.395,88.111l21.34,
124.415L256,376.749z" />
</vector>여기서 핵심은 <vector> 태그와 <path> 요소입니다. pathData 속성에는 별의 외곽선과 내부 윤곽을 그리는 좌표 데이터가 담겨 있으며, fillColor 속성(#D80027)으로 붉은색 채우기 색상을 지정했습니다. 벡터 방식이기 때문에 해상도와 관계없이 선명하게 표시된다는 장점도 있습니다.
4단계: 앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 기기를 컴퓨터와 연결했다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 상단 툴바의 Run(실행) 아이콘을 클릭하세요. 실행 옵션 목록에서 자신의 모바일 기기를 선택하면, 기본 화면에 아래와 같이 빨간색 별 모양이 출력되는 것을 확인할 수 있습니다.
마무리
이처럼 벡터 드로어블을 사용하면 이미지 파일 없이 XML 코드만으로 다양한 도형을 구현할 수 있습니다. fillColor 값을 변경하거나 pathData를 수정하면 색상과 형태를 자유롭게 조절할 수 있으니, 응용해서 원하는 도형을 직접 만들어 보시기 바랍니다.