自适应图标

自适应图标,或 AdaptiveIconDrawable、 显示的内容可能因具体设备功能和用户而异 主题。自适应图标主要由主屏幕上的启动器使用, 但也可用于快捷方式、“设置”应用、共享对话框和 概览屏幕。自适应图标适用于所有 Android 设备类型。

与位图相比 图片,自适应图标 以适应不同的应用场景:

  • 不同的形状:自适应图标可以显示各种形状 在不同型号的设备上例如,它可以显示 并显示一个方圆形(方形和 圈子)。每个设备的原始设备制造商 (OEM) 都必须提供蒙版, 系统使用 来渲染具有相同形状的所有自适应图标。

    一张 GIF 图片,显示了同一示例 Android 图标的重复动画;
根据使用的蒙版显示不同的形状 - 一个圆圈,然后是一个圆圈
两种不同的弧形
    图 1. 自适应图标支持多种 口罩(因设备而异)。
  • 视觉效果:自适应图标支持各种富有吸引力的视觉效果 效果,当用户在住宅中放置或移动图标时显示 屏幕。

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

    一张图片,显示了三台 Android 设备的示例,每台设备显示了一个
色调不同的不同用户主题:第一张显示壁纸
着色较暗;第二个是金色壁纸第三个显示的是
浅灰色和蓝色调的壁纸。在每个示例中,
图标沿用了壁纸的色调,并完美地与主题融为一体。
    图 3. 从 用户的壁纸和主题。

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

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

设计自适应图标

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

  • 您必须为图标的彩色版本提供两个图层:一个用于 另一个用于后台。这些图层可以是矢量,也可以是 但最好使用矢量

    显示前景图层(左侧图片)和
背景层(右图)。前景显示了 16 面的图标,
示例 Android 徽标,位于 66x66 安全区域的中心。安全区是
居中放置在 108x108 容器内。背景显示的内容
但只能看到蓝色的
背景没有徽标。
    图 4. 使用前景定义的自适应图标 和背景层。描绘的 66x66 安全区是区域 且永远不会被 OEM 定义的形状蒙版裁剪。
    <ph type="x-smartling-placeholder">
    </ph> 一张图片,显示前一张图片中的图标叠加在
圆形蒙版
    图 5.前景和 应用圆形蒙版后,背景图层可以一起显示。
  • 如果您希望支持应用图标的用户主题设置,请提供一个图层, 单色版本的图标。

    <ph type="x-smartling-placeholder">
    </ph> 显示单色图标图层示例的图片(左侧图片)
和颜色预览(右图)。单色图层显示了 16 面
示例 Android 徽标的图标,位于 66x66 安全区域的中心。保险箱
区域中心位于 108x108 容器内。颜色预览会显示
该图层在应用到不同颜色的用户主题(橙色、
粉色、黄色和绿色)。 <ph type="x-smartling-placeholder">
    </ph> 图 6.一个单色图标层(左侧), 颜色预览示例(右)。
  • 将所有层的大小调整为 108x108dp。

  • 使用边缘简洁的图标。图层不得有蒙版或背景 阴影。

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

层四条边外侧的 18dp 分别是 以及创建视差或脉冲等视觉效果。

如需了解如何使用 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> 内部元素同时支持 矢量图像和位图图像。

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

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

其他资源

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