Floating Action Button — летающая кнопка из Material Design

Данная статья продолжает цикл статей о внедрении MaterialDesign в ваше приложение. На этот раз статья посвящена абсолютно новому элементу, которого не было не было ни в одной другой ОС — FloatingActionButton (FAB).

FAB — это круглая кнопка, плавающая над интерфейсом и отражающая главное действие в приложении. Google не добавила FAB в SupportLibrary, поэтому нам придется воспользоваться сторонними решениями. Существует достаточно большое количество библиотек, реализующих данный функционал, но многие из них работают криво. Я буду рассматривать вот эту библиотеку.

Кнопка добавляется на экран с помощью XML. Корневым для кнопки обязательно должен быть FrameLayout.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:headerDividersEnabled="false" />

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
	android:src="@drawable/ic_add_white_24dp"
        fab:fab_colorNormal="@color/accent"
        fab:fab_colorPressed="@color/accent_pressed"
        fab:fab_colorRipple="@color/ripple" />

</FrameLayout>

Разъясню значения атрибутов FloatingActionButton:

android:src — картинка, которая будет отображаться на кнопке.
fab:fab_colorNormal — цвет кнопки в обычном состоянии.
fab_colorPressed — цвет кнопки в нажатом состоянии.
fab_colorRipple — цвет ripple-эффекта осле нажатия.

Инициализируем список и кнопку в onCreate:

ListView list = (ListView) findViewById(R.id.listview);
ListViewAdapter listAdapter = new ListViewAdapter(this, getResources().getStringArray(R.array.countries));
list.setAdapter(listAdapter);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

Я не буду приводить код ListViewAdapter, т. к. он не относится к теме статьи, но вы можете в исходниках примера. Ширина и высота кнопки кнопки жестко прописаны и равны 56dp для нормальной и 40dp для мини-кнопки, как указано в гайдлайнах Google .

Теперь привяжем список к кнопке:

fab.attachToListView(list);

Помимо ListView можно прикрепить кнопку к RecyclerView или ScrollView методами attachToRecyclerView или attachToScrollView.

Чтобы сделать кнопку маленькой нужно добавить атрибут fab_type в XML кнопки:

fab:fab_type="mini"

или прописать это к коде:

fab.setType(FloatingActionButton.TYPE_MINI);

Отключаем тень:

fab:fab_shadow="false"

или

fab.setShadow(false);

Показываем/прячем кнопку:

fab.show(); //показываем
fab.hide(); //прячем

fab.show(false); //показываем без анимации
fab.hide(false); //прячем без анимации

Обработка нажатий происходит при помощи обычного OnClickListener’а.

Библиотека на GitHub: Floating Action Button.
Исходники примера: Floating Action Button.