[android] 안드로이드 적응형 런처 아이콘 가이드

이번에 사이드 프로젝트인 A.fume을 디자인하게 되면서

런처 아이콘 적용 가이드가 변화되었다는 것을 알게 되었다.

 

Android 7.1(API 수준 25) 이하 버전에서 런처 아이콘의 크기는 48x48dp로 설정되었었다.

그래서 항상 나도 런처 아이콘을 만들 때, mdpi 기준으로 48x48dp을 만든 다음에

제플린으로 넘기거나 이미지 추출로 mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi을 뽑았었는데

Android 8.0(API 수준 26)에서는 이제 백그라운드와 포그라운드로 구성된 2개의 레이어를 정의하여 

이미지를 만들어주어야 한다.

(근데 왜 나는 몇 달 전까지 걍 48*48dp로 만들었었지..? 왜그랬지!)

 

 

 

적응형 아이콘 이미지 (출처 : 구글 디벨롭)

 

적응형 아이콘 이미지 예시 (출처 : 구글 디벨롭)

 

 

 

일단 Android 8.0에서 적용되는 사이즈는 이러하다. 

- mdpi : 108px*108px  (XD나 스케치 등에서 디자인할 때 기준잡고 할 사이즈)
- hdpi : 162px * 162px
- xhdpi : 216px * 216px
- xxhdpi : 324px * 324px
- xxxhdpi : 432px * 432px

 

그리고 구글에서 준 가이드는 이러하다

출처 : 구글 디벨롭 

 

 

 

적응형 런처 아이콘으로 만들지 않았을 시 레거시 아이콘

 

 

 

내가 원하는 런처 아이콘 이미지

 

A.fume 런처 아이콘 이미지

 

 

A.fume 런처 아이콘 라운드 형

 

내가 앱 아이콘으로 보여지고자 하는 런처 디자인은 이러하다. 

기기에 따라 자유롭게 변화되는 모습..! 

그럼 이렇게 적용되기 위해 Background이미지와 Foreground이미지로 분리해보겠다...!

 

 

 

Background 리소스 준비

- 정말 간단하게 108px*108px 크기로 백그라운드 파일을 만들어주면 된다.

a.fume 백그라운드 이미지

 

 

Foreground 리소스 준비

 

 

a.fume 포그라운드 이미지

- 안쪽 그래픽이 안전하게 잘 보이기 위해 세이브존인 66*66을 잘 맞춰줘야한다!

여기서 66*66은 원형사이즈 기준이다! 

처음에 사각형사이즈인줄 알고 세이브존을 만들었다가 아이콘이 안보여서 애먹었었다.. ㅎㅎ

 

나는 A.가 흰색이라서 세이브존을 잘 표현해주려고 회색을 깔아놨는데

이미지 에셋 추출할때는 저 회색 세이브존을 지우고 추출했으니 참고 부탁드린다 :)

 

 

 

 

 

 

+ 레거시 아이콘 리소스 준비

개발자 친구가 위에 소스만을 넣어서 런을 돌려봤는데

몇몇 아이콘이 딱 맞지 않았다 하여 

레거시용 아이콘도 준비했다 :)

 

512*512 사이즈로 포그라운드와 백그라운드 에셋을 준비해서

집어넣어서 레거시용도 대비해주어야 했다. 

 

 

그럼, 그동안 준비한 리소스를 정리해보면

- mdpi : 108px*108px  (XD나 스케치 등에서 디자인할 때 기준잡고 할 사이즈)
- hdpi : 162px * 162px
- xhdpi : 216px * 216px
- xxhdpi : 324px * 324px
- xxxhdpi : 432px * 432px

+ 레거시용 512*512 

 

이렇게이다!

 

다 준비했으면 적응형 아이콘을 만들기 위한 준비물은  끝 -! 

 

 

XML으로  적응형 아이콘 적용하기

 

XML로 앱에 적응형 아이콘을 추가하려면 먼저 드로어블 리소스를 지정하기 위해 앱 매니페스트에서 android:icon 속성을 업데이트해야한다.

또한  원형 마스크의 애셋이 필요한 경우 android:roundIcon 속성을 적용해야한다.

    <application
        …
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        …>
    </application>
    

 

 

다음으로 res/mipmap-anydpi-v26/ic_launcher.xml의 Android 8.0(API 수준 26)에서 사용할 대체 드로어블 리소스를 앱에 만들어야 한다.  밑의 xml코드를 참고하시면 좋을 듯 하다.

    <?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>
    

 

 

 

 

참고 문서

 

developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive?hl=ko

적응형 아이콘  |  Android 개발자  |  Android Developers

medium.com/google-design/designing-adaptive-icons-515af294c783

Designing Adaptive Icons