自動調整圖示

自動調整圖示 (或 AdaptiveIconDrawable) 會根據個別裝置功能和使用者主題,以不同方式顯示。自動調整圖示主要由主畫面的啟動器使用,但也可用於捷徑、「設定」應用程式、共用對話方塊和總覽畫面。自動調整圖示適用於所有 Android 板型規格。

相較於點陣圖圖片,自動調整圖示可以根據不同的用途進行調整:

  • 不同形狀:自動調整圖示可在不同裝置型號上顯示不同形狀。舉例來說,可在某部原始設備製造商 (OEM) 裝置上顯示圓形,並在另一部裝置上顯示方框 (正方形和圓形之間的形狀)。每部裝置原始設備製造商 (OEM) 都必須提供遮罩,讓系統使用此遮罩來轉譯所有形狀相同的自動調整圖示。

    GIF 顯示相同範例 Android 圖示的重複動畫,根據使用的遮罩顯示不同形狀,分別是圓形和兩種小松鼠
    圖 1.自動調整圖示支援多種遮罩,因裝置而異。
  • 視覺效果:自動調整圖示支援各種引人入勝的視覺效果,當使用者在主畫面上放置或移動圖示,就會顯示該效果。

    GIF 顯示兩個圓形 Android 範例圖示的範例,動畫顯示使用者回應。第一個圖示顯示 Android 標誌,先向左再向右慢慢晃動,然後在圓圈內部上下滑動。第二個圖示展開後再次縮小。
    圖 2.自動調整圖示顯示的視覺效果範例。
  • 使用者主題設定:從 Android 13 (API 級別 33) 開始,使用者可以設定自動調整圖示的主題。如果使用者啟用主題化應用程式圖示,只要在系統設定中開啟「主題化圖示」切換鈕,且啟動器支援這項功能,系統就會根據使用者所選桌布和主題的色彩決定色調顏色。

    這張圖片顯示三部 Android 裝置的範例,每部裝置分別顯示不同色調的使用者主題:第一張顯示深色色調的桌布,第二部顯示有金色色調的桌布,第三部顯示有淺灰色調的桌布,還有淺灰色的調色桌布。在每個示例中,圖示都沿用了桌布的色調,完美融合了桌布。
    圖 3.自動調整圖示會沿用使用者的桌布和主題。

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

    • 如果使用者未啟用主題化應用程式圖示。
    • 如果您的應用程式未提供單色應用程式圖示。
    • 如果啟動器不支援主題化應用程式圖示。

設計自動調整圖示

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

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

    這張圖片展示前景圖層 (左圖) 和背景圖層 (右圖) 的範例。前景會顯示範例 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" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</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() 方法。

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

其他資源

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