Save the date! Android Dev Summit is coming to Sunnyvale, CA on Oct 23-24, 2019.

적응형 아이콘

Android 8.0(API 레벨 26)에는 다양한 기기 모델에서 여러 가지 형태로 표시되는 적응형 런처 아이콘이 도입되었습니다. 예를 들어 적응형 런처 아이콘은 한 OEM 기기에서는 원형으로 표시되고 다른 기기에서는 모서리가 둥근 사각형으로 표시될 수 있습니다. 각 기기 OEM에서는 마스크가 제공되는데, 시스템에서는 이를 사용하여 모든 아이콘을 같은 형태로 렌더링합니다. 적응형 런처 아이콘은 바로가기, 설정 앱, 공유 대화상자 및 개요 화면에서도 사용됩니다.

적응형 아이콘 와이어프레임에 적용된 다양한 마스크 적응형 아이콘에 적용된 다양한 마스크

그림 1. 적응형 아이콘은 기기마다 다른 다양한 마스크를 지원합니다.

백그라운드와 포그라운드로 구성된 2개의 레이어를 정의하여 런처 아이콘의 형태를 제어할 수 있습니다. 아이콘 윤곽선에 마스크나 백그라운드 그림자를 사용하지 않고 아이콘 레이어를 드로어블로 제공해야 합니다.

적응형 아이콘 만들기에 관한 아이소메트릭 삽화

그림 2. 적응형 아이콘은 2개의 레이어와 1개의 마스크를 사용하여 정의합니다.

Android 7.1(API 레벨 25) 이하 버전에서 런처 아이콘의 크기는 48x48dp 크기로 설정되었습니다. 이제 다음 가이드라인에 따라 아이콘 레이어 크기를 조정해야 합니다.

  • 두 레이어 모두 108x108dp 크기로 설정해야 합니다.
  • 안쪽의 72x72dp 아이콘은 마스크된 표시 영역 내에 나타납니다.
  • 아이콘 사방의 바깥쪽 18dp는 시스템에서 시차 또는 펄싱과 같은 흥미로운 시각적 효과를 나타내는 데 사용하도록 예약되어 있습니다.

참고: 애니메이션 시각 효과는 효과를 지원하는 런처에서 생성됩니다. 시각 효과는 런처마다 다를 수 있습니다.

주의: 기기 OEM에서 도형의 특정 지점을 따라 33dp의 짧은 반경을 포함하는 마스크를 지정할 수 있습니다.

적응형 아이콘에 적용된 시차 효과 데모 적응형 아이콘에 적용된 픽업 애니메이션 데모

그림 3. 적응형 아이콘은 다양한 시각 효과를 지원합니다.

주의: 필수 레이어로 런처 아이콘을 업데이트하지 않으면 아이콘이 시스템 UI에서 표시하는 다른 아이콘과 어우러지지 않으며 시각 효과를 지원하지 않습니다.

Android Studio를 사용하여 적응형 아이콘을 만드는 방법을 알아보려면 Image Asset Studio로 앱 아이콘 만들기를 확인하세요.

XML로 적응형 아이콘 만들기

XML로 앱에 적응형 아이콘을 추가하려면 먼저 드로어블 리소스를 지정하기 위해 앱 매니페스트에서 android:icon 속성을 업데이트하세요. android:roundIcon 속성을 사용하여 아이콘의 드로어블 리소스를 정의할 수도 있습니다. 로고 브랜딩에 원형이 필요한 경우와 같이 원형 마스크에 다양한 아이콘 애셋이 필요한 경우 android:roundIcon 속성만 사용해야 합니다. 다음 코드 스니펫은 이러한 속성을 모두 보여줍니다.

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

다음으로 res/mipmap-v26/ic_launcher.xml로 Android 8.0(API 레벨 26)에서 앱에 사용할 대체 드로어블 리소스를 만들어야 합니다. 그런 다음 <adaptive-icon> 요소를 사용하여 아이콘의 포그라운드와 백그라운드 레이어를 정의할 수 있습니다. <foreground><background> 내부 요소는 모두 android:drawable 속성을 지원합니다.

    <?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> 요소로 포함하여 요소로 정의할 수도 있습니다.

바로가기에 균일하게 적응형 런처 아이콘과 동일한 마스크와 시각 효과를 적용하려면 다음 중 하나를 사용합니다.

  • 정적 바로가기의 경우 <adaptive-icon> 요소를 사용합니다.
  • 동적 바로가기의 경우 바로가기를 생성할 때 createWithAdaptiveBitmap()을 호출합니다.

바로가기에 관한 자세한 내용은 앱 바로가기에서 확인하세요.

참고 자료

적응형 아이콘 디자인 및 구현에 관한 자세한 정보는 Google 디자이너 및 개발자 Nick Butcher의 기사를 참조하세요.