Tweet

Pocket

Android 5.0 Lollipopからマテリアルデザインが採用されました。

マテリアルデザインについてはhttp://www.google.com/design/spec/material-design/introduction.htmlが分かり易いです。

Google謹製のアプリは既にマテリアルデザインに変更になっていますが、サードパーティ製アプリもマテリアルデザインを採用したものに変わってきているように思えます。

ということで、今までリリースしたアプリも順次マテリアルデザインを取り入れてみようと思い、いろいろ勉強中。

まずは、Floating Action Buttonを作ってみようかと思い試してみました。

やってみたこと

・xmlでそれっぽいデザインを作ってみる
・公開されてるライブラリを使ってみる

Android2.3.3でも使えることを考慮。

その１：xmlでそれっぽいデザインを作ってみる

・fab_normal.xml（押されてない時）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <solid android:color="#55a0a0a0"/>
        </shape>
    </item>
    <item android:bottom="3dp" android:left="1dp" android:right="1dp">
        <shape android:shape="oval">
            <solid android:color="#0099cc" />
        </shape>
    </item>
</layer-list>

・fab_pushed.xml（押された時）

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <solid android:color="#55a0a0a0"/>
        </shape>
    </item>
    <item android:bottom="3dp" android:left="1dp" android:right="1dp">
        <shape android:shape="oval">
            <solid android:color="#33b5e5" />
        </shape>
    </item>
</layer-list>

・fab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true"
          android:drawable="@drawable/fab_pressed" />
    <item android:state_pressed="false"
          android:drawable="@drawable/fab_normal" />
</selector>

あとはレイアウトファイルでImageButtonのバックグラウンドに指定するとこんな感じになる。

影の部分がなんかこれじゃない感を醸しだしていますが・・・
グラデーションとか使えばもうちょっとましになるかも。

その２：公開ライブラリを使ってみる

探してみたらこんなのがありました。

https://github.com/futuresimple/android-floating-action-button

https://github.com/FaizMalkani/FloatingActionButton

https://github.com/makovkastar/FloatingActionButton

 
futuresimple/android-floating-action-buttonを試してみたらこんな感じでした。

影部分がちょっとリッチですね。ただAndroid4.0以降じゃないと使えないぽいです。

追記：2015/6/1

Googleから、マテリアルデザインのためのライブラリが公開されました。
今後はマテリアルデザイン対応にはAndroid Design Support Libraryの使用が推奨されています。
http://android-developers.blogspot.jp/2015/05/android-design-support-library.html

あとがき

デザインってめちゃめちゃ苦手です。
センスがあるとかないとか以前に、さっぱりわからない。
良いと言われているデザインがなぜ良いのか、いろいろ説明してもらっても、さっぱり理解できないのです。
良いデザインってなんだ？デザインの勉強ってどうやるんだ？状態です。

どうしたものか・・・(´・ω・｀)