變更應用程式圖示

1. 事前準備

應用程式圖示是辨認應用程式的重要方式，您可以為圖示加入獨特風格和外觀。應用程式圖示通常會在多個位置顯示，包括主畫面、「所有應用程式」畫面和「設定」應用程式。

應用程式圖示亦稱為「啟動器」圖示。啟動器是指您在 Android 裝置上按下主畫面按鈕，以檢視和整理應用程式、新增小工具和捷徑等操作時看到的圖示。

如果您使用過不同的 Android 裝置，有可能注意到啟動器介面的外觀或許會因裝置製造商而異。有時候，裝置製造商會打造品牌專屬的自訂啟動器體驗。舉例來說，不同的製造商呈現的應用程式圖示形狀可能與上述圓形圖示形狀不同。

例如，他們會以正方形、圓角正方形或方圓形 (介於正方形和圓形之間) 顯示所有應用程式圖示。

不論裝置製造商選擇哪種形狀，其目的都是為了讓所有應用程式圖示能在單一裝置上顯示統一的形狀，以便提供一致的使用者體驗。

這就是 Android 平台支援自動調整圖示 (自 API 級別 26 起) 的原因。為您的應用程式導入自動調整圖示後，您的應用程式就能因應各種裝置，並基於裝置螢幕自動調整啟動器圖示。

本程式碼研究室提供圖片來源檔案，做為 Affirmations 應用程式啟動器圖示。您將使用 Android Studio 中名為 Image Asset Studio 的工具，產生啟動器圖示的各種版本。之後，您便可將所學知識應用到其他應用程式的應用程式圖示上！

必要條件

能夠瀏覽基本 Android 專案檔案，包括資源檔案。
能夠在模擬器或實體裝置上，從 Android Studio 安裝 Android 應用程式。

課程內容

如何變更應用程式的啟動器圖示。
如何在 Android Studio 中使用 Image Asset Studio 產生啟動器圖示素材資源。
什麼是自動調整圖示，以及為何是雙層圖示。

製作內容

Affirmations 應用程式的自訂啟動器圖示。

軟硬體需求

一部已安裝最新穩定版 Android Studio 的電腦。
可下載圖片資源檔案的網際網路連線。
GitHub 存取權

下載範例程式碼

在 Android Studio 中開啟 basic-android-kotlin-compose-training-affirmations 資料夾。

前往專案所在的 GitHub 存放區頁面。
驗證分支版本名稱與程式碼研究室中指定的分支版本名稱相符。例如，在下列螢幕截圖中，分支版本名稱為「main」。

在專案的 GitHub 頁面中，按一下「Code」按鈕，畫面上會出現彈出式視窗。

在彈出式視窗中，按一下「Download ZIP」按鈕，將專案儲存至電腦。等待下載作業完成。
在電腦中找到該檔案 (可能位於「下載」資料夾中)。
按兩下解壓縮 ZIP 檔案。這項操作會建立含有專案檔案的新資料夾。

在 Android Studio 中開啟專案

啟動 Android Studio。
在「Welcome to Android Studio」視窗中，按一下「Open」。

注意：如果 Android Studio 已開啟，請改為依序選取「File」>「Open」選單選項。

在檔案瀏覽器中，前往已解壓縮的專案資料夾所在的位置 (可能位於「下載」資料夾中)。
按兩下該專案資料夾。
等待 Android Studio 開啟專案。
按一下「Run」按鈕即可建構並執行應用程式。請確認應用程式的建構方式符合預期。

2. 啟動器圖示

這步驟的目的是讓啟動器圖示的外觀變得清晰簡潔，而不受裝置型號或螢幕密度所影響。螢幕密度是指螢幕上的每英寸像素數或每英寸像素數 (dpi)。如果是中密度裝置 (mdpi)，螢幕上每英寸像素數為 160；至於 Extra-extra-extra-high 密度的裝置 (xxxhdpi)，螢幕上每英寸像素數則為 640。

