[Android] Nesting Relative layout inside Linear Layout

Question

I have the following code in my layout.xml.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_height="wrap_content" android:layout_width="fill_parent">

    <EditText android:hint="@string/feed_url"
        android:id="@+id/feedUrl" android:textSize="14dp" android:inputType="textUri"
        android:layout_marginRight="45dp" android:layout_height="wrap_content" android:layout_width="fill_parent">
    </EditText>

    <Button android:id="@+id/getGraph"
        android:text="@string/get"
        android:layout_toRightOf="@id/feedUrl" 
        android:layout_alignParentRight="true"          
        android:layout_height="wrap_content" android:width="45dp" android:layout_width="wrap_content">
    </Button>

</RelativeLayout>

<WebView android:id="@+id/wv1" android:layout_height="wrap_content"
    android:layout_width="fill_parent" />
</LinearLayout>

In the eclipse Plugin layout creator, the EditText and button are shown properly. (see the below screenshot)

But on the device and emulator, the button is not hidden. (see the below screenshot)

Any idea why the button is getting hidden in the device?

Answer 1

I cannot see the button in the layout builder... the reason, I think is that the EditText width is fill parent so it fills parent pushing the button out. If you must use RelativeLayout, you need to define width of the EditText explicitly. Otherwise you may want to switch to horizontal LinearLayout and set weight of the edit box to "1".

Also, there are invalid options for RelativeLayout:

xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal

Answer 2

Try the following changes to your code. You have to define the button first, since it is of fixed width, and then place the EditText to fill the rest of the space, placed to the left of the button. The button also has to be defined first (prior to Android 2.2, that is).

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

    <Button 
        android:id="@+id/getGraph"
        android:text="@string/get" 
        android:layout_alignParentRight="true"          
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"
        />
    <EditText 
        android:hint="@string/feed_url"
        android:id="@+id/feedUrl" 
        android:textSize="14dp" 
        android:inputType="textUri"
        android:layout_marginRight="45dp" 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent"
        android:layout_toLeftOf="@id/getGraph" 
        />
</RelativeLayout>

Answer 3

You can also use LinearLayout instead of RelativeLayout to archive this. You can use android:layout_weight to make Button not be overlaid by EditText. Following is the sample xml that may work:

<LinearLayout android:orientation="horizontal"
    android:layout_height="wrap_content" android:layout_width="fill_parent">
    <EditText android:hint="@string/feed_url"
        android:id="@+id/feedUrl" android:textSize="14dp"
        android:inputType="textUri" android:layout_marginRight="45dp"
        android:layout_height="wrap_content" android:layout_width="fill_parent" />
    <Button android:id="@+id/getGraph" android:text="@string/get"       
        android:layout_height="wrap_content" android:width="45dp"
        android:layout_width="wrap_content"
        android:layout_weight="1" />
</LinearLayout>