自适应图标

自适应图标 (AdaptiveIconDrawable) 可能会因各项设备功能和用户主题设置而异。自适应图标主要由主屏幕上的启动器使用,但也可用于快捷方式、“设置”应用、共享对话框和概览屏幕。

自适应图标可以适应不同的用例:

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

    一张 GIF 图片,显示了同一示例 Android 图标的重复动画,该图标根据所用的蒙版呈现不同的形状 - 一个圆形,然后是两种不同的圆形
    图 1. 自适应图标支持各种蒙版,蒙版因设备而异。
  • 视觉效果:自适应图标支持多种富有吸引力的视觉效果,当用户在主屏幕上放置或移动图标时,就会看到这些效果。

    一张 GIF 图片,显示了两个圆形 Android 示例图标,这些图标以动画形式呈现用户响应。第一个图标展示了 Android 徽标在圆圈内先向左再向右摇晃。第二个图标展开,然后再次收缩。
    图 2. 自适应图标显示的视觉效果示例。
  • 用户主题设置:从 Android 13(API 级别 33)开始,用户可以为其自适应图标设置主题。如果用户通过开启系统设置中的带主题的图标切换开关来启用带主题的应用图标,并且启动器支持此功能,系统会使用用户选择的壁纸和主题的配色来确定色调颜色。

    一张图片,显示了三台 Android 设备的示例,每台设备显示采用不同色调的不同的用户主题:第一张壁纸展示了色调较深的壁纸;第二张壁纸是采用金色调的壁纸;第三张壁纸的壁纸是浅灰色搭配蓝色色调的壁纸。在每个示例中,图标都沿用了壁纸的色调,并且与壁纸完美融合。
    图 3. 沿用用户的壁纸和主题的自适应图标。

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

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

设计自适应图标

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

  • 您必须为图标的彩色版本提供两个图层:一个用于前景,另一个用于背景。

    前景图层(左图)和背景图层(右图)示例的图片。前景显示了 66x66 安全区域的中心位置示例 Android 徽标的 16 边图标。安全区域的中心位于 108x108 容器内。背景会显示安全区域和容器的相同测量尺寸,但仅显示蓝色背景,没有徽标。
    图 4. 使用前景图层和背景图层定义的自适应图标。图中描绘的 66x66 安全区域是绝不会被 OEM 定义的形状蒙版裁剪的区域。
    一张图片,其中显示上一张图片中的图标叠加在圆形蒙版上。
    图 5.应用圆形蒙版后,前景图层和背景图层一起呈现的效果示例。
  • 如果您想支持应用图标的用户主题设置,请为图标的单色版本提供单个图层。

    显示单色图标层(左侧图片)和颜色预览(右侧图片)示例的图片。单色图层显示一个示例 Android 徽标的 16 边图标,该徽标位于 66x66 安全区域的中心位置。安全区域的中心是 108x108 容器。当此图层在应用于不同颜色的用户主题(橙色、粉色、黄色和绿色)时,颜色预览会显示此图层的显示效果。
    图 6.单色图标层(左侧)和颜色预览示例(右侧)。
  • 将所有层的大小调整为 108x108 dp。

  • 使用边缘清晰的图标。这些图层的图标轮廓周围不得有遮罩或背景阴影。

  • 使用尺寸至少为 48x48 dp 的徽标。该图标不得超过 66x66 dp,因为图标的内部 66x66 dp 会显示在被遮盖的视口中。

图层四面每一侧的外层 18 dp 仅用于遮盖和创建视差或脉动等视觉效果。

如需了解如何使用 Android Studio 创建自适应图标,请参阅我们的 Android 应用图标 Figma 模板有关创建启动器图标的 Android Studio 文档。此外,还可以参阅博文 Designing Adaptive Icons

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

如需向应用添加自适应图标,请更新应用清单中的 android:icon 属性以指定可绘制资源。您还可以使用 android:roundIcon 属性定义图标可绘制资源,但前提是您需要为圆形蒙版使用不同的图标资源(例如,如果您的品牌信息依赖于圆形)。

以下代码段说明了这两个属性,但大多数应用仅指定 android:icon

<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)。使用 <adaptive-icon> 元素为图标定义前景、背景和单色图层可绘制对象。<foreground><background><monochrome> 内部元素支持 android:drawable 属性。

以下示例展示了如何在 <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() 方法。

如需详细了解如何实现自适应图标,请参阅实现自适应图标。 如需详细了解快捷方式,请参阅应用快捷方式概览

其他资源

如需详细了解如何设计和实现自适应图标,请参阅以下资源。