自适应图标

自适应图标或 AdaptiveIconDrawable 可以根据各个设备的功能和用户主题以不同的方式显示。自适应图标主要由启动器在主屏幕上使用,但也可以用于快捷方式、设置应用、共享对话框和概述屏幕。自适应图标用于所有 Android 外形规格。

位图图像 相比,自适应图标可以适应不同的用例

  • 不同的形状:自适应图标可以在不同的设备型号上显示各种形状。例如,它可以在一个 OEM 设备上显示圆形,而在另一个设备上显示圆角矩形(介于正方形和圆形之间的形状)。每个设备 OEM 必须提供一个蒙版,系统使用该蒙版以相同的形状呈现所有自适应图标。

    A gif showing a repeating animation of the same sample Android icon,
showing different shapes depending on the mask used—a circle and then
two different kinds of squircles
    图 1. 自适应图标支持各种蒙版,这些蒙版因设备而异。
  • 视觉效果:自适应图标支持各种引人入胜的视觉效果,当用户在主屏幕上放置或移动图标时,这些视觉效果会显示。

    A gif showing examples of two circle-shaped Android sample icons,
animated to show user response. The first icon shows the Android logo
wobbling left then right, then up and down inside the circle. The second
icon expands and then contracts again.
    图 2. 自适应图标显示的视觉效果示例。
  • 用户主题:从 Android 13(API 级别 33)开始,用户可以为其自适应图标设置主题。如果用户通过打开系统设置中的主题图标切换启用主题应用图标,并且启动器支持此功能,则系统将使用用户选择的壁纸和主题的颜色来确定色调颜色。

    An image showing examples of three Android devices, each one showing a
different user theme with different tints: the first shows a wallpaper with
dark tinting; the second shows a golden-tinted wallpaper; the third shows a
wallpaper with light grey with bluish tints wallpaper. In each example, the
icons have inherited the tinting of the wallpaper and blend in perfectly.
    图 3. 从用户的壁纸和主题继承的自适应图标。

    在以下情况下,主屏幕不会显示主题应用图标,而是显示自适应或标准应用图标

    • 如果用户未启用主题应用图标。
    • 如果您的应用未提供单色应用图标。
    • 如果启动器不支持主题应用图标。

设计自适应图标

为了确保您的自适应图标支持不同的形状、视觉效果和用户主题,设计必须满足以下要求

  • 您必须为图标的颜色版本提供两层:一层用于前景,一层用于背景。这些图层可以是矢量或位图,但建议使用矢量。

    An image showing an example of a foreground layer (left image) and a
background layer (right image). The foreground shows the 16-sided icon of a
sample Android logo centered within a 66x66 safe zone. The safe zone is
centered inside of a 108x108 container. The background shows the same
measured dimensions for the safe zone and the container, but only a blue
background and no logo.
    图 4. 使用前景和背景图层定义的自适应图标。所示的 66x66 安全区域是 OEM 定义的形状蒙版永远不会剪裁的区域。
    An image showing the icon from the preceding image overlaid on a
circular mask.
    图 5. 前景和背景图层与应用的圆形蒙版一起显示的示例。
  • 如果您想支持用户对应用图标进行主题设置,请为图标的单色版本提供单层。

    An image showing an example of a monochromatic icon layer (left image)
and color previews (right image). The monochromatic layer shows the 16-sided
icon of a sample Android logo centered within a 66x66 safe zone. The safe
zone is centered inside of a 108x108 container. The color previews show
this layer display when applied to differently colored user themes (orange,
pink, yellow, and green).
    图 6. 单色图标图层(左)和颜色预览示例(右)。
  • 将所有图层的大小调整为 108x108 dp。

  • 使用具有清晰边缘的图标。图层不得在图标轮廓周围具有蒙版或背景阴影。

  • 使用至少 48x48 dp 的徽标。它不得超过 66x66 dp,因为图标的内部 66x66 dp 出现在蒙版视口中。

图层四侧的外部 18 dp 保留用于蒙版和创建视差或脉冲等视觉效果。

要了解如何使用 Android Studio 创建自适应图标,请参阅我们的 Android 应用图标 Figma 模板创建启动器图标的 Android Studio 文档。此外,请查看博文 设计自适应图标

将您的自适应图标添加到您的应用

自适应图标与非自适应图标一样,都是 使用应用清单中的 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> 内部元素都支持矢量和位图图像。

以下示例演示如何在 <adaptive-icon> 内定义 <foreground><background><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() 方法。

有关实施自适应图标的更多信息,请参阅 实施自适应图标。有关快捷方式的更多信息,请参阅 应用快捷方式概述

其他资源

有关设计和实施自适应图标的更多信息,请参阅以下资源。