How to pin "Floating Action Button" correcly using CoordinatorLayout?

Question

I use CoordinatorLayout as my root view. It contains a RelativeLayout and a FloatingActionButton. When I set layout_anchor and layout_anchorGravity for the FloatingActionButton, it's not centered on the edge of the RelativeLayout (orange area on the screen) as I expected.

I tried solution from this question How can I add the new "Floating Action Button" between two widgets/layouts but without success.

Here is my layout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/primary_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:paddingBottom="30dp">

        <com.vocabularyminer.android.android.view.view.FloatingEditText
            android:id="@+id/edittext_package_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:layout_marginLeft="14dp"
            android:layout_marginRight="14dp"
            android:layout_marginTop="16dp"
            android:hint="Test fab button"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_done_white_24dp"
        app:elevation="4dp"
        app:layout_anchor="@id/primary_area"
        app:layout_anchorGravity="bottom|right|end"/>

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

Result screen:

What I have expected:

What is your question exactly? Where do you want to place it? — Hussein El Feky, Aug 21 '15 at 11:36
i think your code is correct, once try with EditText instead of your custom edittext. — Ravi, Aug 21 '15 at 11:38
I have added the screen, what I have exactly expected from the layout above. If you look on the answer for this question [link](http://stackoverflow.com/a/30990661/2268063) you can see fab's center is exactly on the bottom edge of the purple area. — Seid, Aug 21 '15 at 12:55

score 0 · Answer 1 · answered Aug 21 '15 at 11:38

I am used to do the anchoring myself by this code, to add in the addOnLayoutChangeListener listener of your main view:

// fabGap is the right margin from the CoordinatorLayout
// container is your CoordinatorLayout  

final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.TOP);
    layoutParams.setMargins(mAppBarLayout.getRight() - (2 * fabSize) - (2 * fabGap), mAppBarLayout.getBottom() - (fabSize / 2), 0, fabPadding);

    mFavoriteActionButton = new FloatingActionButton(getActivity());

The solution with _CoordinatorLayout_ and *app:layout_anchor* should work without these workarounds. I finally founded, where my problem was and now it's working exactly as I exptected. — Seid, Aug 24 '15 at 11:35

score 0 · Answer 2 · edited May 23 '17 at 11:52

I found what was my problem. Solution to this question: How can I add the new "Floating Action Button" between two widgets/layouts is correct. But I placed my fragment to FrameLayout, which was defined according to this xml:

<FrameLayout
        android:id="@+id/floating_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

And because I used wrap_content then FAB button was placed inside the RelativeLayout instead of the position on the edge of the RelativeLayout.

When I used also in layout_heigh parameter match_parent then everything works as expected.

How to pin "Floating Action Button" correcly using CoordinatorLayout?

2 Answers2