Comment empêcher mon bouton d'action flottant de bloquer d'autres composants?

Le nouveau Material Design de Google recommande d'utiliser des boutons d'action flottants pour attirer l'attention de l'utilisateur sur l'action principale sur cet écran. Il existe de nombreux exemples de cela dans une vue de liste.

Supposons maintenant que votre affichage de liste contienne juste assez d'éléments pour remplir l'écran, rendant le défilement impossible. Si vos éléments de liste ont un certain composant avec lequel l'utilisateur peut interagir, par exemple un commutateur ou une étoile préférée, il est possible que le bouton d'action flottant bloque ce composant. Comment devrions-nous traiter ce cas?

EDIT: Cela se produit toujours toujours avec le dernier élément de la liste. Voici un exemple où la «star préférée» ne peut pas être utilisée correctement. Il bloque également le contenu, comme l'heure dans cet exemple.

Il existe différentes manières de gérer cela.

1. Ne placez pas de contenu vital sous le bouton

   C'est l'approche la plus évidente, et probablement la plus générale. Dans la mesure du possible, structurez votre conception pour vous assurer que rien de vital n'est en dessous du bouton d'action comme les autres boutons, le contenu principal, etc.

   Vous pouvez ajouter de l'espace supplémentaire en utilisant un remplissage ou une entrée vide, en formatant le contenu de sorte que les choses moins importantes ne soient pas là où le bouton sera, ou autre chose - cela dépend du contenu et de la conception que vous souhaitez.

2. Déplacer le bouton

   Le bouton d'action n'a pas besoin d'être en bas à droite. Selon votre conception, il peut être plus judicieux de la placer dans un autre emplacement. Je pense que les exemples ci-dessous le font assez bien.

   Google vient de mettre à jour son guide de conception de matériaux et a créé une page juste pour le bouton d'action flottant qui montre qu'il est utilisé à différents endroits et dimensionné en plus d'une animation (voir ci-dessous).

_{Première image de Reddit News Pro . Deuxième image de Mark DiSciullo .}

3. Ne montre pas le bouton tout le temps

   Parfois, le bouton d'action n'est pas suffisamment vital pour qu'il doive être vu tout le temps. Dans des cas comme celui-ci, le masquer lors du défilement ou pendant le défilement vers le bas peut être judicieux. Si et comment vous le faites dépend du contenu et de la conception, aucune réponse n'est vraie pour toutes les applications.

   Les directives mises à jour de Google montrent une version d' animation du bouton vers l'intérieur et vers l'extérieur en redimensionnant le tout au lieu de glisser comme l'image ci-dessous.

_{Image de Floating Action .}

Peut être un peu simpliste et pas la solution la plus élégante, mais: ajoutez une entrée «factice» vide à la fin de la liste, afin que l'utilisateur puisse faire défiler plus loin que la dernière entrée.

Cela fonctionne pour moi. Ajouter un rembourrage inférieur à 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"/>

Réf: /programming/27768495/not-able-to-add-empty-view-below-recyclerview

Rebondissant sur l'idée "Déplacer le bouton" dans la réponse acceptée, la partie Techniques de défilement des directives de conception des matériaux a une implémentation possible de cette idée.

À savoir, le bouton d' action flottant brise le bord entre le contenu et une barre d'application avec un espace flexible. Lors du défilement:

L'espace flexible se réduit jusqu'à ce qu'il ne reste que la barre d'outils. Lors du défilement vers le haut de la page, l'espace flexible se remet en place.

Le bouton d'action flottant s'anime sur l'écran comme un morceau de matériau en expansion.

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

J'ai utilisé cela dans la méthode onBindViewHolder d'un RecyclerView.Adapter pour définir la marge inférieure du dernier élément de la liste à 72dp afin qu'il défile vers le haut au-dessus du bouton d'action flottant.

Cela ne nécessite pas d'entrée factice dans la liste.

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