Как заставить две плавающие кнопки действия не перекрывать друг друга?

Question

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

Это то, что у меня сейчас:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/saveFloatingActionButton"
        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_save_24dp"
        />
    <View
        android:id="@+id/dummy"
        android:layout_width="1dp"
        android:layout_height="16dp"
        app:layout_anchor="@id/saveFloatingActionButton"
        app:layout_anchorGravity="top|right|end" />

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

</FrameLayout>

Я надеюсь иметь дваплавающие кнопки действий друг на друге, вот так

Answer 1

Создайте LinearLayout, поместите два FAB в Linear Layout и сделайте макет Frame в качестве корня LinearLayout.

  <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="100dp"
            android:layout_gravity="bottom|end"
            android:orientation="vertical">
            <android.support.design.widget.FloatingActionButton
                android:layout_width="50dp"
                android:layout_height="50dp" 
                android:src="@drawable/ic_add_button"
                />
            <android.support.design.widget.FloatingActionButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/ic_add_button"
                />
        </LinearLayout>
    </FrameLayout>

Answer 2

Попробуйте поместить каждую плавающую кнопку в отдельную FrameLayout.

Из документации Android:

FrameLayout предназначен для блокировки области на экране для отображения одного элемента. Как правило, FrameLayout следует использовать для хранения одного дочернего представления, поскольку может быть сложно организовать дочерние представления таким образом, чтобы их можно было масштабировать до разных размеров экрана, не перекрывая друг друга дочерние представления. Однако вы можете добавить несколько дочерних элементов в FrameLayout и управлять их положением в FrameLayout, назначая гравитацию каждому дочернему элементу с помощью атрибута android: layout_gravity.

Я также поместил макеты рамок в RelativeLayout, однако я не уверен, если это необходимо, в зависимости от того, что еще вы делаете с этим макетом.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom|right|end">

    <FrameLayout
        android:id="@+id/FAB_frame_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="8dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="16dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>

    <FrameLayout
        android:id="@+id/FAB_frame_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FAB_frame_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="@dimen/fab_margin"
            app:elevation="9dp"
            app:fabSize="normal"
            app:rippleColor="your_color"/>

        <TextView
            android:id="@+id/fab_text_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:elevation="17dp"
            android:text="your_text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#fff"/>
    </FrameLayout>
</RelativeLayout>