How to equally span buttons/layouts vertically in android?

Question

I have a layout like in calculator , 4 buttons in each row , with some 5 rows. I created these each row by using LinearLayout. I had managed to fill width of each row completely by using android:layout_weight="1" in each button in LinearLayout. But i don't know how to fill the vertical space in this way. After five rows there's space remaining at the bottom for Normal XDPI screens(Nexus 4)

<LinearLayout
        android:id="@+id/first_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry">

    <Button
            android:id="@+id/seven"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="7"
            android:textColor="@color/Blue_ICS"
            android:textSize="@dimen/button_text_size"
            />

    <Button
            android:id="@+id/eight"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="8"
            android:textColor="@color/Blue_ICS"

            android:textSize="@dimen/button_text_size"/>

    <Button
            android:id="@+id/nine"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="9"

            android:textColor="@color/Blue_ICS"
            android:textSize="@dimen/button_text_size"/>

    <Button
            android:id="@+id/plus"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="+"
            android:textColor="@color/Blue_ICS"
            android:textSize="@dimen/button_text_size"/>
</LinearLayout>

The layout is too long so i share here code of only first row, remaining rows are same too.

Have you tried to change the `LinearLayout` height attribute?: `android:layout_height="match_parent"` — Yoann Hercouet, Jun 04 '13 at 07:16
check out [this link](http://stackoverflow.com/a/8105131/2345913) — CRUSADER, Jun 04 '13 at 07:19
@ChintanRathod Yea i want to fill each row with same height. — Vins, Jun 04 '13 at 07:38

PX Developer · Accepted Answer · 2013-06-04T07:57:34.670

You should use a TableLayout, replacing all your LinearLayout for TableRow. The attribute stretchColumns allows you to make all columns with the same width without having to use weight. This way you can use the weight to handle the TableRow height.

In the example below I even added some space (empty LinearLayout) to show the results, like a calculator screen. I hope this is what you're looking for! (You'll have to change the ids)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/outerLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<LinearLayout
    android:id="@+id/screenLayout"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:orientation="vertical"></LinearLayout>

<TableLayout
    android:id="@+id/myLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/screenLayout"
    android:stretchColumns="*" >

    <TableRow
        android:id="@+id/first_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/seven"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="7" />

        <Button
            android:id="@+id/eight"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="8" />

        <Button
            android:id="@+id/nine"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="9" />

        <Button
            android:id="@+id/plus"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="+" />
    </TableRow>

    <TableRow
        android:id="@+id/first_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/seven"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="4" />

        <Button
            android:id="@+id/eight"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="5" />

        <Button
            android:id="@+id/nine"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="6" />

        <Button
            android:id="@+id/plus"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="-" />
    </TableRow>

    <TableRow
        android:id="@+id/first_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/seven"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="1" />

        <Button
            android:id="@+id/eight"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="2" />

        <Button
            android:id="@+id/nine"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="3" />

        <Button
            android:id="@+id/plus"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="*" />
    </TableRow>

    <TableRow
        android:id="@+id/first_row"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/seven"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="0" />

        <Button
            android:id="@+id/eight"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="," />

        <Button
            android:id="@+id/nine"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="/" />

        <Button
            android:id="@+id/plus"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:text="=" />
    </TableRow>
</TableLayout>

</RelativeLayout>

Result:

enter image description here

Yeah this will help to span the whole layout equally. Thanks — Vins, Jun 04 '13 at 08:20

AMerle · Answer 2 · 2013-06-04T07:22:17.753

If your parent is a LinearLayout too, you can user the android:layout_weight="1" on your rows too.

<!--parent-->
<LinearLayout
   android:layout_height="match_parent"
   android:layout_width="match_parent"
   android:orientation="vertical">

   <include
      android:layout="@layout/myrow"
      android:layout_height="0dp"
      android:layout_width="match_parent"
      android:layout_weight="1"/>

   <include
      android:layout="@layout/myrow"
      android:layout_height="0dp"
      android:layout_width="match_parent"
      android:layout_weight="1"/>

   <include
      android:layout="@layout/myrow"
      android:layout_height="0dp"
      android:layout_width="match_parent"
      android:layout_weight="1"/>

   <include
      android:layout="@layout/myrow"
      android:layout_height="0dp"
      android:layout_width="match_parent"
      android:layout_weight="1"/>

   <include
      android:layout="@layout/myrow"
      android:layout_height="0dp"
      android:layout_width="match_parent"
      android:layout_weight="1"/>


</LinearLayout>

Didn't test it but it should work.

Hope this helps

score 0 · Answer 3 · answered Jun 04 '13 at 07:21

try this:

    <LinearLayout
         android:id="@+id/first_row"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1">
         ...
    </LinearLayout>

    <LinearLayout
         android:id="@+id/first_row"
         android:layout_width="fill_parent"
         android:layout_height="0dp"
         android:layout_weight="1">
         ...
    </LinearLayout>
    ...

and so on. Wrap all of those into linear layout with vertical orientation

score 0 · Answer 4 · answered Jun 04 '13 at 07:24

You can try the following...(PseudoCode):(Hope u understand the logic... This works.. it stretches the button on any screen density)

      <linearlayout=Outer
          horizontal
          weightSum=5>
              <sub linearLayout=innerRow1
                   vertical
                   weightSum=1>
                   <enter all the buttons with weight as ".25">
              </sub innerRow1>
               <sub linearLayout=innerRow2
                   vertical
                   weightSum=1>
                   <enter all the buttons with weight as ".25">
              </sub innerRow2>
              <sub linearLayout=innerRow3
                   vertical
                   weightSum=1>
                   <enter all the buttons with weight as ".25">
              </sub innerRow3>
             <sub linearLayout=innerRow4
                   vertical
                   weightSum=1>
                   <enter all the buttons with weight as ".25">
              </sub innerRow4>
             <sub linearLayout=innerRow5
                   vertical
                   weightSum=1>
                   <enter all the buttons with weight as ".25">
              </sub innerRow5>

My root layout is RelativeLayout, so i cant use weight sum i think — Vins, Jun 04 '13 at 07:41
You can try it with layout_weight or you can enclose this linear layout in your RelativeLayout @vins... — amalBit, Jun 04 '13 at 07:44

How to equally span buttons/layouts vertically in android?

4 Answers4

Linked