更改应用图标

应用图标是区分应用的重要方式。它还会出现在多个位置,包括主屏幕、“所有应用”屏幕和“设置”应用。

应用图标也可能会被称为“启动器图标”。启动器图标,是指当您点击 Android 设备的主屏幕按钮以查看和整理应用、添加微件和快捷方式等时所看到的图标。

5ad4cd1802b17e78.png 65ec30da24d6fccd.png

如果您使用过不同的 Android 设备,就可能会注意到,启动器呈现的效果可能会因设备制造商而异。有时,设备制造商会打造其品牌独有的自定义启动器呈现效果。在这个过程中,不同的制造商可能会以不同的形状显示应用图标,而不仅仅是如上所示的圆形图标。

例如,他们可能会以方形、圆角方形或方圆形(介于方形和圆形之间)显示所有应用图标。

fd309218335c53cd.png

无论设备制造商选择哪种形状,其目的都是为了使单个设备上的所有应用图标具有统一的形状,以便提供更加一致的用户体验。

830d2fd23a99ac81.png

这便是 Android 平台引入自适应图标支持(自 API 级别 26 起)的原因。为应用实现自适应图标后,您的应用将能够在各种设备上恰当地显示高质量的应用图标,从而适应这些设备。

此 Codelab 将为您提供小费计算器启动器图标的图片源文件以供练习。您将使用 Android Studio 中名为 Image Asset Studio 的工具生成各种所需版本的启动器图标。之后,您可以运用自己所学的知识来更改其他应用的应用图标!

2ab6c3045820a223.png

前提条件

  • 能够浏览基本 Android 项目的文件,包括资源文件
  • 能够通过 Android Studio 在模拟器或实体设备上安装 Android 应用

学习内容

  • 如何更改应用的启动器图标
  • 如何使用 Android Studio 中的 Image Asset Studio 生成启动器图标资源
  • 自适应图标的定义,及其包含两个图层的原因

您将构建的内容

  • 一个具有全新启动器图标的 Android 应用

所需条件

  • 一台安装了 Android Studio 4.1 版或更高版本的计算机
  • 能够下载图片资源文件的互联网连接

如果您是在学习使用 Kotlin 进行 Android 开发的基础知识课程的过程中学习此 Codelab,则可以直接使用已经完成的上一个 Codelab 中的小费计算器。

如果您是单独学习此 Codelab(在课程之外),则可以在 Android Studio 中使用 Empty Activity 模板设置一个新项目。这样,您就可以先熟悉相关步骤,然后再修改或覆盖现有应用中的启动器图标文件。

设置启动图标的目标是,无论设备型号或屏幕密度如何,您的启动器图标看起来都非常出色(清晰、简洁)。具体而言,屏幕像素密度是指屏幕上每英寸的像素数(或每英寸的点数 (dpi))。对于中密度设备 (mdpi),屏幕上每英寸有 160 个点,而超超超高密度设备 (xxxhdpi) 的屏幕上每英寸有 640 个点。

为适应不同屏幕密度的设备,您需要提供不同版本的应用图标。

浏览启动器图标文件

  1. 如需查看图标的显示效果,请在 Android Studio 中打开您的项目。如果您的应用是通过模板创建的,那么您应该具有已由 Android Studio 提供的默认启动器图标。
  2. “Project”窗口中,切换到 Project 视图。系统会根据项目文件在计算机上保存时所采用的文件结构,向您显示这些文件。

4f9aa3d93f41669.png

  1. 转到资源目录 (app > src > main > res),然后展开一些 mipmap 文件夹。您应将 Android 应用的启动器图标资源放到这些 mipmap 文件夹中。

4809cedb440baf9a.png

