[Android]안드로이드 minSDKVersion 19이하에서 벡터이미지 사용하는 방법 및 APK 사이즈 축소 하는 방법

벡터 이미지를 사용하여 앱을 만들 때, minSDKVersion 19 로 설정하는 경우 벡터 이미지를 그대로 사용하여 apk를 생성시 apk 파일의 사이즈를 축소하는데 도움이 되는 방법에 대해 알아봅니다. API 19는 안드로이드 4.4(KitKat)에 해당하며, 아주 오래된 버전의 OS입니다.  벡터이미지는 안드로이드 개발시, 기기의 해상도 별로 이미지를 준비해야하는 부담을 해소할 수 있습니다. ldpi, hdpi, xhdpi, xxhdpi, xxxhdpi 별로 이미지를 만들 필요가 없게 됩니다. 벡터 이미지 하나면 끝나는 것이죠. 

다음은 일반적인 app레벨의 build.gradle파일입니다. vectorDrawables.useSupportLibrary = true 옵션을 추가하여 벡터이미지 지원을 허용하도록 설정하였습니다.

[build.gradle]

android {
   compileSdkVersion 28
   defaultConfig {
       applicationId "com.example.android.diceroller"
       minSdkVersion 19
       targetSdkVersion 28
       versionCode 1
       versionName "1.0"
       
       vectorDrawables.useSupportLibrary = true 
   }

벡터 이미지(vector drawables)에 대해 주목해야 할 중요한 점은 API 21 이상에서 지원된다는 것입니다.

그러나 앱의 최소 SDK는 API 19로 설정할 경우 API 19가 설치된 기기 또는 에뮬레이터에서 앱을 실행해보면 앱이 제대로 빌드되고 실행되는 것처럼 보입니다. 그러나 앱을 빌드 할 때 Gradle 빌드 프로세스는 각 벡터 파일에서 PNG 파일을 생성하고 이러한 PNG 파일은  API 21 이하의 모든 Android 기기에서 사용됩니다. 이러한 추가 PNG 파일은 앱(APK)의 크기를 증가시킵니다. 불필요하게 큰 앱은 좋지 않습니다. 사용자의 다운로드 속도가 느려지고 기기의 제한된 공간을 더 많이 차지합니다. 

AS-IS : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/ic_launcher_foreground"/>

</LinearLayout>

TO-BE : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"    
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:srcCompat="@drawable/ic_launcher_foreground" />

</LinearLayout>

xml 레이아웃에서 벡터이미지 사용하는 경우에 android:src=@drawale/벡터이미지_파일이름” 대신에

app:srcCompat=”@drawale/벡터이미지_파일이름”를 사용하세요. 그렇게 하면 API 19이하에서도 PNG파일을 생성하지 않고 벡터이미지를 그대로 사용할 수 있게됩니다. 

위의 예제에서 사용한 안드로이드 모양의 이미지의 경우 아래와 같이 xml 구조의 벡터 이미지입니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
    <path android:pathData="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endX="85.84757"
                android:endY="92.4963"
                android:startX="42.9492"
                android:startY="49.59793"
                android:type="linear">
                <item
                    android:color="#44000000"
                    android:offset="0.0" />
                <item
                    android:color="#00000000"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
    <path
        android:fillColor="#FFFFFF"
        android:fillType="nonZero"
        android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
        android:strokeWidth="1"
        android:strokeColor="#00000000" />
</vector>

[REFERENCE]

developer.android.com/codelabs/kotlin-android-training-images-compat#5

[프로그래밍/Kotlin] – [android : kotlin] 코틀린 ImageView사용 예제

[연관 자료]