AndroidのFloatingActionButtonを実装する

投稿日：2015年8月8日更新日：2020年1月22日

今回のエンジニアブログ担当の佐藤です

今回もMaterialDesignネタでFloatingActionButtonの実装をしてみようと思います！

FloatingActionButton(FAB)とはこれのことです。↓

FABはAndroid Support Library v22.2.0から使えるようになったDesign Libraryに含まれています。
まず、build.gradleのdependenciesに追記をしました。

    compile 'com.android.support:design:22.2.0'

FABの実装です。
xmlからだと簡単にレイアウト指定ができます。

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:paddingLeft="@dimen/activity_horizontal_margin"  
    android:paddingRight="@dimen/activity_horizontal_margin"  
    android:paddingTop="@dimen/activity_vertical_margin"  
    android:paddingBottom="@dimen/activity_vertical_margin">

    <android.support.design.widget.FloatingActionButton  
        android:id="@+id/fab"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_marginBottom="16dp"  
        android:layout_marginRight="16dp"  
        android:layout_alignParentRight="true"  
        android:layout_alignParentBottom="true"  
        android:src="@drawable/ic_menu_star"  
        app:backgroundTint="@color/white"/>
</RelativeLayout>

FABの背景色はbackgroundTintから指定することができます。

    app:backgroundTint="@color/white"

また、FABには"mini"と"normal"の2種類のサイズが用意されています。
miniなら

    app:fabSize="mini"

normalなら

    app:fabSize="normal"

と指定します。

FABはViewなのでsetOnClickListener()でイベントを設定すれば押された時の処理も実装できます。
MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                Toast.makeText(v.getContext(),"FABが押されました",Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Support LibraryのFABではボタンとしての機能のみしかありませんので、Speed dialで子メニュー的なものを出したい時等は自力で実装するかライブラリを使用する必要があるようです。
Design Libraryを使うとMaterialDesignの実装がしやすいような機能が沢山含まれているのでいろいろ試してみたいですね！

AndroidのFloatingActionButtonを実装する

採用情報