mdpihdpixhdpi 等是密度限定符,您可以将其附加到资源目录的名称(例如 mipmap)上,以表明其中的资源适用于特定屏幕密度的设备。以下是 Android 上的密度限定符列表:

  • mdpi - 适用于中密度屏幕(约 160dpi)的资源
  • hdpi - 适用于高密度屏幕(约 240dpi)的资源
  • xhdpi - 适用于超高密度屏幕(约 320dpi)的资源
  • xxhdpi - 适用于超超高密度屏幕(约 480dpi)的资源
  • xxxhdpi - 适用于超超超高密度屏幕(约 640dpi)的资源
  • nodpi - 不能缩放的资源(无论屏幕的像素密度是多少)
  • anydpi - 可针对任何密度进行缩放的资源
  1. 如果您点击图片文件,将会看到预览。ic_launcher.png 文件包含图标的方形版本,而 ic_launcher_round.png 文件包含图标的圆形版本。每个资源目录中均提供了这两个版本。

例如,以下便是 res > mipmap-xxxhdpi > ic_launcher_round.png 的预览效果。另请注意,相应资源的尺寸位于右上角。此图片的尺寸为 192px x 192px。

f3a9121a119fe71a.png

另外,以下是 res > mipmap-mdpi > ic_launcher_round.png 的预览效果。它的尺寸仅为 48px x 48px。

e76f2f5200934151.png

如您所见,这些位图图片文件由一个固定的像素网格组成。它们针对特定的屏幕分辨率而创建。因此,如果您调整它们的尺寸,图标质量将会降低。

如果您缩小某个位图图片,由于您是去掉一些像素信息,它可能看起来还不错。如果您大幅放大某个位图图片,它可能会显得模糊不清,因为 Android 将需要推测并填补缺少的像素信息。

现在,您已对启动器图标有所了解,接下来您将学习自适应图标。

前景图层和背景图层

Android 8.0 版本(API 级别 26)起,系统支持自适应启动器图标,这种图标能够使应用图标更加灵活并呈现出有趣的视觉效果。对于开发者来说,这意味着应用图标由两个图层组成:前景图层和背景图层。

1b5d411e9a4665f0.gif

在上面的示例中,白色的 Android 图标位于前景图层中,而蓝白网格位于背景图层中。前景图层将会被堆叠在背景图层上。然后,系统会在其上应用蒙版(在此例中为圆形蒙版),以生成圆形应用图标。

浏览自适应图标文件

查看由 Android Studio 中的项目模板提供的默认自适应图标文件。

  1. 在 Android Studio 的“Project”窗口中,查找 res > mipmap-anydpi-v26 资源目录并将其展开。

90ab834132f04c50.png

  1. 打开其中一个 XML 文件,例如 ic_launcher.xml。您应该会看到以下内容:
<?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" />
</adaptive-icon>
  1. 请注意,该文件中使用了 <adaptive-icon> 元素为应用图标的 <background> 图层和 <foreground> 图层分别提供资源可绘制对象,从而完成对它们的声明。
  2. 返回 Project 视图,并查找声明可绘制对象的位置:drawable > ic_launcher_background.xmldrawable-v24 > ic_launcher_foreground.xml
  3. 切换到 Design 视图,查看每个图层的预览效果(左侧为背景图层,右侧为前景图层)。

8ba74284850a2c2f.png c823613ef2633800.png

  1. 这两个都是矢量可绘制对象文件。它们没有以像素为单位的固定尺寸。如果您切换到 Code 视图,就会看到使用 <vector> 元素声明矢量可绘制对象的 XML 代码。

尽管矢量可绘制对象和位图图片描述的都是图片,但二者之间存在一些重要的区别。

除了各个像素处的颜色信息之外,位图图片对其存储的图片并不太了解。而另一方面,矢量图形知道如何绘制用于定义图片的形状。这些指令由一组点、线条和曲线以及相关颜色信息组成。其优势在于,矢量图形可针对任意屏幕密度的任意画布尺寸进行缩放,而不会损害图片质量。

矢量可绘制对象是 Android 平台的矢量图形实现,在移动设备上具有足够的灵活性。您可以使用 XML 并利用这些可能的元素对其进行定义。您只需要定义一次图片,而不必针对所有密度级别提供各种版本的位图资源。这样可以减少应用的大小,并使其更易于维护。

现在,是时候真正地更改应用图标了!

