自動調整圖示

自動調整圖示標頭

自動調整圖示 (AdaptiveIconDrawable) 會依個別裝置的性能和使用者設定的主題來改變顯示效果,自動調整圖示主要應用的地方是主畫面的啟動器,但也可能用於捷徑、「設定」應用程式、分享對話方塊及總覽畫面。自動調整圖示適用於所有 Android 板型規格。

與點陣圖圖片不同,自動調整圖示可配合不同用途:

  • 不同形狀:自動調整圖示可在不同裝置型號上顯示各種形狀。舉例來說,它可以在某個原始設備製造商 (OEM) 裝置上顯示圓形,並在另一個裝置上顯示方圓形 (介於正方形和圓形之間的形狀)。每個裝置原始設備製造商 (OEM) 都必須提供遮罩,系統會使用遮罩算繪所有形狀相同的自動調整圖示。

    GIF 顯示同一個 Android 圖示範例的重複動畫,根據使用的遮罩 (圓形,然後是兩種不同的圓角矩形) 顯示不同形狀
    圖 1. 自動調整圖示支援多種遮罩,具體取決於裝置。
  • 視覺效果:自動調整圖示支援各種富有吸引力的視覺效果,當使用者在主畫面上放置或移動圖示,就會看到這些效果。

    GIF 圖片:兩個圓形 Android 範例圖示,以動畫呈現使用者回應。第一個圖示顯示 Android 標誌在圓圈內左右搖晃,然後上下搖晃。第二個圖示會展開,然後再次收合。
    圖 2. 自動調整圖示顯示的視覺效果範例。
  • 使用者主題:從 Android 13 (API 級別 33) 開始,使用者可以針對自動調整圖示套用主題。如果使用者在系統設定中啟用主題化應用程式圖示,且啟動器支援這項功能,系統就會根據使用者所選桌布和主題的配色,調整應用程式圖示的色調,前提是應用程式的自動調整圖示有 monochrome 圖層。從 Android 16 QPR 2 開始,如果應用程式未提供圖示,Android 會自動為應用程式圖示套用主題。

    三個 Android 裝置範例,每個裝置都顯示不同的使用者主題,並帶有不同的色調:第一個顯示深色調的桌布;第二個顯示金色調的桌布;第三個顯示淺灰色調和藍色調的桌布。在每個範例中,圖示都沿用了桌布的色調,完美融入背景。
    圖 3. 自動調整圖示會沿用使用者的桌布和主題。

    在下列情況下,主畫面不會顯示主題色應用程式圖示,而是顯示自動調整或標準應用程式圖示:

    • 使用者未啟用主題色應用程式圖示。
    • 如果應用程式未提供單色應用程式圖示,且使用者裝置搭載的 Android 版本低於 Android 16 QPR 2。
    • 如果啟動器不支援主題色應用程式圖示。

設計自動調整圖示

為確保自動調整圖示支援各種形狀、視覺效果和使用者主題設定,設計必須符合下列規定:

  • 您必須為彩色版圖示提供兩個圖層:一個用於前景,另一個用於背景。圖層可以是向量或點陣圖,但建議使用向量。

    前景圖層 (左) 和背景圖層 (右) 的範例。前景顯示 Android 標誌範例的 16 邊形圖示,位於 66x66 安全區域的中央。安全區位於 108x108 容器的中央。背景顯示安全區域和容器的相同測量尺寸,但只有藍色背景,沒有標誌。
    圖 4. 使用前景和背景圖層定義的自動調整圖示。圖中 66x66 的安全區,是 OEM 定義的形狀遮罩絕不會裁剪的區域。
    範例:上圖中的圖示疊加在圓形遮罩上。
    圖 5. 前景和背景圖層與圓形遮罩一起套用的範例。
  • 如要讓應用程式圖示支援使用者主題設定,請提供單色圖示版本的單一圖層。

    單色圖示圖層 (左) 和顏色預覽 (右) 的範例。單色圖層顯示 Android 標誌範例的 16 邊形圖示,位於 66x66 安全區域的中央。安全區域位於 108x108 容器的中心。顏色預覽畫面會顯示這個圖層套用至不同顏色使用者主題 (橘色、粉紅色、黃色和綠色) 時的顯示效果。
    圖 6. 單色圖示層 (左) 和顏色預覽範例 (右)。
  • 將所有圖層的大小調整為 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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</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() 方法。

如要進一步瞭解如何導入自動調整圖示,請參閱「導入自動調整圖示」。如要進一步瞭解捷徑,請參閱「應用程式捷徑總覽」。

其他資源

如要進一步瞭解如何設計及實作自動調整圖示,請參閱下列資源。