更改应用图标

1. 开始之前

应用图标是区分应用的重要方式,它可以赋予应用独特的风格和外观。应用图标会出现在许多位置,包括主屏幕、所有应用屏幕和“设置”应用。

您可能还会听到应用图标被称为启动器图标。启动器是指您在 Android 设备上按下 Home 按钮后,查看和整理应用、添加微件和快捷方式等的体验。

ec0237fb600dd2a9.png e7a9b86b35f7d6c3.png

如果您使用过不同的 Android 设备,您可能会注意到,根据设备制造商的不同,启动器体验可能会有所不同。有时,设备制造商会创建具有其品牌特色的自定义启动器体验。例如,不同的制造商可能会以与上面所示的圆形图标形状不同的形状来显示应用图标。

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

An image of the different app icon shapes

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

An image demonstrating the uniform shape of icons.

这就是 Android 平台引入对自适应图标支持的原因(从 API 级别 26 开始)。通过为您的应用实现自适应图标,您的应用能够根据设备的显示屏调整启动器图标,以适应各种设备。

本 Codelab 将为您提供 Affirmations 应用启动器图标的图片源文件。您将使用 Android Studio 中的一个工具(称为 Image Asset Studio)来生成不同版本的启动器图标。之后,您可以将学到的知识应用于其他应用的应用图标!

And image of the Affirmations App launcher icon.

前提条件

  • 能够导航基本 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. 在您的计算机上找到该文件(可能位于“下载”文件夹中)。
  3. 双击 ZIP 文件将其解压。这将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

  1. 启动 Android Studio。
  2. 在“欢迎使用 Android Studio”窗口中,点击“打开”。

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已打开,请改为选择“文件”>“打开”菜单选项。

