Android EditText and Button on same line

Question

I need to have a Edittext beside a Search button. The EditText should fill as much of the width as possible, the button should be to the right and be just big enough to have it's text.

It looks like this now:

[EDIT TEXT][Search]

but should look like this:

[.......EDIT TEXT.......][Search]

Here is the XML:

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
        <Button android:id="@+id/search_text"
            android:layout_toRightOf="@id/search_box"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
  </RelativeLayout>

Answer 1

Does it have to be Relative Layout?
I would suggest the following: set EditText layout_width to fill_parent and its layout_weight to 1, something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent">
<EditText android:text="@+id/EditText01" 
    android:id="@+id/EditText01"
    android:layout_height="wrap_content" 
    android:layout_weight="1"
    android:layout_width="fill_parent">
</EditText>
<Button android:text="@+id/Button01" 
    android:id="@+id/Button01"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content">
</Button>

</LinearLayout>

Answer 2

In that case, the width for the EditText must be set to fill_parent (instead of wrap_content):

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content">
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
        <Button android:id="@+id/search_text"
            android:layout_toRightOf="@id/search_box"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
  </RelativeLayout>

Edit

As you said, it hides the button. Then, just invert the order:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/RelativeLayout01" android:layout_width="fill_parent"
    android:layout_height="wrap_content">
        <Button android:id="@+id/search_text"
            android:layout_alignParentRight="true"
            android:text="Search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <EditText android:id="@+id/search_box" 
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/search_text"
            android:layout_centerVertical="true"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="type to filter"
            android:inputType="text"
            android:maxLines="1" />
</RelativeLayout>

Answer 3

I believe Cristian's answer works on later versions of the SDK, but for prior versions what you'll need to do is define the Button first, and place the EditText to layout_toLeftOf="@id/search_box", which, by the way, both objects should have different IDs.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Button
        android:id="@+id/search_button"
        android:text="Search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        />
    <EditText
        android:id="@+id/search_text"
        android:layout_toLeftOf="@+id/search_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="type to filter"
        android:inputType="text"
        android:maxLines="1"
        />
</RelativeLayout>

Answer 4

try this i have fixed little. it shows button right of edit text and also edit text width allowed to increase.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
       android:padding="10dip">

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="instructions"/>
    <EditText
        android:id="@+id/entry"
        android:layout_width="250dip"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>

    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignRight="@id/entry"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="1dip"
        android:text="ok" />

</RelativeLayout>