Coordinator layout TextInput below FloatingActionB

问题:

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....." />

回答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).

回答2:

<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">

    <EditText
        android:id="@+id/input_txt"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:hint="banany"
        android:text="testestes....." />

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

Just try the above code, hope it suffice the purpose to some extent