為符合不同螢幕密度的裝置，您須提供不同版本的應用程式圖示。

探索啟動器圖示檔案

如要查看啟動器圖示在專案中的顯示外觀，請在 Android Studio 開啟專案。
在「Project」視窗中，切換至「Project」檢視畫面。這會顯示專案的檔案結構。

前往資源目錄 (依序點選「app」>「src」> 「main」>「res」)，然後展開部分 mipmap 資料夾。您會將 Android 應用程式的啟動器圖示素材資源放在這些 mipmap 資料夾中。

可繪項目資料夾包含 XML 檔案中啟動器圖示的向量。向量 (如果是可繪項目圖示) 是一系列在編譯圖片時繪製圖片的指示。mdpi、hdpi、xhdpi 等都是像素密度限定詞，您可以將其附加到資源目錄名稱 (例如 mipmap,) 上，表示這些資源適用於特定螢幕密度的裝置。以下是 Android 上的像素密度限定詞清單：

mdpi：適用於中密度螢幕 (約 160 dpi) 的資源
hdpi：適用於高密度螢幕 (約 240 dpi) 的資源
xhdpi：適用於 extra-high 密度螢幕 (約 320 dpi) 的資源
xxhdpi：適用於 extra-extra-high 密度螢幕 (約 480dpi) 的資源
xxxhdpi：適用於 extra-extra-extra-high 密度螢幕 (約 640 dpi) 的資源
nodpi：不論螢幕的像素密度為何都不能縮放的資源
anydpi：可調整為各種密度的資源

按一下圖片檔，您就會看到預覽畫面。ic_launcher.webp 檔案包含圖示的正方形版本，ic_launcher_round.webp 檔案則包含圖示的圓形版本。每個 mipmap 目錄中都會提供這兩個版本。

舉例來說，以下是「res」>「mipmap-xxxhdpi」>「ic_launcher_round.webp」的顯示效果。請注意，相應的資源素材尺寸位於右上方。此圖片的尺寸為 192px x 192px。

這是點選「res」>「mipmap-mdpi」>「ic_runtime_round.png」後的顯示效果。尺寸只有 48px x 48px。

如您所見，這些點陣圖圖片檔是由固定的像素格線組成，是針對特定螢幕解析度而建立的。因此，如果您調整其大小，畫質可能會降低。

現在，您已瞭解啟動器圖示的一些背景知識，接下來我們將說明自動調整圖示。

3. 自動調整圖示

前景與背景圖層

自 Android 8.0 版本 (API 級別 26) 起，系統便支援自動調整圖示，以便呈現更加靈活有趣的視覺效果。對開發人員來說，這表示應用程式圖示是由前景和背景這兩個圖層組成。

在上述例子中，白色的 Android 圖示位於前景圖層，藍色和白色的格線位於背景圖層。前景圖層會堆疊在背景圖層上方。系統會在其上套用遮罩 (本例使用的是圓形遮罩)，以產生圓形的應用程式圖示。

探索自動調整圖示檔案

查看 Affirmations 應用程式程式碼中提供的預設自動調整圖示檔案。

在 Android Studio 的「Project」視窗中，找出並展開「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"/>
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>

留意上述程式碼如何使用 <adaptive-icon> 元素，向應用程式圖示的 <background> 和 <foreground> 圖層分別提供資源可繪項目，進而宣告這些圖層。
返回「Project」檢視畫面，找出背景和前景可繪項目，兩者分別位於：「res」>「drawable」>「ic_launcher_background.xml」和「res」>「drawable」>「ic_launcher_foreground.xml」。
切換至「Design」檢視畫面，即可查看各個選項的預覽畫面：

背景：

前景：

以上兩者都是向量可繪項目檔案，皆沒有以像素為單位的固定尺寸。如果您切換到「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 應用程式建立自動調整圖示。別擔心，您不用理解向量可繪項目檔案的所有細節。您可以使用設計工具自動產生其中的內容。

