更改应用图标

1. 准备工作

应用图标是一种区分应用的重要方式,您可以为图标添加独特的样式和外观。应用图标会出现在多个位置,包括主屏幕、“所有应用”界面和“设置”应用。

应用图标也可能会被称为启动器图标。启动器是指当您点按 Android 设备上的主屏幕按钮时所看到的界面,在该界面中可以查看和整理应用、添加 widget 和快捷方式,以及执行其他多种操作。

ec0237fb600dd2a9.png e7a9b86b35f7d6c3.png

如果您使用过不同的 Android 设备,就可能会注意到,启动器界面可能因设备制造商而异。有时,设备制造商会量身打造能够体现其品牌特色的启动器界面。例如,不同制造商可能会以不同的形状显示应用图标,而不一定是上方所示的圆形图标。

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

一张图片,其中展示了各种形状的应用图标

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

一张图片,其中展示了统一形状的图标。

正因如此,Android 平台引入了对自适应图标的支持(自 API 级别 26 起)。为应用实现自适应图标后,您的应用将能够为设备的显示屏量身定制启动器图标,从而适应各种设备。

此 Codelab 为您提供了 Affirmations 应用启动器图标的图片源文件。您将使用 Android Studio 中名为 Image Asset Studio 的工具生成各种版本的启动器图标。之后,您可以将自己所学的知识运用到其他应用的应用图标中!

Affirmations 应用的启动器图标的图片。

前提条件

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

学习内容

  • 如何更改应用的启动器图标。
  • 如何使用 Android Studio 中的 Image Asset Studio 生成启动器图标资源。
  • 什么是自适应图标,以及为什么它包含两个图层。

将制作的内容

  • Affirmations 应用的自定义启动器图标。

所需条件

  • 一台安装了最新稳定版 Android Studio 的计算机。
  • 能连接互联网,以便下载图片资源文件。
  • 能够访问 GitHub

下载起始代码

在 Android Studio 中,打开 basic-android-kotlin-compose-training-affirmations 文件夹。

  1. 进入为此项目提供的 GitHub 代码库页面。
  2. 验证分支名称是否与此 Codelab 中指定的分支名称一致。例如,在以下屏幕截图中,分支名称为 main

1e4c0d2c081a8fd2.png

  1. 在项目的 GitHub 页面上,点击 Code 按钮,以打开一个弹出式窗口。

1debcf330fd04c7b.png

  1. 在弹出式窗口中,点击 Download ZIP 按钮,将项目保存到计算机上。等待下载完成。
  2. 在计算机上找到该文件(很可能在 Downloads 文件夹中)。
  3. 双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

  1. 启动 Android Studio。
  2. Welcome to Android Studio 窗口中,点击 Open

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已经打开,则改为依次选择 File > Open 菜单选项。

