How do I align a button with the bottom of an EditText in an Android layout?

Question

With my layout, I would like the EditTexts to fill all of the horizontal space on their row, but leave the remaining space for a button to its right.

I would also like the buttons to be aligned to the bottom of the EditText that is on its row.

Currently, the buttons are not aligned to the bottom of their EditText, and I would like to know how I can achieve this.

Here is a screenshot:

And here is my XML:

<RelativeLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp" > 

    <LinearLayout
        android:id="@+id/nameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">          

        <EditText
            android:id="@+id/nameEditText"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="5dp"
            android:ems="8"
            android:textSize="15sp"
            android:hint="enter name" />

        <ImageButton
            android:id="@+id/micNameButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_mic" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/editLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/nameLayout">       

        <EditText
            android:id="@+id/notesEditText"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:ems="8"
            android:textSize="15sp"
            android:hint="enter notes" />

        <ImageButton
            android:id="@+id/micNotesButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_mic" />

    </LinearLayout>

</RelativeLayout>

Answer 1

Try keeping your margin attributes in the LinearLayout, and not in the actual EditText or ImageButton. And set the gravity of the layout to bottom.

(Edit: Also notice that I added android:orientation="horizontal" to the LinearLayouts. You should always have an orientation when child views use layout_weight)

It should look something like this:

<RelativeLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp" > 

    <LinearLayout
        android:id="@+id/nameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:gravity="bottom" >

        <EditText
            android:id="@+id/nameEditText"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:ems="8"
            android:textSize="15sp"
            android:hint="enter name" />

        <ImageButton
            android:id="@+id/micNameButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_mic" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/editLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp"
        android:gravity="bottom"
        android:layout_below="@+id/nameLayout">       

        <EditText
            android:id="@+id/notesEditText"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:ems="8"
            android:textSize="15sp"
            android:hint="enter notes" />

        <ImageButton
            android:id="@+id/micNotesButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_mic" />

    </LinearLayout>

</RelativeLayout>