Як уберегти плаваючу кнопку дії від блокування інших компонентів?

Новий дизайн матеріалу Google рекомендує використовувати плаваючі кнопки дій, щоб привернути увагу користувача до основної дії на цьому екрані. Прикладів цього існує досить багато в перегляді списку.

Тепер, припустимо, у вашому списку списку достатньо елементів для заповнення екрана, що робить прокрутку неможливою. Якщо елементи списку містять певний компонент, з яким користувач може взаємодіяти, наприклад, комутатор або улюблену зірку, можливо, плаваюча кнопка дії блокує цей компонент. Як нам поводитися з цією справою?

EDIT: Це насправді завжди відбувається з останнім пунктом списку. Ось приклад, коли "улюблену зірку" не можна правильно використовувати. Це також блокує вміст, наприклад час у цьому прикладі.

Є кілька різних способів впоратися з цим.

1. Не кладіть життєвий вміст під кнопку

   Це найбільш очевидний підхід і, мабуть, найбільш загальний. По можливості структуруйте свій дизайн, щоб переконатися, що нічого важливого не знаходиться під кнопкою дії, як інші кнопки, основний вміст тощо.

   Ви можете додати додатковий простір, використовуючи padding або пустий запис, форматуючи вміст, щоб не найважливіші речі не були там, де буде кнопка, чи іншою річчю - це залежить від вмісту та дизайну, який ви хочете.

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, щоб встановити нижню межу останнього елемента в списку на 72dp, щоб він прокрутився вгору над плаваючою кнопкою дії.

Для цього не потрібен фіктивний запис у списку.

@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();
    }
}