적응형 아이콘

적응형 아이콘 AdaptiveIconDrawable님, 개별 기기 기능 및 사용자에 따라 다르게 표시될 수 있습니다. 맞춤설정할 수 있습니다. 적응형 아이콘은 주로 홈 화면의 런처에서 사용합니다. 바로가기, 설정 앱, 공유 대화상자 및 개요 화면을 볼 수 있습니다. 적응형 아이콘은 모든 Android 폼 팩터에서 사용됩니다.

비트맵과 달리 이미지를 사용하면 적응형 아이콘을 통해 다양한 사용 사례에 맞게 조정:

  • 다양한 도형: 적응형 아이콘은 다양한 도형을 표시할 수 있습니다. 다양한 기기 모델에서 사용할 수 있습니다. 예를 들어, 원형 아이콘을 원 모양 (정사각형과 사각형 사이의 도형)을 표시하여 서클)를 찾습니다. 각 기기 OEM은 마스크를 제공해야 합니다. 마스크는 시스템에서 모든 적응형 아이콘을 동일한 형태로 렌더링하는 데 사용합니다.

    동일한 샘플 Android 아이콘의 반복 애니메이션을 보여주는 gif
사용된 마스크에 따라 다른 모양을 보여준 다음
두 종류의 비늘
    그림 1. 적응형 아이콘은 마스크는 기기마다 다릅니다.
  • 시각 효과: 적응형 아이콘은 다양하고 매력적인 시각 효과를 지원합니다. 효과 - 사용자가 아이콘을 집 안에서 배치하거나 이동할 때 표시됩니다. 화면

    두 개의 원 모양의 Android 샘플 아이콘의 예를 보여주는 gif
사용자 응답을 보여주는 애니메이션 첫 번째 아이콘은 Android 로고입니다.
원 안에서 왼쪽, 오른쪽으로, 위아래로 흔들립니다. 두 번째
아이콘이 펼쳐졌다가 다시 접힙니다.
    그림 2. 다음에 의해 표시되는 시각 효과의 예 적응형 아이콘입니다.
    를 통해 개인정보처리방침을 정의할 수 있습니다.
    를 통해 개인정보처리방침을 정의할 수 있습니다.
  • 사용자 테마 설정: Android 13 (API 수준 33)부터 사용자가 테마를 설정할 수 있음 적응형 아이콘입니다. 사용자가 테마 앱 아이콘을 사용 설정하는 경우 시스템 설정에서 테마 아이콘이 전환되며 런처에서 이를 지원합니다. 사용자가 선택한 배경화면의 색상을 사용하여 테마를 사용하여 색조 색상을 결정합니다.

    세 대의 Android 기기 예를 보여주는 이미지
다른 색조가 있는 다른 사용자 테마: 첫 번째는 배경화면이 적용된
어두운 색조 두 번째는 금색 배경화면을 표시합니다. 세 번째는
밝은 회색 배경화면을 사용합니다. 각 예에서
아이콘은 배경화면의 색조를 상속하여 완벽하게 어우러집니다.
    그림 3. 에서 상속된 적응형 아이콘 변경할 수 있습니다.

    다음 시나리오에서는 홈 화면에 테마가 표시되지 않습니다. 앱 아이콘을 대신 적응형 또는 표준 앱 아이콘을 표시합니다.

    • 사용자가 테마 앱 아이콘을 사용 설정하지 않은 경우
    • 앱에서 단색 앱 아이콘을 제공하지 않는 경우
    • 런처가 테마 앱 아이콘을 지원하지 않는 경우

적응형 아이콘 디자인

적응형 아이콘이 다양한 모양, 시각 효과, 사용자 테마 설정을 사용하려면 디자인이 다음 요구사항을 충족해야 합니다.

  • 아이콘의 색상 버전에 대해 두 개의 레이어를 제공해야 합니다. 하나는 1개는 백그라운드에 사용할 수 있습니다 레이어는 벡터이거나 비트맵을 사용하는 것이 더 낫지만, 벡터를 사용하는 것이 더 좋습니다.

    포그라운드 레이어 (왼쪽 이미지) 및
(오른쪽 이미지) 포그라운드에는 다음과 같은 16면 아이콘이
66x66 안전 영역 중앙에 배치된 샘플 Android 로고입니다. 안전 영역은
108x108 컨테이너 내부 중앙에 배치되도록 하겠습니다. 배경이 동일하게 표시됨
측정된 크기를 측정한 값이고 파란색만
로고를 사용하지 마세요.
    그림 4. 포그라운드를 사용하여 정의된 적응형 아이콘 살펴보겠습니다 표시된 66x66 안전 영역은 인코더-디코더는 OEM에서 정의한 모양의 마스크에 의해 클립되지 않습니다.
    를 통해 개인정보처리방침을 정의할 수 있습니다.
    를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
    </ph> 위에 오버레이된 이전 이미지의 아이콘을 보여주는 이미지
