Как мне удержать кнопку с плавающим действием от блокировки других компонентов?

Новый Material Design от Google рекомендует использовать плавающие кнопки действий, чтобы привлечь внимание пользователя к основным действиям на этом экране. Существует довольно много примеров этого в виде списка.

Теперь предположим, что в вашем представлении списка достаточно элементов для заполнения экрана, что делает прокрутку невозможной. Если у ваших элементов списка есть определенный компонент, с которым пользователь может взаимодействовать, например, переключатель или любимая звезда, возможно, что плавающая кнопка действия блокирует этот компонент. Как мы должны справиться с этим делом?

РЕДАКТИРОВАТЬ: Это на самом деле всегда происходит с последним элементом списка. Вот пример, где «любимая звезда» не может быть использована должным образом. Это также блокирует контент, такой как время в этом примере.

Есть несколько разных способов справиться с этим.

1. Не размещайте жизненно важный контент под кнопкой

   Это самый очевидный подход и, возможно, самый общий. Когда это возможно, структурируйте свой дизайн так, чтобы под функциональной кнопкой не было ничего жизненно важного, как другие кнопки, основной контент и т. Д.

   Вы можете добавить дополнительное пространство, используя отступы или пустую запись, отформатировав содержимое так, чтобы не так важно было то, где находится кнопка, или что-то другое - это зависит от содержимого и дизайна, который вы хотите.

2. Переместите кнопку

   Кнопка действия не должна быть в правом нижнем углу. В зависимости от вашего дизайна, может иметь смысл разместить его в другом месте. Я думаю, что примеры ниже делают это довольно хорошо.

   Google только что обновил свое руководство по дизайну материалов и создал страницу только для кнопки с плавающим действием, которая показывает, что она используется в разных местах и ​​размеров в дополнение к анимации (о ней рассказывается ниже).

_{Первое изображение из Reddit News Pro . Второе изображение от Марка ДиСкиулло .}

3. Не показывать кнопку все время

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

   В обновленных правилах Google представлена ​​версия анимации кнопки, которая масштабируется целиком, а не скользит, как показано на рисунке ниже.

_{Изображение из плавающего действия .}

Может быть немного упрощенным и не самым элегантным решением, но: добавьте пустую «фиктивную» запись в конец списка, чтобы пользователь мог прокрутить дальше, чем последняя запись.

Это работает для меня. Добавить нижний отступ в RecyclerView

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

Ссылка: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Отражая идею «Переместить кнопку» в принятом ответе, методика прокрутки в руководстве по проектированию материалов имеет одну возможную реализацию этой идеи.

А именно, плавающая кнопка действия разрывает грань между контентом и панелью приложения с гибким пространством. При прокрутке:

Гибкое пространство сокращается до тех пор, пока не останется только панель инструментов. При прокрутке вверх страницы, гибкое пространство снова становится на свои места.

Плавающая кнопка действия анимируется на экране как расширяющийся кусок материала.

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

Я использовал это в методе onBindViewHolder в RecyclerView.Adapter, чтобы установить для нижнего поля последнего элемента в списке значение 72 dp, чтобы он прокручивался вверх над плавающей кнопкой действия.

Это не требует фиктивной записи в списке.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}