超簡単!Androidアプリのマテリアルデザイン実装に持って来いな方法を徹底解説!

f:id:mataro1:20151211222445j:plain

今回はAndroidアプリ開発におけるマテリアルデザインの実装方法を紹介します。
私は最近Androidアプリ開発をしていて、その一環で学んだことをまとめる&紹介したいと思います。
しかし、Androidアプリ開発初心者であるため、間違えたことを紹介するかもしれないのでご了承ください。
また、間違いに気づいた方は教えて頂けるとありがたいです!!

私は作成しているアプリのminSDK?をAPI15くらいにしていて、Android OS4.~.~系をターゲットにしています。
そのため、Android5系から採用されているマテリアルデザインを使用することができませんでした。

そこで、gitで公開されているマテリアルデザインのコンポーネント(ButtonやEditText)を使用することでマテリアルデザインの導入ができました。
gitでは数多くのコンポーネントなどのライブラリが紹介されています。
そのため、ButtonやListViewなどのデザインやタップ時のアクションのプログラミングをできない人でも簡単にマテリアルデザインを使うことができます!

それでは、Androidアプリにマテリアルデザイン(Material Design)を適応させる方法を紹介していきます。

※この記事は2015年12月11日に執筆しました。

gitをインストール

今までgit使った事なかったんですけど、超便利です!!!!
Android Studioを使って、Androidアプリ開発をしていて、gitを使用していない方は今すぐインストールを!!!

Androidアプリ作っていく中で、ライブラリをアプリに組み込む機会が出て来ますが役立ちます。
そもそも今回gitが必要になります(笑)

以下のサイトを参考にgitを導入するといいかもしれません。
私はインストールのとき、Use git from the Windows Command Promptを選びました。まあ基本的にどれでもいいのではないでしょうか。
インストールが完了したら、Android Studioで
git init
を入力したほうがいいかもしれません。Android Studioで作成中のプロジェクトでgitコマンドを使えなかったためです。

www.granfairs.com

Material Design Library navasmdc

それではマテリアルデザインを導入する方法を紹介しましょう!!

まずはマテリアルデザインを導入しようと思ったらまずこれがおすすめ!

多くの方がマテリアルデザインのためにMaterial Design Android Library navasmdcを使用しているみたいで、私も使っているのでご紹介。

このライブラリはマテリアルデザインの

  1. Button
  2. Switch
  3. Dialog
  4. ProgressBar

などなど他にも色々あるので、まずはお試しでこれを使って欲しいです!

本家サイトは英語での説明しかないですが、説明はさほど難しくないです。
また、実装時の写真もあって、どのようなデザインかも確認できます。
さらに、このライブラリ作者がMaterial Design Libraryを使用した「Material Design Library Demo」をPlayストアで公開していて、動作を確認することが出来ます。

日本語での説明

一応Androidアプリ開発初心者や英語が苦手な方向きに日本語で説明してくださっているかたのリンクも載せておきます!
しかしながら、これからもAndroidアプリ開発をするなら英語のサイトを基本的に読むことをオススメします・・・・
日本語のサイトは情報が古いことが多いです・・・・・

ただ、今回は以下のサイトどおりに動くことを確認しています!(2015年12月11日現在)

[AndroidStudio]Androidエンジニア必須のマテリアルデザインを簡単に実装できるMaterialDesignLibraryの導入 | Coffee Breakにプログラミング備忘録

Android StudioでMaterialDesignLibraryを使ってみた。

検索エンジンの上位に表示されたため、以下の記事を参考にしましたが、上手く動作しませんでした。

そもそも、作者のサイトに書いてあるやるべきことが書いていなかったため、正しく動かなかったと思われます。
まあ以下の記事は情報が古いということでしょうか。
やはり英語の本家サイトの説明を基本的に見るべきだと言うこと学びました・・・・

qiita.com

Googleサポートライブラリ

皆大好きGoogleさんがサポートしてくれている最高のライブラリです。

API Level:7以上をサポートしてくれているため、基本的にどんなアプリでもマテリアルデザインを実装できるのではないでしょうか??
以下のコードをbuild.gradleに記述すれば、マテリアルデザインを使えます!
ちなみに23.1.0となっている部分はご利用のAndroid Studioに入れているバージョンによって変わるのでご注意を!

|java| dependencies { compile 'com.android.support:design:23.1.0' } ||<

Google Suport Libraryの基本

下記のサイトより例が少なめですが、説明がしっかりしています。そのため、読みやすいです
また、説明が分かりやすいのでこちらは絶対にチェックしてマテリアルデザインへの理解を深めましょう。

moneyforward.com

基本的な実装の紹介

以下の2つのサイトは実際に動いている画面とソースコードが載っていて、とても分かりやすく参考になります!

http://eure.jp/blog/design-support-library/eure.jp

Android Design Support Libraryを使う – PSYENCE:MEDIA

まとめ

今回は2つのライブラリを紹介しました。
まずはこの2つを試してみてマテリアルデザインを確認してみましょう。

また、別記事で

  • Calenderview
  • icon
  • Datepicker
  • FloatingActionButton
  • etc....

などなど多くのライブラリをまとめた記事を紹介する予定です!
この記事がいいなと思ったらシェアお願いします!

オススメ記事

www.mataro1.com

www.mataro1.com

www.mataro1.com