[Coding Diary] Android - Adaptive Icons (自動調整圖示)
===
###### tags: `Coding Diary` `Android`

## Launcher Icon
Android 主畫面叫做 launcher，它本身也是一個 app，和其他的 app 一樣，使用者可以透過在 Google Play 下載其他的 launcher 來改變主畫面的樣式，譬如 app icon 的效果。

而 launcher icon 就是每個 app 在 launcher 裡所看到的圖示，點擊圖示即可開啟 app，而和 iOS 不同的是，Android 並沒有規定 launcher icon 的形狀如下圖


這可以讓使用者輕易的找到app，但同時也導致畫面過於混雜。

一些 Android 手機品牌為了解決這個問題，會在 app icon 加上圓形或圓角方形的背景，令原先不同形狀的 app icon 看上來都統一，但這使得 icon 圖案變得過小導致難以辨識。


## Adaptive Launcher Icon
在 Android 7.1（API 25）之前的版本，要設定 launcher icon 只要在 Manifest 裡標明 icon、roundIcon 分別為哪兩個大小為 48 x 48 dp的圖檔即可。

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round">
    ...
</application>

而 Android 8（API 26）所推出 adaptive launcher icon，可以說是解決各大廠商自行改變 launcher icon 形狀的終極方案，開發者可以透過定義前景跟背景兩個圖層，來自動調整 icon 的外觀。

要使用 adaptive launcher icon，須先照下列規範調整圖層：
* 兩個圖層大小必須為 108 x 108 dp
* 圖示中間的 72 x 72 dp 會顯示在套用遮罩後的檢視點中
* 系統會保留圖示 4 邊外側 18 dp 的部分，藉此產生有趣的視覺效果，例如視差或跳動（動畫效果依系統支援的效果）

## 如何使用 Adaptive Launcher Icon

在 **res** 點右鍵 select **New** > **Image Asset** 設定好前景跟背景圖，即設定完成。

<?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>

---

# 總結
所需要的圖片：
* 108x108 的 foreground icon 跟 background icon
* 48x48 的 ic_launcher icon (圓形、方形各一)
* 512x512 for Google 上架圖
* 24x24 notification icon （背景必須透明、只能使用「白色」、不可使用任何「漸層」或「Alpha」）

---

###### 附註一：Adaptive Icon Playground

這個 app 可以測試你的 launcher icon 在不同遮罩、不同視差所呈現的效果
github 下載連結：[AdaptiveIconPlayground](https://github.com/nickbutcher/AdaptiveIconPlayground/releases)

###### 附註二：Image Asset Studio
簡單地透過 Image Asset Studio 自製 icon
File -> New -> Image Asset

---
last updated 2020-06-17

**參考資料：**

Android App Icon 規格:
https://medium.com/ericlog/android-app-icon-specification-2e57c96b16b0

Designing Adaptive Icons:
https://medium.com/google-design/designing-adaptive-icons-515af294c783