CoordinatorLayout add padding between elements

Question

I want to have two FloatingActionButtons in my CoordinatorView. But when I try to add margin to the top FloatingActionButton, It applies from end of the view - It should add space between FloatingActionButtons. XML

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/wordpackAddButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/add"
    app:elevation="5dp"
    app:layout_anchor="@id/wordpacks_list"
    app:layout_anchorGravity="bottom|right|end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/importWordpack"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:layout_marginBottom="16dp"
    android:src="@drawable/add"
    app:elevation="5dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top" />

<ListView
    android:id="@+id/wordpacks_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>

Answer 1

SOLUTION 1:

Add another View to make a gap between two FAB's. Set the anchor of View to top position of the wordpackAddButton and set the anchor of importWordpack to top-right position of the View.

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

    <ListView
        android:id="@+id/wordpacks_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </ListView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/wordpackAddButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@drawable/add"
        app:elevation="5dp"
        app:layout_anchor="@id/wordpacks_list"
        app:layout_anchorGravity="bottom|right|end" />

    <View
        android:id="@+id/gap"
        android:layout_width="16dp"
        android:layout_height="16dp"
        app:layout_anchor="@id/wordpackAddButton"
        app:layout_anchorGravity="top">

    </View>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/importWordpack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:src="@drawable/add"
        app:elevation="5dp"
        app:layout_anchor="@id/gap"
        app:layout_anchorGravity="top|center" />


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

SOLUTION 2:

Wrap two FAB into a LinearLayout and anchor this layout to the bottom-right position of ListView.

Here is an workaround:

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_anchor="@id/wordpacks_list"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_margin="16dp"
        android:background="@android:color/transparent"
        android:clipToPadding="false">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/importWordpack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:src="@drawable/add"
            app:elevation="5dp" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/wordpackAddButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:src="@drawable/add"
            app:elevation="5dp" />

    </LinearLayout>

    <ListView
        android:id="@+id/wordpacks_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

OUTPUT: