自适应图标

自适应图标标题

自适应图标(即 AdaptiveIconDrawable)会根据各个设备的功能和用户设置的主题显示不同效果。自适应图标主要用于主屏幕启动器,也可以用于快捷方式、“设置”应用、分享对话框和概览屏幕。自适应图标适用于所有 Android 设备规格。

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

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

    GIF 动画:重复播放同一个示例 Android 图标的动画,根据所使用的遮罩(圆形,然后是两种不同的圆角矩形)显示不同的形状
    图 1. 自适应图标支持各种遮罩,具体因设备而异。
  • 视觉效果:自适应图标支持多种富有吸引力的视觉效果,当用户在主屏幕上放置或移动图标时,就会看到这些效果。

    GIF 动画:显示两个圆形 Android 示例图标,通过动画展示用户响应。第一个图标显示 Android 徽标在圆圈内先左右摇晃,然后上下摇晃。第二个图标会展开,然后再次收缩。
    图 2. 自适应图标显示的视觉效果示例。
  • 用户主题:从 Android 13(API 级别 33)开始,用户可以为自适应图标设置主题。如果用户在系统设置中启用了带主题的应用图标,且启动器支持此功能,那么系统会根据用户选择的壁纸和主题的配色来调整应用图标的色调,前提是应用的自适应图标中包含 monochrome 图层。从 Android 16 QPR 2 开始,Android 会自动为未提供应用图标的应用设置主题。

    三个 Android 设备的示例,每个设备都显示了具有不同色调的不同用户主题:第一个设备显示了具有深色色调的壁纸;第二个设备显示了具有金色色调的壁纸;第三个设备显示了具有浅灰色和蓝色色调的壁纸。在每个示例中,图标都沿用了壁纸的色调,并与之完美融合。
    图 3. 继承自用户壁纸和主题的自适应图标。

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

    • 如果用户未启用带主题的应用图标。
    • 如果您的应用不提供单色应用图标,并且用户设备搭载的 Android 版本低于 Android 16 QPR 2。
    • 如果启动器不支持带主题的应用图标。

设计自适应图标

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

  • 您需要针对图标的彩色版本提供两个图层,分别用于前景和背景。这些层可以是矢量图,也可以是位图,但矢量图更可取。

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

    单色图标图层(左)和颜色预览(右)示例。单色图层显示了一个 16 边形的示例 Android 徽标图标,该图标位于 66x66 安全区域的中心。安全区域位于 108x108 容器的中心。颜色预览显示了此图层在应用于不同颜色的用户主题(橙色、粉色、黄色和绿色)时的显示效果。
    图 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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</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() 方法。

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

其他资源

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