8d1fda7396afe8e5.png

  1. 在文件浏览器中,导航到解压后的项目文件夹所在的位置(可能位于您的“下载”文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击运行按钮 运行按钮图标 构建并运行应用。确保构建按预期进行。

2. 启动器图标

目标是使您的启动器图标看起来清晰锐利,无论设备型号或屏幕密度如何。屏幕密度是指屏幕上每英寸有多少像素或点 (dpi)。对于中密度设备 (mdpi),屏幕上有 160 点/英寸;而超高密度设备 (xxxhdpi) 的屏幕上有 640 点/英寸。

为了兼顾各种屏幕密度的设备,您需要提供不同版本的应用图标。

探索启动器图标文件

  1. 要在项目中查看启动器图标是什么样的,请在 Android Studio 中打开项目。
  2. 项目窗口中,切换到 Project 视图。这会显示您项目的文件结构。

eef1b274888f2a1c.png

  1. 导航到资源目录 (app > src > main > res),并展开一些 mipmap 文件夹。这些 mipmap 文件夹是您放置 Android 应用启动器图标资源的位置。

b725c14ee21fce54.png

drawable 文件夹包含 XML 文件中的启动器图标矢量。矢量(在 drawable 图标的情况下)是一系列编译时绘制图像的指令。mdpihdpixhdpi 等是密度限定符,您可以将其附加到资源目录名称(如 mipmap)上,以指示它们是用于特定屏幕密度设备的资源。以下是 Android 上的密度限定符列表

  • mdpi - 用于中密度屏幕的资源(约 160 dpi)
  • hdpi - 用于高密度屏幕的资源(约 240 dpi)
  • xhdpi - 用于超高密度屏幕的资源(约 320 dpi)
  • xxhdpi - 用于超超高密度屏幕的资源(约 480 dpi)
  • xxxhdpi - 用于超超超高密度屏幕的资源(约 640 dpi)
  • 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 的项目窗口中,找到并展开 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> 层,通过为每个层提供资源 drawable。
  2. 返回 Project 视图并找到背景和前景 drawable:res > drawable > ic_launcher_background.xmlres > drawable > ic_launcher_foreground.xml
  3. 切换到 Design 视图查看每个预览

背景

b24d4a67be43b6d9.png

前景

c05923559b5541f1.png

  1. 这些都是矢量 drawable 文件。它们没有固定的像素尺寸。如果您切换到 Code 视图,您可以看到使用 <vector> 元素声明矢量 drawable 的 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://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>

虽然矢量 drawable 和位图图片都描述了图形,但它们之间存在重要的差异。

位图图片对它所包含的图像了解不多,除了每个像素的颜色信息。另一方面,矢量图形知道如何绘制定义图像的形状。这些指令由一组点、线和曲线以及颜色信息组成。优点是矢量图形可以缩放到任何画布大小、任何屏幕密度而不会损失质量。

矢量 drawable 是 Android 对矢量图形的实现,旨在在移动设备上具有灵活性。您可以使用这些可能的元素在 XML 中定义它们。您只需定义一次图片,而不是为所有密度级别提供不同版本的位图资源。这样可以减小应用的大小并使其更易于维护。

现在,是时候开始实际更改应用图标了!

4. 下载新资源

下载以下两个新资源,使您能够为 Affirmations 应用创建自适应图标。您无需担心理解矢量 drawable 文件的每一个细节。它们的内容是设计工具自动生成的。

  1. 下载 ic_launcher_background.xml,这是背景层的矢量 drawable。如果您的浏览器显示文件而不是下载它,请选择“文件”>“另存为...”将其保存到您的计算机。
  2. 下载 ic_launcher_foreground.xml,这是前景层的矢量 drawable。

请注意,这些前景层和背景层资源有一些特定要求,例如两者的大小都必须是 108 dpi x 108 dpi。您可以在 AdaptiveIconDrawable 文档中查看更多详细信息,也可以在 Material Design 网站上查看有关 Android 图标的设计指南。

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

5. 更改应用图标

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

  1. 首先,删除包含 Android 图标和绿色网格背景的旧 drawable 资源。在项目视图中,右键点击文件并选择“删除”。

删除

drawable/ic_launcher_background.xml
drawable/ic_launcher_foreground.xml

删除

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

您可以取消选中“安全删除(查找用法)”框并点击“确定”。“安全删除(查找用法)”功能会在代码中搜索即将删除的资源的用法。在这种情况下,您将使用同名的新文件夹替换这些文件夹,因此无需担心安全删除

  1. 创建新的 Image Asset。您可以右键点击 res 目录并选择 New > Image Asset,也可以点击 Resource Manager 标签页,点击 + 图标,然后从下拉列表中选择 Image Asset

dbe59156de9fde40.png

  1. Android Studio 的 Image Asset Studio 工具会打开。
  2. 保持默认设置
  • 图标类型:启动器图标(自适应和传统)
  • 名称:ic_launcher

4729e4abc9542d87.png

  1. 在已选中的前景层标签页中,转到源资源子部分。在路径字段中,点击文件夹图标。
  2. 弹出提示,让您浏览计算机并选择一个文件。找到您刚刚下载的新 ic_launcher_foreground.xml 文件的位置。它可能在您计算机的“下载”文件夹中。找到后,点击“打开”。
  3. 路径现在已更新为新的前景矢量 drawable 的位置。将层名称保留为 ic_launcher_foreground,将资源类型保留为 Image

2f59e5ac70a8a033.png

  1. 接下来,切换到界面的背景层标签页。保持默认值。
  2. 点击路径字段中的文件夹图标。
  3. 找到您刚刚下载的 ic_launcher_background.xml 文件的位置。点击“打开”。

dc0aee541c8039e7.png

  1. 当您选择新的资源文件时,预览应会更新。使用新的前景层和背景层后,它应该看起来像这样。

a111303e7703fc99.png

通过将您的应用图标表示为两层,设备制造商(简称 OEM)可以根据 Android 设备创建不同的形状,如上面的预览所示。OEM 提供一个蒙版,该蒙版应用于设备上的所有应用图标。

当圆形蒙版应用于应用图标的两层时,结果是一个带有 Android 图片和蓝色网格背景的圆形图标(上图左侧)。或者,可以应用圆角方形蒙版来生成上图右侧的应用图标。

同时拥有前景层和背景层可以产生有趣的视觉效果,因为这两层可以相互独立移动并进行缩放。要查看视觉效果的一些有趣示例,请在 Design Considerations 下查看设计自适应图标博客文章。由于您不知道您的用户将使用什么设备或 OEM 将对您的图标应用什么蒙版,因此您需要设置您的自适应图标,以便重要信息不会被裁剪。

  1. 如果重要内容被裁剪或显得太小,您可以使用每个层的缩放部分下的调整大小滑块来确保所有内容都显示在安全区域中。为确保不被裁剪,请在前景层背景层标签页中拖动调整大小滑块,将前景和背景图片的尺寸调整为 99%。

57fec53a0411f206.png

  1. 点击“下一步”。
  2. 此步骤是确认图标路径。您可以点击单个文件查看预览。

4b0a24f0cbd9a2a2.png

  1. 点击“完成”。
  2. 验证在 mipmap 文件夹中生成的所有资源都正确。示例

339af1a3b9ff550c.png 31bc221b0e4b8206.png

干得好!现在您将进行最后一项更改。

测试您的应用

  1. 测试您的新应用图标是否显示。在您的设备(模拟器或物理设备)上运行应用。
  2. 按下设备的 Home 按钮。
  3. 向上滑动显示所有应用列表。
  4. 查找您刚刚更新的应用。您应该会看到显示了新的应用图标。

c943f8c37c450545.png

做得好!新的应用图标看起来很棒。

自适应和传统启动器图标

既然您的自适应图标工作良好,您可能想知道为什么不能去掉所有的应用图标位图图片。您仍然需要这些文件,以便您的应用图标在旧版本的 Android 上显示高质量,这称为向后兼容性。

对于运行 Android 8.0 或更高版本(API 版本 26 及更高)的设备,可以使用自适应图标(前景矢量 drawable、背景矢量 drawable 和在其上方应用的 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. 在您的计算机上找到该文件(可能位于“下载”文件夹中)。
  3. 双击 ZIP 文件将其解压。这将创建一个包含项目文件的新文件夹。

在 Android Studio 中打开项目

  1. 启动 Android Studio。
  2. 在“欢迎使用 Android Studio”窗口中,点击“打开”。

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已打开,请改为选择“文件”>“打开”菜单选项。

8d1fda7396afe8e5.png

  1. 在文件浏览器中,导航到解压后的项目文件夹所在的位置(可能位于您的“下载”文件夹中)。
  2. 双击该项目文件夹。
  3. 等待 Android Studio 打开项目。
  4. 点击运行按钮 运行按钮图标 构建并运行应用。确保构建按预期进行。

7. 总结

  • 将应用图标文件放置在 mipmap 资源目录中。
  • 在每个密度级别(mdpihdpixhdpixxhdpixxxhdpi)提供不同版本的应用图标位图图片,以实现与旧版本 Android 的向后兼容性。
  • 在资源目录上添加资源限定符,以指定应在具有特定配置(v24v26)的设备上使用的资源。
  • 矢量 drawable 是 Android 对矢量图形的实现。它们在 XML 中定义为一组点、线和曲线,以及相关的颜色信息。矢量 drawable 可以按任何密度缩放而不会损失质量。
  • 自适应图标在 API 26 中引入到 Android 平台。它们由遵循特定要求的前景层和背景层组成,以便您的应用图标在各种带有不同 OEM 蒙版的设备上看起来高质量。
  • 使用 Android Studio 中的 Image Asset Studio 为您的应用创建传统和自适应图标。

8. 了解更多