Material Designを実装するのに役に立ったリンクを紹介します
インコ発信確認をアップデートしました。
インコ発信確認 - Google Play の Android アプリ
リリースしてから放置してしまっていたのですが、ユーザー様からLolipopスタイルにしてほしいとご意見をいただき💖マテリアルデザイン風にしてみました。
作成にあたって参考にしたサイトをご紹介します。
まずは公式サイト
Introduction - Material design - Google design guidelines
サイトの左上のメニューボタンを押すと色々出てきます。アニメーションなんかは実例の動画が掲載されているのでどのようなものかわかりやすいです。
かなりの分量なので全部読んではいないです。
一番よく見ていたのはここのページです。マージンサイズやリストの高さなどが書いてあります。
Metrics & keylines - Layout - Google design guidelines
こっちはAndroid Developers blogでコンパクトにまとまった記事です。
Implementing Material Design in Your Android app | Android Developers Blog
マテリアルデザインがたくさん載っているサイトも参考にしてみました。www.materialup.com
毎日色々なマテリアルデザインが投稿されています。見ていて楽しいので公式サイトよりよく見てました。
サインインすると気に入ったデザインに投票できて後で一覧で見られます。
マテリアルデザインというテーマのサイトではないけどアプリデザインがたくさん投稿されてて楽しいのでこのサイトも見てました。
Dribbble - Show and tell for designers
テーマカラーの選択はこんなサイトで行いました。www.materialpalette.com
2色選ぶとカラーパレットを作成してくれます。選択できるカラーは限られていますがデザイン力のない人には有難いサイトでした。
カラーはファイルでダウンロード出来ますが、xmlを選択すると次のようにAndroidのリソース定義の形式になっていたりして嬉しいです。
<!-- Palette generated by Material Palette - materialpalette.com/cyan/pink --> <?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary">#00BCD4</color> <color name="primary_dark">#0097A7</color> <color name="primary_light">#B2EBF2</color> <color name="accent">#FF4081</color> <color name="primary_text">#212121</color> <color name="secondary_text">#727272</color> <color name="icons">#FFFFFF</color> <color name="divider">#B6B6B6</color> </resources>
実装面ではAndroidバージョンがLolipop以上ですと、マテリアルデザインサポートされています。
Material Design for Developers | Android Developers
5.0以下の端末でもマテリアルデザインを使いたい場合はサポートライブラリを使います。
AppCompat v21 — Material Design for Pre-Lollipop Devices! | Android Developers Blog
appcompat
http://developer.android.com/intl/zh-CN/tools/support-library/features.html#v7-appcompat
CardView
http://developer.android.com/intl/zh-CN/tools/support-library/features.html#v7-cardview
Design Support Library
Android Design Support Library | Android Developers Blog
Design Support Libraryがレビューされていますqiita.com
オープンソースのライブラリも色々あって、こちらを利用させてもらっています。github.com
自分のアプリでは使っていないのですがいいな～って思っているのが
こんなのも今発見github.com
フォントなのですが
Typography - Style - Google design guidelines
Notoフォントを使おうとしましたが、結局こちらのサイト様を参考にさせていただき源真ゴシックを使わせてもらっています。
そんなこんなでアプリ変更前と変更後はこんな感じです。
変更前
変更後
変更前
変更後
