Android Adaptive Icon

출처 - https://codechacha.com/ko/android-adaptive-icon/

 

Android Adaptive Icon

소개

Android O에서 소개된 Adaptive Icon에 대해서 소개합니다. Oreo 이전에 개발자가 아이콘에 대해 처리할 것은 DPI 사이즈별로 아이콘을 폴더에 넣어두는 것 뿐이었습니다. 그러면 런처앱들은 LauncherApps 또는 PackageManager를 통해서 아이콘을 가져와서 사용자에게 보여주게 됩니다.

문제는 앱들의 아이콘들이 모두 다양하기 때문에 폰을 만드는 제조사의 입장에서 예쁘지 않다고 생각한다는 것입니다. 갤럭시S를 예로 들면, 다양한 앱의 아이콘들을 Rounded square 형태로 변경하여 보여줍니다. 이런 방식은 일관성은 있지만, 아이콘의 일부가 잘리기 때문에 어색해 보일 수 있습니다.

구글은 이런 문제를 해결하기 위해 Adaptive Icon을 소개한 것 같습니다. 이제 제조사는 임의로 아이콘의 외곽선을 자를 수 있고, 구글은 3rd party 개발팀에게 아이콘 스펙을 알려주어 아이콘이 잘리는 일이 없게 하였습니다.

아래 그림처럼 제조사는 임의의 마스크로 아이콘을 자를 수 있고, 규격에 맞게 아이콘을 제작하면 중요한 부분이 잘리지 않습니다.

Adaptive Icon은 두개의 layer로 구성되어있습니다. 개발자는 foreground와 background 이미지를 준비해야 합니다. 아래 그림은 모든 과정을 간단히 보여줍니다. 아이콘을 생성할 때 2개의 layer는 포개지고, 제조사에서 준비한 mask로 이미지를 자릅니다. 이렇게 잘려진 이미지가 런처에서 보이게 됩니다.

마스크(mask)

마스크의 모양은 런처에서 결정합니다. rounded square, circle, rectangle 등의 형태가 될 수 있습니다. circle의 경우 최소 지름 66dp로 자를 수 있기 때문에 디자인할 때 이 부분을 고려해야 합니다.

레이어(layer)

foreground와 background 이미지는 108dp*108dp 사이즈로 제작되어야 합니다. 그리고 foreground는 투명(transparent)이미지를 포함해도 되지만, background는 불투명해야합니다.

두개로 레이어로 아이콘을 제작하기 때문에, 아래 그림처럼 시각적인 효과를 줄 수 있습니다. 이런 시각적인 효과를 사용할지 여부는 런처에서 결정하게 됩니다. 아무것도 하지 않는다면 단순히 마스킹된 정적 이미지가 보여집니다.

구현

API26으로 안드로이드 프로젝트를 생성하면 기본적으로 Adaptive icon이 적용되어있습니다. res > mimpap > mipmap-anydpi-v26폴더에 ic_launcher.xml을 보면 background와 foreground에 대한 이미지가 정의되어 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

foreground와 background는 vector로 구현되어있고 사이즈가 108dp*108dp로 설정되어 있습니다. 이 이미지들은 런처에서 마스킹 작업을 거쳐 잘려진 이미지로 표현이 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportHeight="108"
    android:viewportWidth="108">
    .......

사실 Adaptive icon은 API26(Oreo) 부터 지원하는 기능이기 때문에 API26 미만인 Nougat등의 디바이스에서는 지원하지 않습니다. 이런 앱들을 위해 옛날 방식인 ic_launcher.png 이미지를 해상도 별로 제공해야 합니다. 기본 샘플앱을 보면 해상도별로 아이콘이 생성되어있습니다.

AndroidManifest.xml을 보면 roundIcon이라는 속성이 있는데, 런처등에서 라운드 아이콘을 사용할 때 앱에서 지정해준 아이콘을 사용할 수 있습니다. 이 기능은 API25에 소개되었기 때문에 Adaptive icon과 겹쳐지는 내용이 있습니다. (많은 런처들이 사용하지 않을 것 같습니다)

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    ....

참고

• Android developer: adaptive icon
• Google design: Designing Adaptive Icons