How to make multiple elements fill screen horizontally in Android

Question

I want to have an edittext and button fill screen horizontally. When I have this configuration :

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/et_word"
        android:padding="10dp"
        />

    <requestFocus/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/btn_word"
        android:text="@string/send"
        android:padding="10dp"
        />


</LinearLayout>

I get this result :

When I have this configuration :

  <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText

            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/et_word"
            android:padding="10dp"
            />

        <requestFocus/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:id="@+id/btn_word"
            android:text="@string/send"
            android:padding="10dp"
            />


    </LinearLayout>

I get this :

I guess in second configuration, edittext really fills parent but button is not visible. How can I change my code so that both edittext and button would fill screen horizontally? Thanks.

score 2 · Answer 1 · edited May 23 '17 at 11:44

You can use layout weight to do this. For example, if you want the button to be wrap_content, and have the EditText fill the remaining space, do this:

<LinearLayout>
   <EditText
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"/>

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>
</LinearLayout>

If you want them both to take up half the layout, you can use layout_weight="1" for each. Or set one to 1 and the other to 2 to have a one-third/two-third layout. Whatever you need.

See this answer by Flo for more information on the layout_weight attribute.

score 2 · Accepted Answer · answered Aug 10 '15 at 13:54

You can use the attribute Weight which kind of give a relative size to widget. Here is an example:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText

        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="40"
        android:gravity="center"
        android:id="@+id/et_word"
        android:padding="10dp"
        />

    <requestFocus/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:gravity="center"
        android:id="@+id/btn_word"
        android:text="@string/send"
        android:padding="10dp"
        />


</LinearLayout>

With that code, yout Edittext will have a size of 4 time the size of the button, independantly of the size of your width

How to make multiple elements fill screen horizontally in Android

2 Answers2