Урок по Kotlin в Android Studio: Snackbar и FloatingActionButton

Короткие всплывающие сообщения внизу экрана стали стандартом для обратной связи: «Сообщение отправлено», «Файл удалён», «Отмена». В Android за них отвечает компонент Snackbar. А круглая кнопка, парящая над интерфейсом, — это FloatingActionButton (FAB). Сегодня на занятии в Android Studio мы разберём оба этих элемента и свяжем их вместе. Писать будем на Kotlin, и этот урок даст вам простой, но эффектный инструмент для улучшения интерфейса.


Что такое Snackbar и чем он отличается от Toast

Snackbar пришёл на смену устаревшему Toast. Он тоже появляется на несколько секунд и исчезает, но умеет гораздо больше: может содержать кнопку действия («Отменить», «Повторить»), автоматически сдвигается при появлении клавиатуры и идеально вписывается в Material Design. В отличие от диалога, Snackbar не блокирует работу с интерфейсом — пользователь может проигнорировать его и продолжать скроллить или нажимать другие кнопки.

Для показа Snackbar нужен контейнер-родитель, обычно это корневой макет экрана. Лучше всего использовать CoordinatorLayout — тогда Snackbar будет корректно взаимодействовать с другими элементами Material Design, например с FloatingActionButton.


Добавление FloatingActionButton в разметку

FloatingActionButton — это круглая кнопка с тенью, которая обычно размещается в правом нижнем углу экрана и служит для главного действия: написать письмо, добавить контакт, создать заметку. Разместите её внутри CoordinatorLayout, задав позицию через layout_gravity.

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:contentDescription="Добавить"
        app:srcCompat="@android:drawable/ic_input_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Атрибут app:srcCompat задаёт иконку. Для примера мы используем системную иконку «плюс», но можно поставить любую свою.


Показываем Snackbar при нажатии на FAB

В MainActivity.kt получим ссылку на кнопку и покажем Snackbar. Метод make принимает родительский View (координатор-лейаут или любой другой View), текст сообщения и длительность показа. Вызов show() отображает его на экране.

val fab = findViewById<FloatingActionButton>(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Это простое уведомление", Snackbar.LENGTH_SHORT).show()
}

Добавление кнопки действия в Snackbar

Часто нужно дать пользователю возможность отреагировать на сообщение — например, отменить удаление. Для этого у Snackbar есть метод setAction, который принимает текст кнопки и слушатель нажатия.

Snackbar.make(view, "Файл удалён", Snackbar.LENGTH_LONG)
    .setAction("Отмена") {
        // восстановить файл
    }
    .show()

Цвет текста кнопки можно изменить через setActionTextColor. При нажатии на кнопку Snackbar автоматически закроется.


Как Snackbar дружит с FloatingActionButton

Благодаря CoordinatorLayout FloatingActionButton плавно поднимается вверх, когда появляется Snackbar, и возвращается обратно, когда тот исчезает. Для этого в корневой разметке должен использоваться именно CoordinatorLayout — тогда всё работает автоматически, без дополнительного кода.


Использование ViewBinding и корутин

Более современный вариант — с ViewBinding. Получаем доступ к fab через binding.fab и показываем Snackbar с задержкой или после выполнения фоновой задачи.

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.fab.setOnClickListener { view ->
        lifecycleScope.launch {
            delay(500) // имитация работы
            Snackbar.make(view, "Задача выполнена", Snackbar.LENGTH_SHORT).show()
        }
    }
}

Стилизация Snackbar

Snackbar можно кастомизировать: менять фон, скруглять углы, настраивать шрифт. Делается это через собственный стиль или программно. Для фона вызовите snackbar.view.setBackgroundColor(...), для текста — snackbar.view.findViewById<TextView>(com.google.android.material.R.id.snackbar_text)?.setTextColor(...).


Полезные советы

  • Не злоупотребляйте Snackbar. Показывайте его только для значимых событий. Для отладочных сообщений используйте Log.
  • Один Snackbar за раз. Если показать второй, пока первый ещё виден, новый просто заменит старого — это штатное поведение.
  • Используйте CoordinatorLayout. Без него FAB не будет подниматься при появлении Snackbar, а само сообщение может наложиться на системные кнопки навигации.

Коротко о главном

Сегодняшний урок в Android Studio на языке Kotlin показал, как использовать Snackbar для быстрой обратной связи и FloatingActionButton для главного действия. Вы научились показывать простое сообщение, добавлять кнопку действия и правильно размещать элементы, чтобы они взаимодействовали друг с другом. Попробуйте добавить Snackbar в своё приложение при сохранении заметки или удалении элемента — это сразу повысит удобство интерфейса.

Добавлен: