Coding Story

在黑暗中寫故事 👻

0%

Android 如何設計使用 Adaptive Icon

發表於 更新於 分類於 ， 閱讀次數： Disqus： 所需閱讀時間 ≈ 4 分鐘

前言故事

Adaptive icon 是自 Android 8 新增的 App icon 技術，支援相當多有趣的特效，雖然它已經上市一段時間，但是市面上支援的 App 仍然不多，當看到一個 App icon 不太對勁時，那大概就是沒未 adaptive icon 去量身定做。小唯的團隊雖然已經不是第一次使用，但是每隔一陣子請設計重畫新 icon 時，一開始總是會收到不符合格式的圖檔，小唯再三思考為什麼，終於發現這一切應該是 Google 的文件問題 😑。

每次小唯遇到不同的設計，總是把 Android Developer 上面的 adaptive icon 文件丟給設計，請設計提供圖檔，結果不是檔案東缺西少，就是大小不符格式，直到後來發現，一份文件，十個設計就算沒有十種，也有八種解讀方式，所以小唯決定自己寫一份超簡易 guideline 給自家設計。

1. 準備 Adaptive Icon

1.1 設計提供

提供兩個 SVG 格式的 108dp x 108dp 圖檔，讓工程使用 File > New > Vector Asset 匯入，分別用於前景圖層、與背景圖層：

前景圖 命名為 ic_launcher_foreground.xml （藍色背景色實際上為透明色）

背景圖 命名為 ic_launcher_background.xml

兩張圖需要注意的重點為：

  1. 兩張圖必須為 108dp x 108dp 大小的圖檔，讓工程放在 res/drawable 資料夾內

  2. 前景圖除了主題物外，其餘背景為透明色。所有需要跟著主題物一起移動的特效，都必須放在前景圖內

  3. 背景圖使用不透明色為背景色，任何不希望跟主題一起移動的內容，放在背景圖中

  4. 最常被忽略的一點。兩張圖中，所有可視物件，必須放在中間的 72dp x 72dp 中，也就是『不要放內容物在四邊的 18dp 中』（要不然顯示時就會被截掉）


1.2 工程提供

在 res/mipmap-anydpi-v26 資料夾下，準備兩個 xml 檔案：

  1. ic_launcher.xml

  2. ic_launcher_round.xml

內容都放入相同的：

1
2
3
4
5
<?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" />
</adaptive-icon>

Android 系統會自動在不同的使用者主題佈景下，套上相對應的遮罩：

2. 為舊系統準備 Icon

2.1 方形 Icon

設計提供 5 張大小分別為 192px x 192px、144px x 144px、96px x 96px、72px x 72px、48px x 48px 的方形圖：

讓工程將每張圖放入對應的資料夾中：

192px x 192px > res/mipmap-xxxhdpi/ic_launcher.png

144px x 144px > res/mipmap-xxhdpi/ic_launcher.png

96px x 96px > res/mipmap-xhdpi/ic_launcher.png

72px x 72px > res/mipmap-xhdpi/ic_launcher.png

48px x 48px > res/mipmap-xhdpi/ic_launcher.png

2.2 圓形 Icon

如方形 icon，設計提供 5 張大小分別為 192px x 192px、144px x 144px、96px x 96px、72px x 72px、48px x 48px 的圓形圖（圓角用透明處理）：

讓工程將每張圖放入對應的資料夾中：

192px x 192px > res/mipmap-xxxhdpi/ic_launcher_round.png

144px x 144px > res/mipmap-xxhdpi/ic_launcher_round.png

96px x 96px > res/mipmap-xhdpi/ic_launcher_round.png

72px x 72px > res/mipmap-xhdpi/ic_launcher_round.png

48px x 48px > res/mipmap-xhdpi/ic_launcher_round.png

工程部署

工程需在 App 的 AndroidManifest.xml 中添加：

1
2
3
4
5
<application
  ...
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  ...>

------------- 本文结束 不太為人所知的 Adaptive Icon -------------