다중 밀도 벡터 그래픽 추가 (뷰)

개념 및 Jetpack Compose 구현

Android 스튜디오에는 머티리얼 아이콘을 추가하고 SVG (Scalable Vector Graphic)와 Adobe PSD (Photoshop Document) 파일을 벡터 드로어블 리소스로 프로젝트에 가져올 수 있는 Vector Asset Studio라는 도구가 포함되어 있습니다. 비트맵 대신 벡터 드로어블을 사용하면 APK 크기가 줄어듭니다. 같은 파일을 사용하여 화질 손실 없이 다른 화면 밀도에 맞게 크기를 조정할 수 있기 때문입니다. 벡터 드로어블을 지원하지 않는 이전 Android 버전의 경우 Vector Asset Studio는 빌드 중에 벡터 드로어블을 각 화면 밀도에 맞는 다른 비트맵 크기로 변환합니다.

Vector Asset Studio 정보

Vector Asset Studio는 프로젝트에 이미지를 설명하는 XML 파일로 벡터 그래픽을 추가합니다. 하나의 XML 파일을 관리하는 것이 다양한 해상도의 여러 래스터 그래픽을 업데이트하는 것보다 간편합니다.

Android 4.4 (API 수준 20) 이하는 벡터 드로어블을 지원하지 않습니다. 최소 API 수준이 그 이하로 설정되어 있다면 Vector Asset Studio를 사용할 때 두 가지 옵션이 있습니다. PNG (Portable Network Graphic) 파일을 생성하거나 (기본값) AndroidX에서 이전 버전과의 호환성 기법을 사용합니다.

Vector Asset Studio는 이전 버전과의 호환성을 위해 벡터 드로어블의 래스터 이미지를 생성합니다. 벡터와 래스터 드로어블은 APK로 함께 패키징됩니다. 벡터 드로어블은 Java 코드에서 Drawable로 참조하거나 XML 코드에서 @drawable로 참조할 수 있습니다. 앱이 실행될 경우 해당 벡터 또는 래스터 이미지가 API 수준에 따라 자동으로 표시됩니다.

AndroidX의 이전 버전과의 호환성

이 기법은 AndroidX 1.0 이상과 Gradle용 Android 플러그인 3.2 이상이 필요하며 벡터 드로어블만 사용합니다. AndroidX의 VectorDrawableCompat 클래스를 사용하면 Android 2.1 (API 수준 7) 이상에서 VectorDrawable을 지원할 수 있습니다.

Vector Asset Studio를 사용하기 전에 먼저 build.gradle 파일에 다음 명령문을 추가해야 합니다.

Groovy

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Kotlin

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    implementation("androidx.appcompat:appcompat:1.7.1")
}

이전 버전과의 호환성을 위해 AndroidX 코딩 기법도 사용해야 합니다(예: android:src 속성 대신 app:srcCompat 속성을 벡터 드로어블로 사용). 자세한 내용은 AndroidX를 참고하세요.

레이아웃에 벡터 드로어블 추가하기

레이아웃 파일에서 아이콘 관련 위젯(예: ImageButton, ImageView)이 벡터 드로어블을 가리키도록 설정할 수 있습니다. 예를 들어, 다음 레이아웃은 버튼에 표시된 벡터 드로어블을 보여줍니다.

그림 1. 레이아웃에서 버튼에 표시된 벡터 드로어블

다음 그림과 같이 위젯에 벡터 드로어블을 표시합니다.

  1. 프로젝트를 열고 벡터 드로어블을 가져옵니다.

    이 예시에서는 New Project Wizard로 생성한 Phone/Tablet 프로젝트를 사용합니다.

  2. Project 창의 Android view에서 레이아웃 XML 파일(예: content_main.xml)을 더블클릭합니다.

  3. Design 탭을 클릭하여 Layout Editor를 표시합니다.

  4. ImageButton 위젯을 Palette 창에서 Layout Editor로 드래그합니다.

  5. Resources 대화상자에서 왼쪽 창의 Drawable 을 선택한 다음, 가져온 벡터 드로어블을 선택합니다. OK 를 클릭합니다.

    벡터 드로어블이 레이아웃의 ImageButton에 나타납니다.

  6. 이미지 색상을 테마에서 정의한 강조 색상으로 변경하려면 Properties 창에서 tint 속성을 찾고 … 을 클릭합니다 .

  7. Resources 대화상자에서 왼쪽 창의 Color 를 선택한 후 colorAccent 를 선택합니다. OK 를 클릭합니다.

    이미지 색상이 레이아웃의 강조 색상으로 변경됩니다.

프로젝트가 AndroidX를 사용할 경우 ImageButton 코드는 다음과 유사합니다.

<ImageButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:srcCompat="@drawable/ic_build_black_24dp"
  tools:layout_editor_absoluteX="11dp"
  tools:layout_editor_absoluteY="225dp"
  android:id="@+id/imageButton"
  android:tint="@color/colorAccent" />

프로젝트가 AndroidX를 사용하지 않는다면 벡터 드로어블 코드는 대신 android:src="@drawable/ic_build_black_24dp"가 됩니다.

코드에서 벡터 드로어블 참조하기

코드에서 일반적인 방법으로 벡터 드로어블 리소스를 정상적으로 참조할 수 있고, 앱 실행 시 API 수준에 따라 그에 상응하는 벡터 또는 래스터 이미지가 자동으로 표시됩니다.

  • 대부분의 경우, XML 코드에서는 @drawable로, 자바 코드에서는 Drawable로 벡터 드로어블을 참조할 수 있습니다.

    예를 들어 다음 레이아웃 XML 코드는 이미지를 뷰에 적용합니다.

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  android:src="@drawable/myimage" />

    다음 코드는 이미지를 Drawable로 가져옵니다.

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    자바

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    getResources() 메서드는 Context 클래스에 있는데, 이는 활동, 프래그먼트, 레이아웃, 보기 등의 UI 객체에 적용됩니다.

  • 앱이 AndroidX를 사용할 경우 (build.gradle 파일에 vectorDrawables.useSupportLibrary = true 문이 없더라도) app:srcCompat 문으로 벡터 드로어블을 참조할 수 있습니다. 예를 들면 다음과 같습니다.

    <ImageView
  android:layout_height="wrap_content"
  android:layout_width="wrap_content"
  app:srcCompat="@drawable/myimage" />

  • 경우에 따라 드로어블 리소스를 정확한 클래스로 형변환해야 할 수도 있습니다. 예를 들어 VectorDrawable 클래스의 특정 기능을 사용해야 할 경우가 있습니다. 이렇게 하려면 다음과 같은 코드를 사용하면 됩니다.

    Kotlin

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  val vectorDrawable = drawable as VectorDrawable
} else {
  val bitmapDrawable = drawable as BitmapDrawable
}

    자바

    if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
  VectorDrawable vectorDrawable = (VectorDrawable) drawable;
} else {
  BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
}

메인 스레드에서만 벡터 드로어블 리소스에 액세스할 수 있습니다.

Android 5.0 (API 수준 21) 이상에서는 AnimatedVectorDrawable 클래스를 사용하여 VectorDrawable 클래스의 속성에 애니메이션을 적용할 수 있습니다. AndroidX를 사용하면 AnimatedVectorDrawableCompat 클래스로 Android 3.0 (API 수준 11) 이상에서 VectorDrawable 클래스에 애니메이션을 적용할 수 있습니다. 자세한 내용은 드로어블 그래픽 애니메이션을 참고하세요.