マテリアルデザインとテーマファイル
参考: Introduction
マテリアルデザインとは、Googleが発表したUI設計に関するガイドラインであり、以下の3原則を遵守する。
- 物質とは象徴である
画面は
2次元であるが、UI部品を物質として扱うことで3次元的に配置する。
- 大胆で、生動的で、計画的である
印刷デザイン手法に基づき、タイポグラフィや配置、色を工夫することで、ユーザに没入体験を持たせる。
- 動きには意図がある
UI部品の役割に応じた動きをつけることで、ユーザに継続的に集中させる。
Android OSもGoogleが開発したOSであるため、標準でマテリアルデザインに基づいて設計されている。
文字スタイルや配色を定義するテーマファイル(=themes.xml)においても、
マテリアルデザインに準拠したものになるよう、注意する必要がある。
マテリアルテーマ
マテリアルデザインを採用するテーマ。
Android SDKのマテリアルテーマ
テーマファイルでテーマを定義する場合、<style>タグを用いて記述する。
また、アプリケーションの全般的テーマをparent属性で定義する。
parent属性 |
内容 |
|---|---|
Theme.MaterialComponents |
暗い色 |
Theme.MaterialComponents.Light |
明るい色 |
Theme.MaterialComponents.DayNight |
OSのテーマに依存 |
Android SDKの代替テーマ
上記の全般的テーマにはそれぞれ、アクションバーの配色を同時に定義する代替テーマが存在する。
| テーマ | 内容 | アクションバー | 暗い色に最適なアクションバー |
|---|---|---|---|
Theme.MaterialComponents |
暗い色 | o | x |
.NoActionBar |
暗い色 | x | - |
Theme.MaterialComponents.Light |
明るい色 | o | x |
.NoActionBar |
明るい色 | x | - |
.DarkActionBar |
明るい色 | o | o |
Theme.MaterialComponents.DayNight |
OSのテーマに依存 |
o | x |
.NoActionBar |
OSのテーマに依存 |
x | - |
.DarkActionBar(既定) |
OSのテーマに依存 |
o | o |
マテリアルデザインの配色
マテリアルデザインの配色は、テーマファイルの<item>タグで定義する。
なお、配色には4種類あり、name属性でそれぞれ指定する。
配色名(=name属性値) |
内容 | 用途 |
|---|---|---|
colorPrimary |
メイン色 | UI部品 |
colorSecondary |
アクセントカラー = colorPrimaryに対して目立つ色 |
UI部品の領域枠 |
android:colorBackground |
背景色 | 画面の背景 |
colorError |
エラー色 | エラー内容を表示するUI部品
|