LTで話した内容です。

1. Android2でも動く
Materialデザイン実装
2015/01/14（水）Yusuke Konishi

2. 今日話すこと
1. とにかく色々試してみたので紹介
2. そもそも下位OSで対応すべきなのか所感
3. まとめ

3. 色々試してみた

4. キャッチアップの手順
1. まずGoogle純正のアプリ、Materialデザイン対応した
アプリ（Airbnb、Twitter、Path）をよく見る
2. Materialデザインガイドラインと照らし合わせて作る

5. 今回試してみたところ
1. 色
2. 画面遷移アニメーション
3. スクロールアニメーション
4. Rippleエフェクト
5. ToolBar
6. タブ
7. フォント

6. 1. 色

7. 1. 色
デザインガイドラインで推奨カラーが定められている。こ
の色を使うと、Materialデザインに対応した時に違和感な
いよ、という指針。

8. 他のアプリでは？
Google純正のアプリは当然この色に沿ってテーマカラー
を設定してる。

9. 実装するには
難易度 ★☆☆☆☆
appcompat v21使ってテーマの色を変えるだけ。
日本語訳はこちら。
どこの色の設定がどこのパーツに影響するかは、Android
5.0 でのカラーカスタマイズと属性名の関係にまとめられ
てる。

10. 2. 画面遷移アニメーション

11. 2. 画面遷移アニメーション
デザインガイドラインのアニメーションの項目。
ActivityTransition、Shared Elementsと呼ばれるもの。
ふわっと浮き上がるような画面遷移や、前の画面の一部が
拡大して次の画面の一部になるようなアニメーションで、
操作している時に前後関係が把握しやすい。あと触ってて
気持ちいい。

12. 他のアプリでは？
Google純正のアプリは、無理せずある程度やってる。
Airbnbのアニメーションはいい感じ。

13. 実装するには
難易度 ★★☆☆☆
ActivityOptionsCompatを使ったり、アニメーションを自作
すれば対応可能。
[参考]
・YouTubeのAndroidアプリと同じ検索ビューを作ってみる
・v21未満の端末で、AirbnbアプリのようなShared
Elementっぽい動きを実装する
ただ、同じような見た目なのにアニメーションついたりつい
てなかったりすると強烈な違和感を感じるので、やるなら統
一して対応する必要あり。

14. 3. スクロールアニメーション

15. 3. スクロールアニメーション
デザインガイドラインのスクロールテクニックの項目。
スクロールすると上部がパララックスっぽく動いたり、
Toolbarが隠れたり、透明度が変わったりするやつ。

16. 他のアプリでは？
GooglePlayStoreの詳細画面や、Airbnbの詳細画面はさ
りげなくていい感じ。Pathはめっちゃやってる。

17. 実装するには
難易度 ★★★☆☆
単純なパララックス効果だけなら簡単。5.0くらい気持ちのよい
アニメーションにするのは大変。NotBoringActionBarのコード
が参考にしやすいかも。

18. 4. Rippleエフェクト

19. 4. Rippleエフェクト
Materialデザインの動画でも紹介されてる、水の波紋のよ
うなエフェクト。

20. 他のアプリでは？
Google純正のアプリや他の有名なアプリはAndroid5.0以
上で対応。5.0未満は諦めてる。たぶんあえてやってな
い。
Materialデザインガイドラインの本質は、画面を似せるこ
とではなく、同じ基準で作ることによってユーザーが操作
する時に頭を使わないですむようにすることだと思うので、
Android5.0未満のRippleエフェクトが標準でない端末の
場合は逆に従来のタップフィードバックの方がいいよねと
いう判断？

21. 実装するには
難易度 ★★☆☆☆
material-rippleを使うと導入は比較的簡単。
参考 : [Materialデザイン] Android5.0未満でRipple
effectを実装する
ただ、既存アプリを対応させる場合は全てのタップフィー
ドバックで対応する必要があるのでかなり面倒。

22. 5. ToolBar

23. 5. ToolBar
上部のバー。旧ActionBar。
以前の48dpから56dpになってる。NavigationDrawerの
アイコンや表示の仕方も変わってる。

24. 他のアプリでは？
Google純正のアプリはほとんど対応。Airbnbは対応して
るけどDrawerの表示がちょっと古い。

25. 実装するには
難易度 ★★☆☆☆
普通のActionBarの場合は割と簡単に移行可能。Drawer
もそんなに難しくない。AndroidのToolBar（新しい
ActionBar）メモを見れば大体問題ない。
ToolBarはただのViewなので、スクロールしたら隠すみた
いな動きもわりと簡単。

26. 6. 上部タブ

27. 6. 上部タブ
YouTubeやGooglePlayにあるやつ。Materialデザインだ
と、ここはテーマカラーにそろえるよう推奨されている。

28. 他のアプリでは？
Google純正のアプリは完全対応。他のアプリは、なんか
納得できていないのか色を変えてる場合もある。

29. 実装するには
難易度 ★☆☆☆☆
PagerSlidingTabStripを使うと簡単。attrを調整すればマ
テリアルデザインっぽくなる。

30. 7. フォント

31. 7. フォント
ガイドラインのTypographyの項目。アルファベット＆数
字はRoboto、それ以外はNotoフォントを使うことが推奨
されている。デフォルトと違って、太さを細かく指定でき
る。

32. 他のアプリでは？
Google純正アプリは、5.0未満は非対応。Airbnbは違う
フォントに変えているが、日本語のフォントは標準のまま。

33. 実装するには
難易度 ★★★★☆
Calligraphyというライブラリを使うと全体に反映できるが、フォ
ントファイルのサイズが大きいのと、Google公式のNotoフォント
otfファイルを使うと変な余白が出るので微妙な感じになる。

34. そもそも下位OSで
対応すべきなのか

35. Materialデザインの本質
• Material Designのガイドラインは、「見た目を えよ
う！」というものではない。
• 「共通の動作や見た目はできるだけ統一してユーザーが
アプリごとに混乱しないですむようにしよう」っていう
思想だと思う。

36. Materialデザインに従うかどうか
• 「ユーザーがアプリごとに混乱しないですむようにしよ
う」っていう思想だとすると、あえてガイドラインに従
わないのもあり。
• 例えばフォントやRippleエフェクトは、5.0以前のユー
ザーには違和感でしかないかも。

37. 個人的ジャッジメント
1. ⃝ 色
2. △ 画面遷移アニメーション
3. △ スクロールアニメーション
4. Rippleエフェクト
5. ⃝ ToolBar
6. ⃝ 上部タブ
7. フォント

38. まとめ

39. まとめ
• Android2でもMaterial Designの適用は大体可能。
• 見た目だけの問題ではないので、デザインの適用可否を
判断する必要あり。
• 対応するって決めた時のために準備しておくのが大事。

40. おわり