Bottom sheet. Всплывающая информационная панель

Задача: реализовать всплывающую панель внизу экрана поверх основного контента. Таким образом можно реализовать плашку с дополнительной информацией как это сделано, например, в Яндекс картах.

Как работает Bottom sheet в Android

BottomSheet — информационная панель, которая открывается поверх вашего основного UI. Базовым Layoutом для неё и контента должен быть androidx.coordinatorlayout.widget.CoordinatorLayout. Именно он используется, когда необходимо реализовать системное взаимодействие между вашими View внутри одного экрана. Это касается не только панели BottomSheet, но и, например, скрывающегося Toolbar.

Всплывающая панель может содержать внутри себя фрагмент, тогда в корневой layout достаточно добавить FrameLayout и добавить к нему BottomSheetBehavior

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    ...

    <FrameLayout
        android:id="@+id/containerBottomSheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_hideable="true"
        app:behavior_peekHeight="100dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Добавление фрагмента в панель

Мы добавили пустой контейнер под фрагмент, а теперь необходимо его наполнить контентом.

final BottomSheetFragment bottomFragment = new BottomSheetFragment();
getSupportFragmentManager().beginTransaction()
    .replace(R.id.containerBottomSheet, bottomFragment)
    .commit();

Операции с BottomSheet

По умолчанию, при правильно составленном layout и добавлении behavior, можно жестами вытянуть и убрать панель. Также можно сделать это программно. Достаточно установить новое состояние для BottomSheetBehavior.

bottomSheetBehaviour = BottomSheetBehavior.from(container);

bottomSheetBehaviour.setState(BottomSheetBehavior.STATE_HIDDEN);
bottomSheetBehaviour.setState(BottomSheetBehavior.STATE_HALF_EXPANDED);
bottomSheetBehaviour.setState(BottomSheetBehavior.STATE_COLLAPSED);
bottomSheetBehaviour.setState(BottomSheetBehavior.STATE_EXPANDED);

Важно: если для контейнера установить app:behavior_hideable="false" и попытаться его скрыть программно — будет Exception.

Listener прогресса открытия панели

В процессе открытия\закрытия панели иногда необходимо, например, анимировать стрелочку или производить другие манипуляции. Для этого к BottomSheetBehavior  можно добавить callback, который будет уведомлять о смене состояния и прогрессе.

bottomSheetBehaviour.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View view, int i) {
    }

    @Override
    public void onSlide(@NonNull View view, float v) {
        if (v >= 0) {
            bottomFragment.setOpenProgress(v);
        }
    }
});

Реализованный пример всплывающей панели Bottom Sheet

Исходники примера на GitHub

Пример можно скачать и посмотреть в Google play