接下来,下载这 2 个新资源,您可以利用它们为小费计算器应用创建自适应图标。不要担心,您不用理解矢量可绘制对象文件的所有细节。您可以利用设计工具自动生成其中的内容。

  1. 下载 ic_launcher_background.xml,即背景图层的矢量可绘制对象。如果您的浏览器只是显示该文件而没有下载,请选择“FIle”(文件)>“Save Page As...”(网页另存为…),以将其保存到计算机。
  2. 下载 ic_launcher_foreground.xml,即前景图层的矢量可绘制对象。

请注意,系统对这些前景和背景图层资源有特定要求,例如它们的尺寸都必须为 108dp x 108dp。请点击此处,详细了解相关要求,您也可以查看 Material 网站上有关 Android 图标的设计指南

由于图标的边缘可能会根据设备制造商提供的蒙版的形状进行剪裁,请务必将图标的关键信息放置在“安全区域”(即一个位于图层中心且直径为 66dp 的圆圈)内。该安全区域之外的内容不应是重要信息(例如背景颜色),即使被裁剪掉也没关系。

返回 Android Studio,以便使用新资源。

  1. 首先,删除带有 Android 图标和绿色网格背景的旧版可绘制资源。在“Project”视图中,右键点击相应文件,然后选择 Delete

删除以下文件:

drawable/ic_launcher_background.xml
drawable-v24/ic_launcher_foreground.xml

您可以取消选中 Safe delete (with usage search) 框,然后点击 OK

  1. 创建一个新的 Image Asset。您可以右键点击 res 目录,然后依次选择 New > Image Asset。或者,您也可以点击 Resource Manager 标签页,然后点击 + 图标并选择 Image Asset

c655215f2a42dd5e.png

  1. 系统将打开 Android Studio 的 Image Asset Studio 工具。
  2. 保留默认设置:
  3. Icon Type: Launcher Icons (Adaptive and Legacy)
  4. Name: ic_launcher

2873b6dd2ae1661a.png

  1. 选中“Foreground Layer”标签页后,向下移动至 Source Asset 子部分。在 Path 字段中,点击文件夹图标。
  2. 此时系统会弹出浏览计算机并选择文件的提示。找到您刚下载的新 ic_launcher_foreground.xml 文件在计算机上的位置。它可能位于计算机的“下载内容”文件夹中。找到该文件后,点击 Open
  3. Path 现已更新为新前景矢量可绘制对象的位置。将 Layer Name 保留为 ic_launcher_foregroundAsset Type 保留为 Image

27ed073e3fde1c02.png

  1. 接下来,切换到界面的“Background Layer”标签页。保留默认设置不变。点击 Path 字段中的文件夹图标。
  2. 找到您刚下载的 ic_launcher_background.xml 文件的位置。点击 Open

a1ccf589eb91dc96.png

  1. 在您选择新资源文件时,预览应该会相应地进行更新。以下便是使用新的前景图层和背景图层后的图标预览效果。

4d5b591e2cf6f202.png

用两个图层呈现应用图标后,设备制造商(即原始设备制造商,或简称为“OEM”)便可以根据具体的 Android 设备创建不同的形状,如上面的预览所示。OEM 会提供一个将应用到设备上所有应用图标的蒙版。

此蒙版会应用到应用图标的前景和背景图层上。以下为圆形蒙版和方形蒙版示例。

fd16968065745024.png

如果向应用图标的两个图层应用圆形蒙版,将生成一个带有蓝色网格背景且其中显示 Android 的圆形图标(如上图左侧图片所示)。或者,您可以应用方形蒙版,以生成如上图右侧图片所示的应用图标。

此外,使用两个图层还有助于实现有趣的视觉效果,因为这两个图层能够独立移动或缩放。请查看此博文中“Design Considerations”(设计注意事项)下的内容,了解一些有关视觉效果的有趣示例。由于您无法提前预知用户将会使用什么设备,或者 OEM 将会为您的图标应用哪种蒙版,您需要设置自己的自适应图标,以免重要信息被裁剪掉。

  1. 确保前景图层的主要内容(在此例中为服务铃图标)包含在安全区域内,不会被不同的蒙版形状裁剪掉。如果重要的内容会被裁减掉,或者显示的太小,您可以使用每个图层的 Scaling 部分下的 Resize 滑动条。在本例中,您无需调整大小,因此可将其保留为 100%。

