Coordinator layout TextInput below FloatingActionButton

Question

Halloo guys I have problem here with coordinator layout. I have TextInputLayout and inside it I have editText. What I want is to show it on click on FAB on the left side and hide on click on FAB.

But I have always problem with edit text going below FAB:

Only way I was able to somehow do it is with using marginRight, see xml below. But is there any way to do it without that I think there must be better way.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="@dimen/fab_normal_size"
    android:layout_height="@dimen/fab_normal_size"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    app:fabSize="normal"
    android:src="@drawable/ic_add_black_24dp" />


<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_txt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/fab"
    app:layout_anchorGravity="left|center_vertical"
    android:layout_marginRight="@dimen/fab_normal_size">

    <EditText
        android:id="@+id/input_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="banany"
        android:text="testestes....." />

Answer 1

FAB is always over UI by design:

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

I haven't checked how it is implemented so unless someone else come with better answer you can either check CoordinatorLayout and FAB sources to see what makes it hoovering over UI, or if time is short you simply put something that looks like FAB (either you use regular button with proper drawable, or 3rd party lib).