FABっぽいボタンを作ってみる


Pocket

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

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

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

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

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

Floating_action_button

やってみたこと

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

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

 

その1: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のバックグラウンドに指定するとこんな感じになる。
FAB XML

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

 

その2:公開ライブラリを使ってみる

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

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

https://github.com/FaizMalkani/FloatingActionButton

https://github.com/makovkastar/FloatingActionButton

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

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

追記:2015/6/1

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

 

あとがき

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

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

 
 

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>