自适应图标 (AdaptiveIconDrawable
) 可能会根据个别设备的功能和用户主题设置以不同的方式显示。自适应图标主要由主屏幕上的启动器使用,但也可用于快捷方式、“设置”应用、共享对话框和概览屏幕。自适应图标会用于所有 Android 外形规格。
与位图图片相比,自适应图标可适应不同的用例:
不同形状:自适应图标可以在不同的设备型号上显示为各种形状。例如,它可以在一台 OEM 设备上显示圆形,在另一台设备上显示方块(正方形和圆形之间的形状)。每个原始设备制造商 (OEM) 都必须提供一个蒙版,系统使用该蒙版渲染所有具有相同形状的自适应图标。
视觉效果:自适应图标支持各种引人入胜的视觉效果,当用户在主屏幕上放置或移动图标时,就会显示这些效果。
用户主题设置:从 Android 13(API 级别 33)开始,用户可以为其自适应图标设置主题。如果用户启用带主题的应用图标(通过开启系统设置中的带主题的图标切换开关),并且启动器支持此功能,系统会使用用户选择的壁纸和主题的配色来确定色调颜色。
在以下情况下,主屏幕不会显示带主题的应用图标,而是显示自适应或标准应用图标:
- 如果用户未启用带主题的应用图标。
- 如果您的应用不提供单色应用图标。
- 如果启动器不支持带主题的应用图标。
设计自适应图标
为确保自适应图标支持不同的形状、视觉效果和用户主题,设计必须满足以下要求:
您必须为图标的颜色版本提供两个图层:一个用于前景,一个用于背景。这些层可以是矢量,也可以是位图,但最好使用矢量。
如果您想支持用户设置应用图标主题,请为图标的单色版本提供单个图层。
将所有图层的大小调整为 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()
方法。
如需详细了解如何实现自适应图标,请参阅实现自适应图标。 如需详细了解快捷方式,请参阅应用快捷方式概览。
其他资源
如需详细了解如何设计和实现自适应图标,请参阅以下资源。