Android Vector Drawable(Asset) 사용하기

안드로이드를 개발하다 보면, 여러 아이콘(Icon)들을 사용하게 될 때가 많습니다. 레이아웃을 구성할 때 Bottom Navigation View와 같이, 바텀 바에 아이콘들이 놓여있는 뷰 라면 아이콘에 더욱 신경을 쓰게 됩니다. 이 과정에서 PNG와 같은 이미지 확장파일은 용량도 크고, 개발자가 원할 때 바로 크기를 변경하기 어렵습니다. Android Studio 에서는 이 두 마리 토끼를 모두 잡을 수 있는 Vector Asset Studio가 내장되어 있습니다.

사용을 위한 설정

app.gradle 파일을 열어 defaultConfig 태그 안에 아래 소스를 추가합니다.

vectorDrawables.useSupportLibrary = true

위와 같이 지원 라이브러리를 사용하게 되면, 지원 라이브러리와 호환될 수 있는 코딩 기술을 사용해야 합니다. ImageView에서 android:src 특성 대신, app:srcCompat특성을 이용하여 Vector Asset을 지정해 주어야 합니다.

직접 추가해 보자

Vector Asset Studio를 활용하여 Vector Icon을 추가할 수 있는 방법은 두 가지가 있습니다. 첫 번째, Material Icon을 직접 선택하여 추가하는 방법. 두 번째, SVG 또는 PSD를 직접 임포트(import)하여 추가하는 방법이 있습니다.

Project 탭에서 Android로 선택합니다.

그 다음, res > drawable 폴더에서 우클릭 한 뒤, new -> vector Asset을 클릭합니다. 그럼 아래와 같은 창이 뜨는데, Asset Type을 Clip Art를 선택해 주세요.

이제 Clip Art 라고 쓰여져 있는 곳 옆에 아이콘을 누르게 되면, 아래 사진과 같이 많은 양의 Material Icon들을 볼 수 있습니다.

이제 원하는 아이콘을 골라 추가하시면 끝입니다. 한 가지 주의할 점이라면, 위에서도 말씀드렸듯이 특성을 app:srcCompat으로 지정하는 것입니다.

직접 SVG파일이나 PSD파일을 추가할 수 있습니다. Google Material Icon 사이트에서 파일을 다운받아 추가할 수 있습니다.

원하는 아이콘을 선택하여 내려받습니다.

그 다음, Project 탭에서 Android로 선택합니다.

그 다음, res > drawable 폴더에서 우클릭 한 뒤, new -> vector Asset을 클릭합니다. 그럼 아래 사진과 같은 창이 뜨는데, Asset Type을 Local file로 선택해 주세요. 그리고 Path 옆의 점 3개 버튼을 눌러 다운로드한 SVG의 파일을 선택합니다.

추가가 완료 되었습니다. 한 가지 주의할 점이라면, 위에서도 말씀드렸듯이 특성을 app:srcCompat으로 지정하는 것입니다.

---

Vector Asset Studio는 기본으로 제공하는 클립아트를 이용하여 벡터 에셋을 추가할 수 있을 뿐만 아니라, 직접 불러올 수도 있습니다. 또한, 같은 파일을 사용하여 화질 손실 없이 다른 화면 크기에 맞도록 조절할 수 있다는 것이 큰 장점입니다.

Vector Asset Studio를 이용해서 더욱 멋진 앱을 만들어 보시기 바랍니다.