Come posso impedire al mio pulsante di azione mobile di bloccare altri componenti?

Il nuovo Material Design di Google consiglia di utilizzare pulsanti di azione mobili per attirare l'attenzione dell'utente sull'azione principale su quella schermata. Ci sono molti esempi di ciò in una vista elenco.

Supponiamo ora che la visualizzazione dell'elenco abbia elementi sufficienti per riempire lo schermo, rendendo impossibile lo scorrimento. Se le voci dell'elenco hanno un determinato componente con cui l'utente può interagire, ad esempio un interruttore o una stella preferita, è possibile che il pulsante di azione mobile blocchi questo componente. Come dovremmo gestire questo caso?

EDIT: questo in realtà accade sempre con l'ultimo elemento dell'elenco. Ecco un esempio in cui la "star preferita" non può essere utilizzata correttamente. Sta anche bloccando il contenuto, come l'ora in questo esempio.

Esistono diversi modi per gestirlo.

1. Non posizionare contenuti vitali sotto il pulsante

   Questo è l'approccio più ovvio e probabilmente il più generale. Quando possibile, struttura il tuo design per assicurarti che nulla di vitale sia al di sotto del pulsante di azione come altri pulsanti, contenuti principali, ecc.

   Puoi aggiungere spazio extra usando il riempimento o una voce vuota, formattando il contenuto in modo che le cose non così importanti non siano dove si troverà il pulsante o qualcos'altro - dipende dal contenuto e dal design che desideri.

2. Riposizionare il pulsante

   Il pulsante di azione non deve essere in basso a destra. A seconda del progetto, potrebbe essere più sensato posizionarlo in un'altra posizione. Penso che gli esempi seguenti lo facciano abbastanza bene.

   Google ha appena aggiornato la guida alla progettazione dei materiali e creato una pagina solo per il pulsante di azione mobile che mostra che viene utilizzato in diverse posizioni e dimensioni oltre a un'animazione (di cui si parla di seguito).

_{Prima immagine da Reddit News Pro . Seconda immagine di Mark DiSciullo .}

3. Non mostrare il pulsante tutto il tempo

   A volte il pulsante di azione non è abbastanza vitale da essere visto tutto il tempo. In casi come questo, nasconderlo su scroll o mentre si scorre verso il basso può avere senso. Se e come lo fai dipende dal contenuto e dal design, nessuna risposta è vera per tutte le applicazioni.

   Le linee guida aggiornate di Google mostrano una versione di animare il pulsante dentro e fuori ridimensionando il tutto invece di scorrere come l'immagine qui sotto.

_{Immagine da Floating Action .}

Può essere un po 'semplicistico e non la soluzione più elegante, ma: aggiungi una voce "fittizia" vuota alla fine dell'elenco, in modo che l'utente possa scorrere oltre l'ultima voce.

Questo funziona per me. Aggiungi imbottitura inferiore a 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"/>

Rif: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Rimbalzando l'idea "Riposiziona il pulsante" nella risposta accettata, la parte Tecniche di scorrimento delle linee guida per la progettazione dei materiali ha una possibile implementazione di quell'idea.

Vale a dire, il pulsante di azione mobile interrompe il bordo tra il contenuto e una barra dell'app con spazio flessibile. Durante lo scorrimento:

Lo spazio flessibile si riduce fino a quando rimane solo la barra degli strumenti. Quando si scorre verso la parte superiore della pagina, lo spazio flessibile diventa nuovamente in posizione.

Il pulsante di azione mobile si anima sullo schermo come un pezzo di materiale in espansione.

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

L'ho usato in un metodo onBindViewHolder di RecyclerView.Adapter per impostare il margine inferiore dell'ultimo elemento nell'elenco a 72dp in modo che scorra verso l'alto sopra il pulsante di azione mobile.

Ciò non richiede una voce fittizia nell'elenco.

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