Google Play Store にこんなページが登場しています.
Google MaterialDesign チームのおすすめアプリといったところでしょうか.
だいたい, いいたいことは分かったが, 実装方法がなんかなあ.
Best-In-Class Android Design - Google Play の Android アプリ
Announcing the Material Design Showcase and Awards | Android Developers Blog
Material Design のパレット色を決めるときの簡単な方針づけ
これ便利ですね.
Material Design Color Palette Generator - Material Palette
触っていると大体こんな感じ.
1. 最初のクリックは, Primary color.
2. Primary color から Dark/Light を作成.
3. 2つめのクリックは, Accent color.
4. Textの Primary/Secondary は固定.
分かりやすく書くと
DARK PRIMARY
↑
PRIMARY *1
↓
LIGHT PRIMARYACCENT *3
PRIMARY TEXT #212121
SECONDARY TEXT #727272
DIVIDER COLOR #B6B6B6
ベースとなる19色はそれぞれ濃淡があり
HEXな記号は, Google のサイトにまとまっている.
Color - Style - Google design guidelines
ここを見ると, 濃淡に関してこんな例が上がっているのでそのまま鵜呑み.
- PRIMARY は 500.
- それから派生する DARK は 700.
- 同じく LIGHT は 100.
- ACCENT(SECONDARY) は A200.
- その DARK/LIGHT はそれぞれ A400/A100
こうなる.
DARK PRIMARY(700)
↑
PRIMARY(500) *
↓
LIGHT PRIMARY(100)DARK SECONDARY(A400)
↑
SECONDARY(ACCENT)(A200) *
↓
LIGHT SECONDARY(A100)PRIMARY TEXT #212121
SECONDARY TEXT #727272
DIVIDER COLOR #B6B6B6
PRIMARY と SECONDARY(ACCENT) の2色を決めると, 画面を構成する9色が決まる.
500 とか A200 とかをHEX記号にするには, 上記Googleのリファレンスをみたり,
または, こんなサイトもある.
Material UI | Material Design | Material UI Colors
これ, もう全部 color.xml に登録しておいたら, どうなのか.
AndroidStudioなら実際の色もGUI上で確認できるし.
こんなアプリがあって, コードもGitHub上で公開していますので color.xml いただいてます.
Material Design Color Palettes - Android Apps on Google Play
Android Material Design Colours
MaterialTheme のカラーname に合わせるとこんなかんじになるのかな.
(おしまい)
API-19 と 20+ 間を Material Design でどう跨いでいけばいいのか
とりあえず公式をみてみる.
* テーマの設定
1. Holoのようなこれまでのテーマを継承して定義する
res/values/style.xml2. 同じ名前でテーマをMaterialテーマを継承して定義する.
res/values-v21/style.xml3. これらのテーマを AndroidManifest.xmlでアプリに設定する.
* レイアウトの設定
21+向けのディレクトリをそれぞれ準備する
res/layout-v21/
res/values-v21/
API-21+ に対しては, 各リソースファイルを「*-v21」として新規に作成するという考え方.
これまでのUIデザインを変化させずに, 新しく OS 5.0+ の端末に対してのみマテリアルなデザインを表示させる.
その後にこう書いてる.
* サポートライブラリをセット
Theme.AppCompat を使えば いくつかのウィジェットは MaterialDesign のものを使える.
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}EditText
Spinner
CheckBox
RadioButton
SwitchCompat
CheckedTextView
RecyclerView
CardView
Palette
完全ではないもののいくつかのウィジェットは appcompat-v7 で対応できる.
Lollipopを載せた端末の拡散具合や人気を考えると, OS4.x系端末でのマテリアルデザイン表示をしないと「マテリアルデザインに対応します(しました)」とうたいづらい.
よほどUIが凝ったアプリで無い限り, この appcompat-v7 ウィジェットを使って, これまで(API-19まで)のテーマに適用する, まずは.
/res/values/styles.xml
... <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ...
とこれまでのテーマの親にもつ.
このあと, 微調整を行い, API-19までのUIをマテリアルなかんじに仕上げていき, そのあと *-v21 のリソースを触りながら, 気にせず Lollipop端末に向けてのマテリアル化を進めていく.
と, そんな順序が王道ではないかな...