Layout with buttons which fill screen size equally

Question

I want to create a layout which consist of 8 buttons (four rows, two in a row).

I want the buttons to fill the screen size proportionally - equal margins so it will fit well on diffrend screen sizes.

This is what i have now:

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

<RelativeLayout
    android:id="@+id/test_1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_marginLeft="10dp" >

    <Button
        android:id="@+id/concession_btn"
        android:layout_width="150dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />

    <Button
        android:layout_width="150dip"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/concession_btn"
        android:text="test2"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />

    <Button
        android:id="@+id/test_2"
        android:layout_width="150dip"
        android:layout_below="@+id/concession_btn"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_2"
        android:layout_below="@+id/concession_btn"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
    <Button
        android:id="@+id/test_3"
        android:layout_width="150dip"
        android:layout_below="@+id/test_2"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_3"
        android:layout_below="@+id/test_2"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
    <Button
        android:id="@+id/test_4"
        android:layout_width="150dip"
        android:layout_below="@+id/test_3"
        android:layout_height="wrap_content"
        android:text="test3"
        android:layout_weight="1" 
        android:background="@drawable/mybutton"/>

    <Button
        android:layout_width="150dip"
        android:layout_toRightOf="@+id/test_4"
        android:layout_below="@+id/test_3"
        android:layout_height="wrap_content"
        android:text="test4"
        android:layout_weight="1"
        android:background="@drawable/mybutton" />
</RelativeLayout>

Which gives me eight buttons - four rows two in a row, but my xml uses fix margins so it will not fitt well on diffrent screen sizes.

Help will be much appreciated!

Answer 1

// try this way,hope this will help you...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/concession_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="test1"
            android:background="@drawable/mybutton" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test2"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test3"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test4"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test5"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test6"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/test_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test7"
            android:layout_weight="1"
            android:background="@drawable/mybutton"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="test8"
            android:layout_weight="1"
            android:background="@drawable/mybutton" />
    </LinearLayout>
</LinearLayout>

Answer 2

Here is your layout friend.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1" >

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".5"
            android:text="test" />
    </LinearLayout>

</LinearLayout>

Answer 3

Try dividing the layouts and insert buttons in each divided layouts..

To divide a linear layout into two equal linear layouts

<LinearLayout android:orientation="horizontal" android:layout_height="fill_parent" android:layout_width="fill_parent">
  <LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
     //Your button here
  </LinearLayout>
  <LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent">
     //Your button here
  </LinearLayout>
</LinearLayout>

The above code will split a row into two..Similarly paste the above code 3 times to get 4 rows with 2 columns each...

Remember to enclose the above code in a LinearLayout with android:orientation="vertical"

Place your buttons in the inner layouts..After that your positioning of the buttons will be responsive..

Answer 4

For buttons, inserting a View element with weight 1 and 0dp height and width does the job. Here's the code snippet:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp">
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 1" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>
    <View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"/>

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    </LinearLayout>
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>


</LinearLayout>

The output looks something like this: