Impossible d'aligner deux boutons d'action flottant verticalement dans CoordinatorLayout

Question

J'ai écrit XML mise en page d'avoir 2 FloatingActionButtons à CoordinatorLayout prendre l'aide d'this réponse StackOverflow.

Code XML:

?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="testApp.MainActivity"> 

........ 

<android.support.design.widget.FloatingActionButton 
     android:id="@+id/fabShare" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|top|right" 
     android:layout_margin="16dp" 
     android:src="@drawable/ic_share_video" 
     android:visibility="visible" 
     app:layout_anchor="@+id/dummy" 
     app:layout_anchorGravity="top|right|end" /> 

    <View 
     android:id="@+id/dummy" 
     android:layout_width="1dp" 
     android:layout_height="16dp" 
     app:layout_anchor="@+id/fab" 
     app:layout_anchorGravity="top|right|end" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_file_download" 
     android:visibility="visible" 
     app:elevation="5dp" 
     app:layout_anchorGravity="end|bottom|right" /> 

</android.support.design.widget.CoordinatorLayout> 

j'obtenir un résultat clair dans l'API de niveau> 21 mais, pour le niveau API = < 19, il ne fonctionne pas comme prévu.

Je veux dire dans l'API niveau 19, les FloatingActionButtons sont loin d'être ensemble et ils ne sont pas alignés ce que je veux.

Comme je l'ai mentionné dans mon code XML, j'ai rassemblé tous les éléments dans un fichier Coordinator. Je n'ai pas écrit de XML spécifique pour le niveau d'API spécifique. Mais, je ne peux pas comprendre pourquoi le même code est rendu différemment dans différents niveaux d'API. Une idée? J'ai donné des captures d'écran de différents appareils.

Je ne veux pas non plus de chevauchement de Snackbar avec n'importe quelle vue.

API LEVEL 19 Screenshot
API LEVEL 23 Screenshot

Answer 1

J'ai fait selon la réponse de Pritesh et j'ai trouvé que cela fonctionnait bien.

Mais, Snackbars se sont chevauchés comme https://imgur.com/a/WQYEA | Donc, j'ai donné le LinearLayout un 30dpbottom-padding. Et pour ne pas le faire comme des nouilles collantes, j'ai donné un 5dpright-padding. Pas une solution brillante mais, ça a juste marché.

Affichage du code complet si quelqu'un en a besoin.

?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="testApp.MainActivity"> 

........ 

    <LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:paddingBottom="30dp" 
    android:paddingRight="5dp" 
    android:orientation="vertical"> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fabShare" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="10dp" 
     android:src="@drawable/ic_share_video" 
     android:visibility="invisible" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/ic_file_download" 
     android:visibility="invisible" /> 

</LinearLayout> 

    </LinearLayout> 

</android.support.design.widget.CoordinatorLayout> 

EDIT:

Pour les grandes tailles d'écran, le 30dpbottom-padding ne serait pas fonctionner très bien.

Le meilleur sera de fixer dynamiquement par le code java: Nommez le LinearLayout (Ici, j'ai donné @+id/totalFab)

Snippet:

/*Correcting SnackBar Overlapping*/ 
LinearLayout layout = (LinearLayout) findViewById(R.id.totalFab); 
DisplayMetrics displaymetrics = new DisplayMetrics(); 
getWindowManager().getDefaultDisplay().getRealMetrics(displaymetrics); 
int screenHeight = displaymetrics.heightPixels; 
layout.setPadding(0, 0, 5, (screenHeight/20) + 30); 
/*Correcting SnackBar Overlapping*/ 

Je l'ai testé sur 4 appareils différents avec des tailles d'écran différentes, cela fonctionne bien. [Pour le texte FAB sur une seule ligne]

Answer 2

Vous pouvez regrouper les deux FAB en simple ViewGroup dire LinearLayout ou RelativeLayout puis aligner selon vos besoins.