Android LinearLayout filling width

Question

I am wondering why this happens :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:gravity="center_vertical"
    android:layout_height="wrap_content" android:layout_gravity="top"
    android:background="@drawable/gradient" android:focusable="true"
    android:paddingTop="5dip" android:paddingBottom="5dip"
    android:focusableInTouchMode="true">
        <EditText android:id="@+id/searchField"
            android:layout_width="wrap_content" android:layout_height="fill_parent"

            android:paddingTop="2dip" android:paddingBottom="2dip"
            android:paddingLeft="10dip" android:paddingRight="10dip"
            android:inputType="textVisiblePassword" android:radius="5dip"
            android:layout_marginLeft="10dip"
            android:background="@drawable/search_background" android:textColor="#000000" />

        <Button android:id="@+id/info" android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dip"
            android:background="@drawable/info_btn" />
</LinearLayout>

If I set "fill_parent" to my EditText's layout_width, it takes the whole width of the parent and the button disappears (I guess it is hidden below the EditText).

Can anybody explain me? I would like to get the Button takes its own width and the EditText takes the remaining width.

Answer 1

Your telling the EditText to fill_parent, therefore it fills the screen (the whole width, leaving no space for your button).

You want the button to wrap its content and the edit text to fill the remainder, you can do this using layout_weight property:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="top"
 android:gravity="center_vertical"
 android:paddingTop="5dip"
 android:paddingBottom="5dip"
 android:orientation="horizontal">
<EditText
    android:id="@+id/searchField"
    android:layout_width="0dip"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:layout_marginLeft="10dip"
    android:paddingTop="2dip"
    android:paddingBottom="2dip"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    android:radius="5dip"
    android:inputType="textVisiblePassword"
    android:textColor="#000000" />
<Button
    android:id="@+id/info"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dip"
    android:text="Blah" />
</LinearLayout>

(I took your drawable references out to make it generic for other people)

On a side not to make your XML look nice an neat and more maintainable in eclipse:

Window > Preferences > XML > XML Files > Editor

Line width 120

Split multiple attributes TICK

Align final bracket UNTICK

Preserve Whitespace tags in PCDATA UNTICK

Clear all blank lines UNTICK

Insert Whitespace before closing TICK

Click ok

Then you can fix your XML files, when you have an XML file open CTRL+A then CTRL+SHIFT+F will format it nicely!