Androidはワンツーパンチ 三歩進んで二歩下がる

Android卵プログラマーの記録ブログ

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


自分のアプリでは使っていないのですがいいな~って思っているのが

qiita.com

github.com

github.com


こんなのも今発見github.com




フォントなのですが
Typography - Style - Google design guidelines

Notoフォントを使おうとしましたが、結局こちらのサイト様を参考にさせていただき源真ゴシックを使わせてもらっています。

qiita.com





そんなこんなでアプリ変更前と変更後はこんな感じです。

変更前

変更後



変更前

変更後