Material Design対応ライブラリーを使ってみた

久しぶりの投稿になります。

まずMaterial Designとはなにかについて説明したいと思います。

マテリアルデザインとはユーザーと端末の対話についてまとめたデザインマニフェストのこと。スマホやタブレット、アプリなどのIT機器だけでなく、メガネや丸い腕時計、家やテレビなど幅広いデザインで使用される概念となっています。
グーグルがマテリアルデザインを採用したのは、今回が初の試みです。アプリの外観部分は簡素化され、従来よりも広いスペースで操作できるシンプルなフラットデザインを採用したことで操作しやすくなりました。また、デザインは三次元性になり、各要素に影や奥行きを持たせて立体的に表現されています。

リップル効果

f:id:tsurutan:20150327222958g:plain

Interpolator

f:id:tsurutan:20150327223150g:plain

Toolbar

f:id:tsurutan:20150327223300p:plain

マテリアルデザインについてのまとめ

つまり、マテリアルデザインとはgoogleが採用したお気に入りのデザイン。このデザインをアプリに取り入れてgoogleに~~媚を売りたい~~気に入られたいと思った私は早速google先生にマテリアルデザインをアプリに実装する方法について聞いてみました。すると、このようなサイトを教えてくれました。

Material Design？言いたい事はわかった。だがどうやって実装しろと？そんなあなたに贈るMaterial Design対応ライブラリ集

すでに有志たちがマテリアルデザインに対応したライブラリーを作っていてくれたのです。これを使わないわけにはいかない。私はこのサイトに載っているほとんどのライブラリーをアプリに実装してみました。これらのライブラリーの実装方法を順を追って説明していきたいと思います。

MaterialDesignLibrary

<a href="https://github.com/navasmdc/MaterialDesignLibrary">navasmdc/MaterialDesignLibrary</a>github.com

このライブラリーだけで大体のマテリアルデザインが実装できます。こちらで実装できるViewは以下のようになっております。

Flat Button

f:id:tsurutan:20150327214453p:plain

Rectangle Button

f:id:tsurutan:20150327213820p:plain

Float Button

f:id:tsurutan:20150327214533p:plain

Float small button

f:id:tsurutan:20150327214606p:plain

CheckBox

f:id:tsurutan:20150327215004p:plain

Switch

f:id:tsurutan:20150327215159p:plain

Progress bar circular indeterminate

f:id:tsurutan:20150327215219p:plain

Progress bar indeterminate determinate

f:id:tsurutan:20150327215227p:plain

Progress bar indeterminate

f:id:tsurutan:20150327215234p:plain

Slider

f:id:tsurutan:20150327215244p:plain

Slider with number indicator

f:id:tsurutan:20150327215255p:plain

SnackBar

f:id:tsurutan:20150327215302p:plain

Dialog

f:id:tsurutan:20150327215309p:plain

Color selector

f:id:tsurutan:20150327215317p:plain

全てのviewについて説明すると骨が折れるので、人気の高いRectangle ButtonとDialogの実装方法について説明したいと思います。(エディターはAndroid Studioを前提としています。)

Rectangle Button

1. ライブラリーのインポート

まず初めにライブラリーのインポートを行います。プロジェクト内にあるbuild.gradle (Module: app)を開きます。中に dependencies というブロックがあるのでそこに compile 'com.github.navasmdc:MaterialDesign:1.+@aar'と記入します。全体的にはこのようになるはずです。

repositories {
    jcenter()
}

dependencies {
    compile 'com.github.navasmdc:MaterialDesign:1.+@aar'
}

2. xmlに記入

次にlayoutからRectangle Buttonを実装したいxmlファイルを開き以下のように記入します。

<com.gc.materialdesign.views.ButtonRectangle
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

なんとこれだけでマテリアルデザイン対応のボタンを実装することができます。

所感

このRectangle Buttonで注目してほしいところは実装が簡単なだけではなく、ボタンの色をbackgroundから指定してもリップル効果が消えないというところです。デフォルトのボタンでは直接Colorをbackgroundに指定してしまうとアニメーションが消えてしまい、味気ないものになってしまいます。また、私が以前使っていたAndroid-BootstrapでもbackgroundでColorを指定すると同様にアニメーションが消えてしまいました。(Statusを指定して色を変更すればアニメーションは消えませんが使える色が限られています。)

Dialog

1.ライブラリーのインポート

Rectangle Buttonと同じなので省略します。

2.classにコードを記入

ダイアログを表示したいclassに以下のように記入します。

Dialog dialog = new Dialog(Context context,String title, String message);
dialog.show();

また、ネガティブボタン、ポジティブボタンの処理は以下のように記入します。

// acceptボタンをクリックしたときの処理
dialog.setOnAcceptButtonClickListener(View.OnClickListener onAcceptButtonClickListener);
// cancelボタンをクリックしたときの処理
dialog.setOnCancelButtonClickListener(View.OnClickListener onCancelButtonClickListener);
// acceptボタンの取得
ButtonFlat acceptButton = dialog.getButtonAccept();
// cancelボタンの取得
ButtonFlat cancelButton = dialog.getButtonCancel();

以上です