ダメ男のブログ: Android開発 Floating action buttonを使ってみた

2015年10月16日金曜日

Android開発 Floating action buttonを使ってみた

公開日：2015年10月16日

記事概要

androidの開発でFloating action buttonを実装しました。
この記事では、Floating action buttonの実装方法と使い方を記載しています。

環境

OS X Yosemite
Android Studio 1.4.0
android sdk 23(Android 6.0 Marshmallow(マシュマロ))

Floating action buttonとは

Material desginで取り入れられたボタンです。
画面の端に表示して、よく使うアクションの操作に使用されます。

他のアプリの参考になるFloating action buttonの使い方

色々なアプリを確認してみましたが、google mapの利用方法が一番良いと思いました。

実装

gradle

com.android.support:designライブラリを利用できるように設定します。


dependencies {
    compile 'com.android.support:design:23.0.0'
}

layout.xml

画面のlayoutを記載します


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email" />

dimen.xml

マージンのサイズを指定します。直接layoutのxmlに書かないでdimen.xmlを使いましょう。


<resources>
    <dimen name="fab_margin">16dp</dimen>
</resources>

javaの実装

通常のボタンと同じ実装方法です。


    private FloatingActionButton mFab;

    mFab = (FloatingActionButton) findViewById(R.id.fab);
    this.mFab.setOnClickListener(this);

    @Override
    public void onClick(View v) {
        // something
    }

ビルドして画面を確認します。

表示されました。

まとめ

FloatingActionButtonは見栄えも使い勝手も良いボタンです。
しかし、使いどころに悩むボタンでもあります。
Google純正のアプリだと、FloatingActionButtonがうまく使われているので参考になると思います。

以上

Androidアプリ開発にオススメの本

Effective Android

posted with ヨメレバ

TechBooster,小太刀御禄,出村成和,重田大助,西岡靖代,宮川大輔,柏本和俊,あんざいゆき,八木俊広,木村尭海,小林慎治,有山圭二,中西良明,わかめまさひろ,新井祐一,桝井草介,久郷達也,寺園聖文,shige0501,山下智樹,前田章博,秋葉ちひろ,末広尚義,中澤慧,日高正博,塚田翔也,井形圭介,中川幸哉,山崎誠,山下武志,なまそで,橋爪香織,さとうかずのり,l_b__ インプレスジャパン 2014-01-17

Amazon

Kindle