How to set button width dynamically at runtime to fill the screen?

Question

I am learning android development and I am trying to fill the screen with six buttons. But I want to set the button size dynamically. I am getting screen size using

final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
final int screenWidthInDp = (int) (displayMetrics.widthPixels / displayMetrics.density);

and I am trying to set the handlers of each button using

button.setWidth(screenWidthInDp/6);

I have six buttons in each row and I want the size change depending on the screen and the six buttons to fill the screen. Am I doing something wrong?

This is what a button looks like in my activity.xml

<Button
    android:id="@+id/bNum10"
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:layout_below="@+id/bNum2"
    android:layout_toRightOf="@+id/bNum0"
    android:text="@string/sign" />

This is my layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_dark"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".Calc" >

    <TextView
        android:id="@+id/Display"
        android:layout_width="fill_parent"
        android:layout_height="25sp"
        android:background="@android:color/background_light"
        android:gravity="right"
        android:text="@string/Welcome"
        android:textColor="@android:color/black"
        android:textSize="24sp" />

    <Button
        android:id="@+id/bNum2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bNum1"
        android:layout_alignBottom="@+id/bNum1"
        android:layout_toRightOf="@+id/bNum1"
        android:text="@string/two" />

    <Button
        android:id="@+id/bNum3"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bNum2"
        android:layout_alignBottom="@+id/bNum2"
        android:layout_toRightOf="@+id/bNum2"
        android:text="@string/three" />

    <Button
        android:id="@+id/bNum5"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/bNum4"
        android:layout_toRightOf="@+id/bNum4"
        android:text="@string/five" />

    <Button
        android:id="@+id/bNum6"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bNum5"
        android:layout_alignBottom="@+id/bNum5"
        android:layout_toRightOf="@+id/bNum5"
        android:text="@string/six" />

    <Button
        android:id="@+id/bNum0"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Display"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="14dp"
        android:text="@string/zero" />

    <Button
        android:id="@+id/bNum1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bNum0"
        android:layout_alignLeft="@+id/bNum0"
        android:text="@string/one" />

    <Button
        android:id="@+id/bNum4"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bNum1"
        android:layout_alignLeft="@+id/bNum1"
        android:text="@string/four" />

    <Button
        android:id="@+id/bNum7"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bNum5"
        android:layout_alignParentLeft="true"
        android:text="@string/seven" />

    <Button
        android:id="@+id/bNum8"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bNum5"
        android:layout_toLeftOf="@+id/bNum6"
        android:text="@string/eight" />

    <Button
        android:id="@+id/bNum9"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/bNum8"
        android:layout_alignLeft="@+id/bNum6"
        android:text="@string/nine" />

    <Button
        android:id="@+id/bNum10"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/bNum2"
        android:layout_toRightOf="@+id/bNum0"
        android:text="@string/sign" />

    <Button
        android:id="@+id/bEqual"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bExp"
        android:layout_alignBottom="@+id/bExp"
        android:layout_alignParentRight="true"
        android:text="@string/equal" />

    <Button
        android:id="@+id/bDot"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bNum10"
        android:layout_alignBottom="@+id/bNum10"
        android:layout_toRightOf="@+id/bNum10"
        android:text="@string/dot" />

    <Button
        android:id="@+id/bExp"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/bDot"
        android:layout_alignBottom="@+id/bDot"
        android:layout_marginLeft="14dp"
        android:layout_toRightOf="@+id/bDot"
        android:text="@string/exp" />

</RelativeLayout>

How do I fix this?

Answer 1

Using Linear Layout will best option in the XML. Like this:

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

     <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.15" />

     <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.15" />

       // Other buttons and texview in similar way. Total sum of android:layout_weight values need to be 1.
  </LinearLayout>

It seems you are more interested to do it in TableLayout and 6 buttons and 1 TextView in each row. I would you do change things in xml in this way:

<TableLayout
            android:id="@+id/tableLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:shrinkColumns="*"
            android:stretchColumns="*" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal" >

                <Button
                    android:id="@+id/button1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_span="3" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_span="3" />

                    // Other buttons and texview in similar way

            </TableRow>      

Answer 2

@vipul mittal has the answer if you do not need to set it programmatically. However, since you asked "what am I doing wrong" also, you do not set Button widths using dp - it's pixels.

So, when you get the display metrics just divide the pixels by 6 like this:

button.setWidth((int) (displayMetrics.widthPixels/6));

Answer 3

Use linearlayout and weight to display 6 buttons with equal width.

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

     <Button

        android:layout_height="wrap_content"
        android:padding="10dip"
        android:layout_weight="1" />

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


  </LinearLayout>