はじめに
Android 開発エンジニアを担当している岡田です。
弊社のサービスであるヘルシカにて、Material You Design のアイコンを実装しました。
今回は Material You Design とアイコンの実装についてご紹介したいと思います。
Material You Design
Android 12 から導入された Material You Design は、Android 端末の画面を自分好みの色合いやデザインに変える機能です。
2014 年に発表した Material Design をさらにアップデートし、機能性だけでなく、ユーザーがスマホをより自分らしくカスタマイズできるようになりました。
壁紙の色を基調としたカラーパレットが自動的に生成され、その中から配色を選ぶことで、手軽に自分好みのカスタマイズが可能です。
ウィジェットやアイコン、クイック設定など OS 側のアイテムはもちろん、アプリ内でも自分で選択した色を取得して使用することができます。
Material You Design の 3 つのテーマ
Material You Design には 3 つのテーマがあります。
Personal for every style
（あらゆるスタイルに対応するパーソナルなデザイン）
ユーザーが壁紙やテーマカラーを選択すると、それに基づいてアプリのUI全体が動的に変化し、ユーザーは自分だけのオリジナルなデザイン体験を楽しむことができます。Alive & Adaptive for every screen
（あらゆる画面に対応し、あらゆるデバイスにフィットするデザイン）
レスポンシブデザインをさらに進化させ、様々な画面サイズやデバイスに最適なレイアウトを自動的に生成します。
ユーザーはどのデバイスを使っても、快適な操作性を体験できます。Accessible for every need
（あらゆるニーズに対応するアクセシブルなデザイン）
ユーザーの視覚、聴覚、運動能力など、様々なニーズに対応したアクセシビリティ機能を提供します。
より多くの人がデジタルの世界に参加し、情報やサービスを利用できるようにします。
つまり、Material You Design は多様性を担保した新しいデザインスタイルです。
Material You Design の活用例
Google アプリ
Google の多くのアプリが、Material You Design を採用することで、より洗練されたユーザーインターフェースを実現しています。
Material You Design は、単なるデザインシステムにとどまらず、ユーザーとデバイスの関係性を再定義する新しいパラダイムと言えるでしょう。
以下は Google 公式がリリースしている電卓アプリのスクリーンショットです。
引用元：Material You とは？ スマホのホーム画面などを自分好みにカスタマイズしよう
著作権者：Google LLC
Google Pixel スマートフォン
Material You Designは、Google Pixel スマートフォンで最も顕著に見ることができます。
壁紙の色調がシステム全体の色調に反映されるなど、パーソナライゼーションが特徴です。
自身の端末 (端末:Pixel6a / OS:Android14) で試した見たところ、[設定 > 壁紙とスタイル] から簡単に設定できました。
ウィジェットや対応済みのアプリアイコン、電卓アプリでのテーマの変化を確認できます。
| 設定 > 壁紙とスタイル | Home画面 | 電卓アプリ |
|---|---|---|
 |
 |
 |
対応していないアプリアイコンは Home 画面で浮いてしまう可能性
Material You Design でアイコンの色を変える「テーマアイコン」に対応していないアプリは、Home 画面で浮いてしまう可能性があります。
現時点でこの機能を仕様しているユーザーに、Home にアイコンを置くことを避けられる可能性があるということです。
例えば上記の Home 画面の画像は、意図的に Material You Design 対応を外したヘルシカのアイコンが写っています。ヘルシカのみ真っ白のアイコンなため、画面内で浮いていることがわかると思います。
アプリの Style までとはいかずとも、アプリアイコンのみでも Material You Design に対応しておきたいです。
では Material You Design にアイコンを対応させるには、どのような実装をすれば良いのでしょうか。
Material You Design のアイコン対応
ic_launcher.xml に、monochrome を追加します。
<?xml version="1.0" encoding="utf-8"?> <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_app_background_icon" /> <foreground android:drawable="@drawable/ic_app_foreground_icon" /> <monochrome android:drawable="@drawable/ic_app_monochrome_icon" /> </adaptive-icon>
アダプティブアイコンに対応していない場合は、先に対応する必要があるのでそこに注意です。
ヘルシカは Material You Design のアイコンに対応しました。
とても簡単に実装できるので、まだ対応していない場合は是非対応してみてください。
