自适应图标

自适应图标,或 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() 方法。

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

其他资源

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