8d1fda7396afe8e5.png

  1. 在文件浏览器中,前往解压缩的项目文件夹所在的位置(很可能在 Downloads 文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击 Run 按钮 8de56cba7583251f.png 以构建并运行应用。请确保该应用按预期构建。

2. 启动器图标

设置启动图标的目标是,无论设备型号或屏幕密度如何,您的启动器图标都会呈现清晰简洁的效果。屏幕密度是指屏幕上每英寸的像素数或每英寸的点数 (dpi)。对于中密度设备 (mdpi),屏幕上每英寸有 160 个点,而超超超高密度设备 (xxxhdpi) 的屏幕上每英寸有 640 个点。

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

浏览启动器图标文件

  1. 如需查看启动器图标在项目内的呈现效果,请在 Android Studio 中打开项目。
  2. “Project”窗口中,切换到 Project 视图。此视图将显示您项目的文件结构。

eef1b274888f2a1c.png

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

b725c14ee21fce54.png

drawable 文件夹中以 XML 文件的形式包含了启动器图标所对应的矢量。就可绘制图标而言,矢量是指一系列在编译时绘制图像的指令。mdpihdpixhdpi 等是密度限定符,您可以将其附加到资源目录的名称(例如 mipmap,)上,以表明其中的资源适用于特定屏幕密度的设备。以下是 Android 上的密度限定符列表:

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

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

1da42b08b39e8560.png

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

5a5eaf5d0c2f67de.png

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

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

3. 自适应图标

前景图层和背景图层

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

1af36983e3677abe.gif

在上面的示例中,白色的 Android 图标位于前景图层中,而蓝白网格位于背景图层中。前景图层会叠加在背景图层上。系统会在其上再叠加一个蒙版(在此例中为圆形蒙版),这样就产生了一个圆形应用图标。

浏览自适应图标文件

我们以 Affirmations 应用代码中已经提供的默认自适应图标文件为例进行说明。

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

29758558d7509497.png

  1. 打开 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"/>
    <monochrome android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>
  1. 请注意,该文件中使用了 <adaptive-icon> 元素为应用图标的 <background> 图层和 <foreground> 图层分别提供资源可绘制对象,从而完成对它们的声明。
  2. 返回 Project 视图,并定位背景和前景可绘制对象:res > drawable > ic_launcher_background.xmlres > drawable > ic_launcher_foreground.xml
  3. 切换到 Design 视图,查看每个图层的预览效果。

背景:

b24d4a67be43b6d9.png

前景:

c05923559b5541f1.png

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

ic_launcher_foreground.xml

<!--
    Copyright (C) 2023 The Android Open Source Project

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         https://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<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="M31,63.928c0,0 6.4,-11 12.1,-13.1c7.2,-2.6 26,-1.4 26,-1.4l38.1,38.1L107,108.928l-32,-1L31,63.928z">
    <aapt:attr name="android:fillColor">
      <gradient
          android:endX="85.84757"
          android:endY="92.4963"
          android:startX="42.9492"
          android:startY="49.59793"
          android:type="linear">
        <item
            android:color="#44000000"
            android:offset="0.0" />
        <item
            android:color="#00000000"
            android:offset="1.0" />
      </gradient>
    </aapt:attr>
  </path>
  <path
      android:fillColor="#FFFFFF"
      android:fillType="nonZero"
      android:pathData="M65.3,45.828l3.8,-6.6c0.2,-0.4 0.1,-0.9 -0.3,-1.1c-0.4,-0.2 -0.9,-0.1 -1.1,0.3l-3.9,6.7c-6.3,-2.8 -13.4,-2.8 -19.7,0l-3.9,-6.7c-0.2,-0.4 -0.7,-0.5 -1.1,-0.3C38.8,38.328 38.7,38.828 38.9,39.228l3.8,6.6C36.2,49.428 31.7,56.028 31,63.928h46C76.3,56.028 71.8,49.428 65.3,45.828zM43.4,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2c-0.3,-0.7 -0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C45.3,56.528 44.5,57.328 43.4,57.328L43.4,57.328zM64.6,57.328c-0.8,0 -1.5,-0.5 -1.8,-1.2s-0.1,-1.5 0.4,-2.1c0.5,-0.5 1.4,-0.7 2.1,-0.4c0.7,0.3 1.2,1 1.2,1.8C66.5,56.528 65.6,57.328 64.6,57.328L64.6,57.328z"
      android:strokeWidth="1"
      android:strokeColor="#00000000" />
</vector>

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

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

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

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

4. 下载新资源

下载以下两个新资源,借助它们,您可为 Affirmations 应用创建自适应图标,而不必费心了解矢量可绘制对象文件的所有细节。其中的内容是利用设计工具自动生成的。

  1. 下载 ic_launcher_background.xml,即背景图层的矢量可绘制对象。如果您的浏览器显示了相应的文件而没有下载该文件,请依次选择文件 > 网页另存为…,以将其保存到计算机上。
  2. 下载 ic_launcher_foreground.xml,即前景图层的矢量可绘制对象。

请注意,系统对这些前景和背景图层资源有特定要求,例如它们的尺寸都必须为 108dp x 108dp。您可以在 AdaptiveIconDrawable 文档中查看更多详细信息,还可以在 Material Design 网站上查看 Android 图标的设计指南。

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

5. 更改应用图标

返回到 Android Studio,使用刚刚下载的新资源。

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

请删除以下内容:

drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml

请删除以下内容:

mipmap-anydpi-v26/
mipmap-hdpi/
mipmap-mdpi/
mipmap-xhdpi/
mipmap-xxhdpi/
mipmap-xxxhdpi/

您可以取消选中 Safe delete (with usage search) 框,然后点击 OKSafe delete (with usage search) 功能会通过搜索代码来找出要删除的资源的使用情况。在这种情况下,您需要将这些文件夹替换为名称相同的新文件夹,这样就无需担心安全删除了。

  1. 创建一个新的 Image Asset。您可以右键点击 res 目录,然后依次选择 New > Image Asset;也可以先点击 Resource Manager 标签页,再点击 + 图标,然后从下拉菜单中选择 Image Asset

dbe59156de9fde40.png

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

4729e4abc9542d87.png

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

2f59e5ac70a8a033.png

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

dc0aee541c8039e7.png

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

a111303e7703fc99.png

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

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

同时具有前景图层和背景图层,便可实现有趣的视觉效果,因为这两个图层可以彼此独立移动并缩放。不妨查看博文“设计自适应图标”中“设计注意事项”下的内容,了解一些有关视觉效果的有趣示例。由于您不知道用户将会使用什么设备,或者 OEM 将会为您的图标应用哪种蒙版,您需要设置自己的自适应图标,以免重要信息被裁剪掉。

  1. 如果重要的内容会被裁减掉,或者显示的太小,您可以使用每个图层的 Scaling 部分下的 Resize 滑动条,确保每个元素都显示在安全区域中。为了确保所有内容均不会被裁剪,请拖动 Foreground LayerBackground Layer 标签页中的 Resize 滑块,将前景图片和背景图片的大小调整至 99%。

57fec53a0411f206.png

  1. 点击 Next
  2. 此步骤为 Confirm Icon Path。您可以点击各个文件,查看预览效果。

4b0a24f0cbd9a2a2.png

  1. 点击 Finish
  2. 确认 mipmap 文件夹中所有生成的资源均正确显示。示例:

339af1a3b9ff550c.png 31bc221b0e4b8206.png

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

测试应用

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

c943f8c37c450545.png

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

自适应和旧版启动器图标

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

在搭载 Android 8.0 或更高版本(API 26 及更高版本)的设备上,系统可以使用自适应图标(由前景矢量可绘制对象、背景矢量可绘制对象以及在其上应用的 OEM 蒙版组合而成)。以下是您项目中的相关文件:

res/drawable/ic_launcher_background.xml
res/drawable/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.webp
res/mipmap-mdpi/ic_launcher_round.webp
res/mipmap-hdpi/ic_launcher.webp
res/mipmap-hdpi/ic_launcher_round.webp
res/mipmap-xhdpi/ic_launcher.png
res/mipmap-xhdpi/ic_launcher_round.webp
res/mipmap-xxhdpi/ic_launcher.webp
res/mipmap-xxhdpi/ic_launcher_round.webp
res/mipmap-xxxhdpi/ic_launcher.webp
res/mipmap-xxxhdpi/ic_launcher_round.webp

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

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

6. 获取解决方案代码

如需下载完成后的 Codelab 代码,您可以使用以下 Git 命令:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-affirmations.git
$ cd basic-android-kotlin-compose-training-affirmations
$ git checkout main

或者,您也可以下载 ZIP 文件形式的代码库,将其解压缩并在 Android Studio 中打开。

如果您想查看解决方案代码,请前往 GitHub 查看

  1. 进入为此项目提供的 GitHub 代码库页面。
  2. 验证分支名称是否与此 Codelab 中指定的分支名称一致。例如,在以下屏幕截图中,分支名称为 main

1e4c0d2c081a8fd2.png

  1. 在项目的 GitHub 页面上,点击 Code 按钮,以打开一个弹出式窗口。

1debcf330fd04c7b.png

  1. 在弹出式窗口中,点击 Download ZIP 按钮,将项目保存到计算机上。等待下载完成。
  2. 在计算机上找到该文件(很可能在 Downloads 文件夹中)。
  3. 双击 ZIP 文件进行解压缩。系统将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

  1. 启动 Android Studio。
  2. Welcome to Android Studio 窗口中,点击 Open

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已经打开,则改为依次选择 File > Open 菜单选项。

8d1fda7396afe8e5.png

  1. 在文件浏览器中,前往解压缩的项目文件夹所在的位置(很可能在 Downloads 文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击 Run 按钮 8de56cba7583251f.png 以构建并运行应用。请确保该应用按预期构建。

7. 总结

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

8. 了解更多内容