下載 ic_launcher_background.xml，即背景圖層的向量可繪項目。如果瀏覽器僅顯示檔案而並未下載，請依序選取「File」>「Save Page As...」，將檔案儲存到您的電腦。
下載 ic_launcher_foreground.xml，即前景圖層的向量可繪項目。

請注意，系統對這些前景和背景圖層素材資源設有特定要求，例如兩者的大小都必須為 108 dpi x 108 dpi。如需瞭解詳情，請參閱 AdaptiveIconDrawable 文件，您也可以在 Material Design 網站查看有關 Android 圖示的設計指南。

由於圖示的邊緣可能會依據裝置製造商的遮罩形狀而遭到裁剪，因此請務必將圖示的重要資訊放在「安全區域」內。安全區域是指位於前景圖層中央且直徑為 66dp 的圓形範圍。位於該安全區域之外的內容不應含有重要資訊 (例如背景顏色)，這樣即使遭到裁剪也不會有任何影響。

5. 變更應用程式圖示

返回 Android Studio 即可使用剛下載的新資產。

請先刪除具備 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)」方塊，然後按一下「OK」。安全刪除 (附帶用法搜尋) 功能會搜尋程式碼，尋找含有要刪除資源的使用情況。在此情況下，您可以使用相同名稱的新資料夾取代這些資料夾，這樣您就不必擔心「安全刪除」問題。

建立新的圖片素材資源。您可以在「res」目錄上按一下滑鼠右鍵，然後依序選擇「New」>「Image Asset」，或是依序點選「Resource Manager」分頁標籤和「+」圖示，然後在下拉式選單中選取「Image Asset」。

系統會開啟 Android Studio 的「Image Asset Studio」工具。
保留預設設定：

圖示類型：啟動器圖示 (自動調整和舊版)
名稱：ic_launcher

選取「Foreground Layer」分頁標籤後，前往「Source Asset」子區段。在「Path」欄位中，按一下資料夾圖示。
系統會顯示彈出式視窗，方便您瀏覽電腦及選取檔案。找出剛才下載新 ic_launcher_foreground.xml 檔案的位置。檔案可能儲存在電腦的「Downloads」資料夾中。找到後，按一下「Open」。
「Path」已更新為前景向量可繪項目的新位置。維持「Layer Name」為「ic_launcher_foreground」，而「Asset Type」為「Image」。

接下來，切換至「Background Layer」分頁標籤。保留預設值。
按一下「Path」欄位的資料夾圖示。
找出剛才下載的 ic_launcher_background.xml 檔案位置。按一下「Open」。

選取新的資源檔案時，預覽內容應會隨之更新。以下是使用新前景和背景圖層的畫面。

利用兩個圖層呈現應用程式圖示後，裝置製造商 (所謂的原始設備製造商，或簡稱 OEM) 可能會根據 Android 裝置建立不同的形狀，如上方預覽圖所示。原始設備製造商 (OEM) 提供的遮罩可套用至裝置上的所有應用程式圖示。

如果為應用程式圖示的兩個圖層都套用圓形遮罩，就會產生一個含有藍色格線背景的圓形圖示，當中包含 Android 圖示 (如上方左圖)。或者，也可以套用圓角方形遮罩，以產生上述右側圖片所示的應用程式圖示。

借助前景和背景圖層，還有助於實現有趣的視覺效果，因為這兩個圖層可獨立移動和縮放。請查看「設計須知」底下的這篇「設計自動調整圖示」網誌文章，瞭解一些視覺效果的有趣例子。由於您無法獲知使用者會使用哪種裝置，或是 OEM 會為您的圖示套用哪種遮罩，因此您必須設定自動調整圖示，以免重要資訊遭到裁剪。

