FloatingActionButton也是Design Support 庫中的一個控制元件，來實現懸浮按鈕的效果。還可以給這個按鈕指定圖示，表示來做什麼。

使用FloatingActionButton

提前準備好一個ic_done.png【素材地址：點我】

修改activity_main.xml

• 在主螢幕中加入了一個FloatingActionButton
• 通過layout_gravity將FloatingActionButton位置設定在右下角（end的作用和start的作用相同，如果系統語言是從左往右的，那麼end表示在右邊，反之則在左邊）
• 通過src設定圖示
• 通過layout_margin設定邊距
• 通過app:elevation設定投影高度（預設即可，不用可以的來寫）（高度設定越高，則投影範圍越大，投影效果越淡；高度設定越低，投影範圍越小，投影效果越濃）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_margin="16dp"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>
    ...
</android.support.v4.widget.DrawerLayout>
 

修改MainActivity（新增處理點選事件）

只需要修改oncreat方法

FloatingActionButton和button類似，呼叫OnClickListener方法來實現點選效果

@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() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show();
        }
    });
}
 

效果如圖

使用SnackBar

Design Support 庫提供的更加先進的提示工具——Snackbar。

Toast作用是告訴使用者發生了什麼事情，但同時使用者只能被動接收這個事情，沒有辦法讓使用者原則。 
Snackbar提示加入一個可互動按鈕，當用戶點選可以執行一些額外的操作。

修改MainActivity中的程式碼如下：

• Snackbar.make()方法來建立一個Snackbar物件，
• 其中第一個引數是view，只要是當前介面佈局的任意一個view都可以，Snackbar會使用這個view來自動查詢最外層的佈局用於展示Snackbar
• 第二個引數就是Snackbar中顯示的內容
• 第三個引數是Snackbar顯示的時長（和Toast類似）
• 接著呼叫的setAction方法來設定一個動作，從而使Snackbar可以和使用者互動，這裡我們只彈出Toast
• 最後呼叫show方法讓Snackbar顯示出來

@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() {
        @Override
        public void onClick(View v) {
            Snackbar.make(v, "Data Deleted", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "", Toast.LENGTH_SHORT).show();
                }
            }).show();
        }
    });
}

效果如圖

然而Snakebar將我們的懸浮按鈕遮擋了。這是一個bug，影響使用者體驗。解決辦法藉助CoordinatorLaoyout輕鬆解決。

使用CoordinatorLaoyout

CoordinatorLaoyout是一個加強版的FrameLayout。它也是Design Support 庫提供的。它可以監聽所有子控制元件的各種事情，自動幫助我們做出合理的響應。（比如上邊的Snakebar講懸浮按鈕擋住了，使用CoordinatorLaoyout之後懸浮按鈕會自動的上偏移）

在這裡，只需要CoordinatorLaoyout來替換我們的FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_margin="16dp"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>
    </android.support.design.widget.CoordinatorLayout>
    ...
</android.support.v4.widget.DrawerLayout>

效果如圖