Руководство Android FloatingActionButton
View more Tutorials:
FloatingActionButton это особенный button, обычно отображается в виде круга с Icon в центре. Он плавает на поверхности интерфейса, что позволяет пользователю нажать на него и выполнить действие.

FloatingActionButton отображаются в соответствии с разными контекстами.

FloatingActionButton это подкласс у ImageButton, и потомок у ImageView, поэтоу вы можете настроить для него Icon через атрибут android:srcCompat.
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" app:srcCompat="@drawable/icon_new" ... />
Библиотека FloatingActionButton не имеется наготове в Android SDK, поэтому вам надо ее установить в ваш project из Palette окна дизайна, или добавить библиотеку в project вручную.

После установки из Palette вы можете увидеть, что библиотека уже объявлена в build.gradle (Module: app).

implementation 'com.google.android.material:material:1.0.0'
Проверить новейшую версию данной библиотеки на mvnrepository.com:
FloatingActionButton (FAB) обычно расположен вt CoordinatorLayout, и FloatingActionButton скрываются/отображаются в соответствии с контекстом, и переходом (transition) у View внутри CoordinatorLayout, это улучшает опыть пользователя.
В данной статье я только говорю о свойствах FAB вместо его связи с CoordinatorLayout. После того, как вы поймете свойства FAB, вы можете сочетать его с CoordinatorLayout. И статья ниже будет вам полезна:
- TODO Link!

Обычно вы используете FloatingActionButton (FAB) в зависимости от контекста и FAB это главное действие данное пользователю. Например вы у экрана смотрите список электронной почты, можно отобразить FAB позволяющий пользователю создать новый Email (Если вы считаете это распространенное действие для пользователя) ...
Как было сказано выше, FloatingActionButton (FAB) стоит расположить в CoordinatorLayout чтобы улучшить опыть пользователя. Но в некоторых простых приложениях CoordinatorLayout не нужен. В следующем примере, я расположу FloatingActionButton (fab) в ConstraintLayout, и привяжу его к правому нижнему углу данного Layout. Когда пользователь нажимет на данный button другие 3 button (fab1, fab2, fab3) отобразятся рядом с fab, или исчезнут из поля зрения пользователя.


OK, на Android Studio, создайте новый project:
- File > New > New Project > Empty Activity
- Name: SimpleFABExample
- Package name: org.o7planning.simplefabexample
- Language: Java
Компонент FloatingActionButton не имеется наготове в SDK у Android, поэтому чтобы его использовать вам нужно установить его в ваш project.

Или объявите библиотеку имеющую FAB в файле build.gradle (Module: app).
.... dependencies { ... implementation 'com.google.android.material:material:1.0.0 }

Скопируйте несколько файлов изображения в папку "drawable":

icon_new.png | icon_mail.png | icon_camera.png | icon_microphone.png |
Дизайн интерфейса приложения:

Выровнить положение FAB на интерфейсе:

Настроить ID для FAB:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="32dp" android:layout_marginRight="32dp" android:layout_marginBottom="24dp" android:clickable="true" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/icon_new" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="32dp" android:layout_marginRight="32dp" android:layout_marginBottom="24dp" android:clickable="true" app:layout_constraintBottom_toTopOf="@+id/fab" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/icon_mail" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="32dp" android:layout_marginRight="32dp" android:layout_marginBottom="20dp" android:clickable="true" app:layout_constraintBottom_toTopOf="@+id/fab1" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/icon_camera" /> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="32dp" android:layout_marginRight="32dp" android:layout_marginBottom="24dp" android:clickable="true" app:layout_constraintBottom_toTopOf="@+id/fab2" app:layout_constraintEnd_toEndOf="parent" app:srcCompat="@drawable/icon_microphone" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.simplefabexample; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import com.google.android.material.floatingactionbutton.FloatingActionButton; public class MainActivity extends AppCompatActivity { private FloatingActionButton fab; private FloatingActionButton fab1; private FloatingActionButton fab2; private FloatingActionButton fab3; private boolean isFABOpen; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.fab = (FloatingActionButton) findViewById(R.id.fab); this.fab1 = (FloatingActionButton) findViewById(R.id.fab1); this.fab2 = (FloatingActionButton) findViewById(R.id.fab2); this.fab3 = (FloatingActionButton) findViewById(R.id.fab3); this.fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(!isFABOpen){ showFABMenu(); } else{ closeFABMenu(); } } }); } private void showFABMenu(){ isFABOpen=true; fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55)); fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105)); fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155)); } private void closeFABMenu(){ isFABOpen=false; fab1.animate().translationY(0); fab2.animate().translationY(0); fab3.animate().translationY(0); } }

dimens.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="standard_55">255dp</dimen> <dimen name="standard_105">2105dp</dimen> <dimen name="standard_155">2155dp</dimen> </resources>