How to align edittext and button next to each other inside relativelayout?

Question

There is a very similar question here:

How to put an EditText and Button next to each other?

However, that question has a LinearLayout as a root element, and my layout does not.

I have also already read this article:

http://android-developers.blogspot.com/2009/02/android-layout-tricks-1.html

Which is doing virtually the same thing I want to do, however my device keeps showing the button on top of the EditText element:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:singleLine="true"
        android:inputType="text" />

    <Button
        android:id="@+id/search_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignEnd="@+id/editText"
        android:layout_alignRight="@+id/editText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="@string/search_button" />
</RelativeLayout>

Ideally, the EditText element should be about 75% the width of my device and the button the remaining 25%

I have next to 0 experience working with Layouts, and this is my first attempt at making a very simple app from scratch coming from a web background.

Answer 1

First of all you gave fill_parent as width to both element. fill_parent means same width as parent, so they cannot be horizontally aligned (by the way, you should use match_parent instead, they are the same, but the former has been deprecated years ago...). To have them sitting beside each other you should do something like

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Put the Button first, so the EditText can occupy all the remaining space -->
<Button
    android:id="@+id/search_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:text="@string/search_button" />

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_toStartOf="@id/search_button"
    android:layout_toLeftOf="@id/search_button"
    android:singleLine="true"
    android:inputType="text" />

</RelativeLayout>

Sadly you have no way to give a percentage. To accomplish this you need to use LinearLayout and give weights:

<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<EditText
    android:id="@+id/editText"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".75"
    android:singleLine="true"
    android:inputType="text" />

<Button
    android:id="@+id/search_button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".25"
    android:text="@string/search_button" />

</LinearLayout>

Answer 2

Use the attribute android:layout_toRightOf = "@id/editText" in Button and give fix width to button like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:ems = "15"
        android:inputType="text" />

    <Button
        android:id="@+id/search_button"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/editText"
        android:text="@string/search_button" />
</RelativeLayout>

No need to use extra attributes like android:layout_alignParentTop etc.

Answer 3

You should use LinearLayout instead.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:weight="1"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:inputType="text" />

    <Button
        android:id="@+id/search_button"
        android:layout_width="0dp"
        android:weight="3"
        android:layout_height="wrap_content"        
        android:text="@string/search_button" />
</LinearLayout >

Edit: Alternative solution, but this way editText is fixed width and button get all the remaining width

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:singleLine="true"
        android:inputType="text" />

    <Button
        android:id="@+id/search_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/editText"
        android:layout_toEndOf="@+id/editText"
        android:text="@string/search_button" />
</RelativeLayout>