Android EditText and Button on same line
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>
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>
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>
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>
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>
For those who want a solution for a Relative Layout, try this. My goals was to keep the button size the same but adjust the EditText field when the phone was rotated to landscape mode or on different phone screen sizes.
So the trick is to use a combination of margins and aligning the parent to the start. Here is something you can try, I pulled this directly from my app.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/mainBackground"
android:orientation="vertical"
android:paddingLeft="3dp"
android:paddingRight="1dp"
tools:context=".MainActivity">
<EditText
android:id="@+id/itemEntry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="14dp"
android:layout_marginEnd="100dp"
android:layout_marginBottom="17dp"
android:imeOptions="actionDone"
android:inputType="text"
android:textColor="@color/textColor" />
<Button
android:id="@+id/button_insert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/itemEntry"
android:layout_marginStart="9dp"
android:layout_marginTop="-4dp"
android:layout_marginEnd="9dp"
android:layout_alignParentEnd="true"
android:background="@drawable/round_button"
android:text="+"
android:textColor="#ffffff"
android:textSize="20dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
What you'll get is the EditText will change in size depending on screen-width while the button will remain fixed at the end. The button sticks at the end because of android:layout_alignParentEnd="true"
. And to stop the EditText from overrunning the Button, android:layout_marginEnd="100dp"
is used. Hope this helps!
The better answer now is set layout_width of EditText to 0dp
<LinearLayout
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_width="fill_parent">
<EditText
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_width="0dp"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
精彩评论