d349f38383ed09fe.png

  1. 点击 Next
  2. 此步骤为 Confirm Icon Path。您可以点击各个文件,查看预览效果。底部还会显示一条警告信息,提醒部分现有文件将会被覆盖(显示为红色)。无需担心,因为这些是适用于之前应用图标的旧版文件。

1ddb585036d12cf4.png

  1. 默认值没有问题,因此请点击 Finish
  2. 确认 mipmap 文件夹中所有生成的资源均正确显示。示例:

1208e1c670bd55e5.png d917956d6e27c145.png

太棒了!现在,您将需要再进行一项更改。

将矢量可绘制对象文件移动到 -v26 目录中

您可能会注意到,前景资源位于 drawable-v24 文件夹中,而背景资源位于 drawable 文件夹中,具体取决于应用的最低 SDK 版本。原因在于,前景资源包含渐变效果,该功能从 Android 7.0 版本(也称为 API 版本 24,因此使用 -v24 资源限定符)开始提供。而背景资源不包含渐变效果,因此可以包含在基础的 drawable 文件夹中。

请将两个矢量可绘制对象文件移动到 -v26 资源目录中,而不是将前景和背景资源放在两个单独的 drawable 文件夹中。由于这些资源仅用于自适应图标,只有 API 26 及更高版本才需要这两个可绘制对象。以下文件夹结构可帮助您更加轻松地查找和管理自适应图标文件。

drawable-anydpi-v26
   ic_launcher_background.xml
   ic_launcher_foreground.xml
mipmap-anydpi-v26
   ic_launcher.xml
   ic_launcher_round.xml
  1. 首先,创建 drawable-anydpi-v26 目录。右键点击 res 文件夹。依次选择 New > Android Resource Directory
  2. 此时将显示 New Resource Directory 对话框。选择以下选项:

Directory name: drawable-anydpi-v26

Resource type: drawable(从下拉列表中选择)

Source set: main(按原样保留默认值)

597c5c1af0ca463f.png

点击 OK。在 Project 视图中,验证是否已成功创建新的资源目录 res > drawable-anydpi-v26

  1. 左键点击 ic_launcher_foreground.xml 文件,并将其从 drawable 文件夹拖动到 drawable-anydpi-v26 文件夹中。前面已经提到,将资源放在“any dpi”目录中表示,这是一个可针对任何密度进行缩放的资源。
  2. 左键点击 ic_launcher_background.xml,并将其从 drawable-v24 文件夹拖动到 drawable-anydpi-v26 文件夹中。
  3. 如果 drawable-v24 文件夹目前为空,请将其删除。右键点击该文件夹,然后选择 Delete
  4. 点击您项目中的所有 drawablemipmap 文件。请确保在预览界面,这些图标均正确显示。

测试应用

  1. 测试是否显示新的应用图标。在设备(模拟器或实体设备)上运行应用。
  2. 点击设备上的主屏幕按钮。
  3. 向上滑动以显示“所有应用”列表。
  4. 查找您刚刚更新的应用。您应该会看到系统显示新的应用图标。

54ff6ce3c55d3ba7.png

注意:根据设备型号,您可能会看到不同形状的启动器图标。但无论如何,系统都应在背景图层上显示前景图层,并应用某类蒙版。

不错!新的应用图标看起来非常棒。

自适应和旧版启动器图标

现在,您的自适应图标可以正常运行了,您可能会好奇,为何不能删除所有的应用图标位图图片。您仍需要这些文件,以便应用图标能够在旧版 Android 上呈现出较高的质量,这被称为向后兼容性。

在搭载 Android 8.0 或更高版本(API 26 或更高版本)的设备上:

系统可以使用自适应图标(由前景矢量可绘制对象、背景矢量可绘制对象以及在其上应用的 OEM 蒙版组合而成)。以下是您项目中的相关文件:

res/drawable-anydpi-v26/ic_lancher_background.xml
res/drawable-anydpi-v26/ic_launcher_foreground.xml
res/mipmap-anydpi-v26/ic_launcher.xml
res/mipmap-anydpi-v26/ic_launcher_round.xml

在搭载 Android 8.0 以下的任意版本(但高于我们应用所需的最低 API 级别)的设备上:

