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>

So how does it look when you add `android:layout_marginBottom="16dp"` to the second FAB? — Eugen Pechanec, May 15 '17 at 20:19
@EugenPechanec Thats the problem. FAB looks exactly the same. But when I add marginBottom="200dp", its applied from the right bottom of the CoordinatorView — Feelfree, May 15 '17 at 20:23

Ferdous Ahamed · Accepted Answer · 2017-05-16T14:14:50.190

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:

You'll have to use padding instead of margin and `android:clipToPadding="false"` so the shadows are drawn correctly. Still before Lollipop the inset will be greater beacuse of compat shadow, and because FABs are not direct children of CoordinatorLayout they won't play well with Snackbars (move out of the way). — Eugen Pechanec, May 15 '17 at 21:15

score 1 · Answer 2 · edited May 15 '17 at 21:17

Add this view after Fab button and change top level fab's layout_anchor to transparent_view.

<View
    android:layout_width="8dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top"
    app:useCompatPadding="false"
    android:layout_gravity="end"
    android:background="@android:color/transparent"
    android:id="@+id/transparent_view"
    android:layout_height="8dp"/>

Hope it helps.

Rene Ferrari · Answer 3 · 2017-05-15T20:57:02.750

I have faced a similar problem while implementing a FAB Menu. You can solve this problem by wrapping the second FAB in a FrameLayout like so:

<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"
    app:elevation="5dp"
    app:layout_anchorGravity="bottom|right|end" />

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="56dp"
    app:layout_anchor="@id/wordpackAddButton"
    app:layout_anchorGravity="top|right">
    <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_margin="16dp"
        app:elevation="5dp"
        app:layout_anchor="@id/wordpackAddButton" />
</FrameLayout>

This might be a bit of a hacky solution but it is simple and it works. The padding value of the FrameLayout is set to 56dp since that is the size of the FAB.

That'll mess up padding below Lollipop. FAB has to be direct child of CoordinatorLayout so it correctly subtracts extra space occupied by compat shadow and positions the FAB. — Eugen Pechanec, May 15 '17 at 21:05
Wow thanks for clarifying I did not know that! So the only way (which would even be more hacky) would be putting a View between those FABs? — Rene Ferrari, May 15 '17 at 21:09

CoordinatorLayout add padding between elements

3 Answers3