如果重要內容會遭到裁剪或顯得過小，您可以使用各圖層「Scaling」部分下方的「Resize」滑桿進行調整。如要確保不裁剪任何內容，請在「Foreground Layer」和「Background Layer」分頁中拖曳「Resize」滑桿，將前景與背景圖片大小調整為 99%。

點選「Next」。
這個步驟是「Confirm Icon Path」。按一下個別檔案即可查看預覽畫面。

按一下「Finish」。
確認 mipmap 資料夾中所有產生的素材資源皆正確顯示。例如：

太棒了！現在，我們要再進行一項變更。

測試應用程式

測試新的應用程式圖示是否會顯示。在您的裝置 (模擬器或實體裝置) 上執行應用程式。
按下裝置的主畫面按鈕。
向上滑動即可顯示「所有應用程式」清單。
尋找你剛才更新的應用程式。畫面中應會顯示新的應用程式圖示。

做得好！全新的應用程式圖示很精美。

自動調整圖示及舊版啟動器圖示

現在，自動調整圖示可以正常運作，您可能會好奇，為什麼無法刪除所有應用程式圖示的點陣圖圖片。您仍然需要這些檔案，才能讓應用程式在舊版 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. 取得解決方案程式碼

完成程式碼研究室後，如要下載當中用到的程式碼，您可以使用這些 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。

前往專案所在的 GitHub 存放區頁面。
驗證分支版本名稱與程式碼研究室中指定的分支版本名稱相符。例如，在下列螢幕截圖中，分支版本名稱為「main」。

在專案的 GitHub 頁面中，按一下「Code」按鈕，畫面上會出現彈出式視窗。

在彈出式視窗中，按一下「Download ZIP」按鈕，將專案儲存至電腦。等待下載作業完成。
在電腦中找到該檔案 (可能位於「下載」資料夾中)。
按兩下解壓縮 ZIP 檔案。這項操作會建立含有專案檔案的新資料夾。

在 Android Studio 中開啟專案

啟動 Android Studio。
在「Welcome to Android Studio」視窗中，按一下「Open」。

注意：如果 Android Studio 已開啟，請改為依序選取「File」>「Open」選單選項。

在檔案瀏覽器中，前往已解壓縮的專案資料夾所在的位置 (可能位於「下載」資料夾中)。
按兩下該專案資料夾。
等待 Android Studio 開啟專案。
按一下「Run」按鈕即可建構並執行應用程式。請確認應用程式的建構方式符合預期。

7. 摘要

將應用程式圖示檔案放在 mipmap 資源目錄中。
如要確保與舊版 Android 的回溯相容性，請在各個密度級別 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 提供不同版本的應用程式圖示點陣圖圖片。
在資源目錄中新增資源限定詞，指定在具有特定設定 (v24 或 v26) 的裝置上應使用的資源。
向量可繪項目是 Android 的向量圖形實作內容。它們以 XML 定義，是由一組點、線、曲線以及相關色彩資訊所組成。向量可繪項目可針對任何密度縮放，而不會影響品質。
API 26 已為 Android 平台導入自動調整圖示。這類圖示由符合特定規範的前景和背景圖層所組成，因此在採用不同 OEM 遮罩的多款裝置上，您的應用程式圖示呈現優異品質。
使用 Android Studio 中的 Image Asset Studio，為您的應用程式建立舊版和自動調整圖示。

變更應用程式圖示

1. 事前準備

必要條件

課程內容

製作內容

軟硬體需求

下載範例程式碼

在 Android Studio 中開啟專案

2. 啟動器圖示

探索啟動器圖示檔案

3. 自動調整圖示

前景與背景圖層

探索自動調整圖示檔案

4. 下載新素材資源

5. 變更應用程式圖示

測試應用程式

自動調整圖示及舊版啟動器圖示

6. 取得解決方案程式碼

在 Android Studio 中開啟專案

7. 摘要

8. 瞭解詳情