사용할 수 있습니다. <ph type="x-smartling-placeholder">
    </ph> 그림 5. 예를 들어 포그라운드 및 배경 레이어는 원형 마스크가 적용된 상태로 함께 보입니다.
  • 앱 아이콘의 사용자 테마 설정을 지원하려면 흑백으로 변경합니다.

    <ph type="x-smartling-placeholder">
    </ph> 단색 아이콘 레이어의 예를 보여주는 이미지 (왼쪽 이미지)
색상 미리보기 (오른쪽 이미지)가 표시됩니다. 단색 레이어는 16면
66x66 안전 영역 중앙에 배치된 샘플 Android 로고 아이콘 금고
108x108 컨테이너 내부의 중앙에 위치합니다. 색상 미리보기는
이 레이어는 다른 색상의 사용자 테마 (주황색,
분홍색, 노란색, 초록색)입니다. <ph type="x-smartling-placeholder">
    </ph> 그림 6. 단색 아이콘 레이어 (왼쪽) 색상 미리보기의 예 (오른쪽)
  • 모든 레이어의 크기를 108x108dp로 설정합니다.

  • 가장자리가 깨끗한 아이콘을 사용합니다. 레이어에 마스크나 배경이 없어야 합니다. 음영에 영향을 줄 수 있습니다.

  • 최소 48x48dp 크기의 로고를 사용하세요. 크기는 66x66dp를 초과해서는 안 됩니다. 왜냐하면 아이콘의 안쪽 66x66dp가 표시 영역입니다.

레이어 네 측면의 바깥쪽 18 dp는 패럴랙스 또는 깜빡임과 같은 시각적 효과를 만드는 데 사용할 수 있습니다.

Android 스튜디오를 사용하여 적응형 아이콘을 만드는 방법을 알아보려면 Android 앱 Figma 아이콘 템플릿 또는 런처 생성을 위한 Android 스튜디오 문서 아이콘 또한 블로그 게시물 적응형 디자인 설계하기 아이콘 에서 자세한 내용을 확인하실 수 있습니다.

앱에 적응형 아이콘 추가

적응형 아이콘은 비적응형 아이콘과 마찬가지로 앱의 android:icon 속성 매니페스트를 참조하세요.

선택적 속성인 android:roundIcon는 앱의 아이콘에 디자인의 핵심으로 사용했습니다. 이러한 런처는 android:roundIcon에 원형 마스크를 적용하여 앱 아이콘을 생성합니다. 보장을 사용하면 앱 아이콘의 모양을 최적화할 수 있습니다. 예를 들어 로고를 약간 확대하고 자를 때 풀 블리드 원형 배경

다음 코드 스니펫은 이 두 속성을 모두 보여주지만, 대부분의 앱은 android:icon만 지정합니다.

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

그런 다음 적응형 아이콘을 res/mipmap-anydpi-v26/ic_launcher.xml에 저장합니다. 사용 <adaptive-icon> 요소를 사용하여 포그라운드, 백그라운드, 단색 레이어 리소스를 제공합니다. <foreground>, <background><monochrome> 내부 요소는 둘 다 지원 벡터 및 비트맵 이미지를 기반으로 합니다.

다음 예는 <foreground>, <background>, <adaptive-icon> 내부의 <monochrome> 요소:

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

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

드로어블을 요소로 인라인하여 요소로 정의할 수도 있습니다. <foreground>, <background>, <monochrome> 요소 다음 스니펫은 포그라운드 드로어블을 사용하여 이 작업을 실행하는 예를 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

단축키에 동일한 마스크와 시각 효과를 적용하려는 경우 일반 적응형 아이콘의 경우 다음 기법 중 하나를 사용합니다.

  • 정적 바로가기에는 <adaptive-icon> 요소를 사용합니다.
  • 동적 바로가기의 경우 createWithAdaptiveBitmap() 드림 메서드를 사용할 수 있습니다.

적응형 아이콘 구현에 관한 자세한 내용은 구현하기 자동 조절 아이콘. 바로가기에 관한 자세한 내용은 앱 바로 가기를 참고하세요. 개요를 참조하세요.

추가 리소스

설계 및 설계에 대한 자세한 내용은 다음 리소스를 참조하세요. 적응형 아이콘을 구현했습니다.