系统将使用旧版启动器图标(位于不同密度级别的 mipmap 文件夹中的位图图片)。以下是您项目中的相关文件:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png

实际上,在不支持自适应图标的旧版设备上,Android 将回退为使用位图图片。

恭喜!您已完成更改应用图标的所有步骤!

54ff6ce3c55d3ba7.png

此 Codelab 的解决方案代码如下所示。

res/mipmap-anydpi-v26/ic_launcher.xml

<?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" />
</adaptive-icon>

res/mipmap-anydpi-v26/ic_launcher_round.xml

<?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" />
</adaptive-icon>

res/drawable-anydpi-v26/ic_launcher_background.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M0,0h108v108h-108z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:startY="-1.0078"
          android:startX="54"
          android:endY="106.9922"
          android:endX="54"
          android:type="linear">
        <item android:offset="0" android:color="#FF12C26D"/>
        <item android:offset="1" android:color="#FF0F9453"/>
      </gradient>
    </aapt:attr>
  </path>
</vector>

res/drawable-anydpi-v26/ic_launcher_foreground.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportWidth="108"
    android:viewportHeight="108">
  <path
      android:pathData="M38.19,65.92L69.32,65.92a1.2,1.2 0,0 0,1.2 -1.2,0.89 0.89,0 0,0 0,-0.23 17,17 0,0 0,-33.25 0,1.18 1.18,0 0,0 0.9,1.42ZM74.53,69.05a0.85,0.85 0,0 0,-0.78 -0.84L34,68.21a0.85,0.85 0,0 0,-0.77 0.84v2.82a0.84,0.84 0,0 0,0.77 0.86L73.78,72.73a0.85,0.85 0,0 0,0.77 -0.86L74.55,70.65C74.55,70.24 74.56,69.58 74.53,69.05ZM52.08,49h3.59a1.86,1.86 0,0 0,0 -3.72L52.08,45.28a1.86,1.86 0,0 0,0 3.72ZM53.87,39.81a1.19,1.19 0,0 0,1.19 -1.19L55.06,32.87a1.19,1.19 0,0 0,-2.38 0v5.71a1.19,1.19 0,0 0,1.19 1.19h0ZM61.69,41l4.62,-3.35a1.19,1.19 0,1 0,-1.4 -1.93L60.29,39A1.2,1.2 0,0 0,60 40.67a1.18,1.18 0,0 0,1.66 0.26ZM41.69,37.65L46.31,41a1.2,1.2 0,0 0,1.35 -2L43,35.66a1.19,1.19 0,0 0,-1.66 0.26,1.2 1.2,0 0,0 0.3,1.67Z"
      android:fillColor="#FFFFFF"/>
</vector>

Android Studio 应该也已经自动生成了位图图片,位于以下位置:

res/mipmap-mdpi/ic_launcher.png
res/mipmap-mdpi/ic_launcher_round.png
res/mipmap-hdpi/ic_launcher.png
res/mipmap-hdpi/ic_launcher_round.png
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.png
res/mipmap-xxdpi/ic_launcher.png
res/mipmap-xxdpi/ic_launcher_round.png
res/mipmap-xxxdpi/ic_launcher.png
res/mipmap-xxxdpi/ic_launcher_round.png
  • 将应用图标文件放到 mipmap 资源目录中。
  • 针对各个密度级别(mdpihdpixhdpixxhdpixxxhdpi)提供不同版本的应用图标位图图片,以便向后兼容旧版 Android。
  • 向资源目录添加资源限定符,以指定应在具有特定配置的设备上使用的资源(例如 v26)。
  • 矢量可绘制对象是 Android 平台的矢量图形实现。它们使用 XML 以一组点、线条和曲线以及相关颜色信息的形式进行定义。矢量可绘制对象可针对任何密度进行缩放,而不会降低图片质量。
  • API 级别为 26 的 Android 平台中引入了自适应图标。它们由符合特定要求的前景和背景图层组成,因此您的应用图标在采用不同 OEM 蒙版的各种设备上都能呈现出较高的质量。
  • 使用 Android Studio 中的 Image Asset Studio 为您的应用创建旧版图标和自适应图标。