読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

AndroidのFloatingActionButtonを実装する

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

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

FloatingActionButton(FAB)とはこれのことです。↓
device-2015-08-06-184001

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の実装がしやすいような機能が沢山含まれているのでいろいろ試してみたいですね!