0

I have a problem with setting the widths of columns in a TableLayout. This issue has been discussed previously:
How to set Table width and number of Columns in TableLayout in Android
How to get a TableLayout with 2 columns of equal width
Set equal width of columns in table layout in Android
but I'm not finding a solution. The code below does indeed set the columns to equal width, but it seems to key off the button in the 1st column. Since the text of the button in the 2nd column is wider, it displays in an untoward manner.

TableLayout

Desired display:

enter image description here 

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

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

        <Button
            android:id="@+id/menu1Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@color/darkgrey2"
            android:contentDescription="@string/menu1"
            android:onClick="click1"
            android:padding="60dp"
            android:text="hello"
            android:textColor="@color/white"
            android:textSize="32sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/menu2Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@color/darkgrey2"
            android:contentDescription="@string/menu1"
            android:onClick="click1"
            android:padding="60dp"
            android:text="hellothere"
            android:textColor="@color/white"
            android:textSize="32sp"
            android:textStyle="bold" />
    </LinearLayout>
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

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

        <Button
            android:id="@+id/menu3Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@color/darkgrey2"
            android:contentDescription="@string/menu1"
            android:onClick="click1"
            android:padding="60dp"
            android:text="hello"
            android:textColor="@color/white"
            android:textSize="32sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/menu4Button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:background="@color/darkgrey2"
            android:contentDescription="@string/menu1"
            android:onClick="click1"
            android:padding="60dp"
            android:text="hello"
            android:textColor="@color/white"
            android:textSize="32sp"
            android:textStyle="bold" />
    </LinearLayout>
</TableRow>

Edit: Removing margin and padding results in: enter image description here

Edit2: Removing only margin: enter image description here

Community
  • 1
  • 1
Al Lelopath
  • 6,448
  • 13
  • 82
  • 139
  • What would be the effect of setting `android:maxLines="1"` in the `Button`'s layout? – nKn Mar 03 '14 at 19:27
  • I added the line you suggested to the "hellothere" button and it indeed limits it to a single line, but results in that button reading as "helloth". All buttons in this scenario are the same width & height, fitted to just "hello" – Al Lelopath Mar 06 '14 at 19:00
  • That's probably produced by the `padding` attribute of your buttons. Since it's there for the 4 sides (left, right, top, bottom), it reduces the layout where you can show text and probably this is the problem and your text gets wrapped, because there's no enough space due to the margin to show the line. `60dp` is indeed a big reduction of space, try reducing it considerably and see what happens. – nKn Mar 06 '14 at 19:05
  • That will work to a certain extent, but is kind of a kluge. The `hellothere` button is being forced to the width of the `hello` buttons. As state in the original post, I want the `hello` buttons to increase in width to match the `hellothere` button – Al Lelopath Mar 06 '14 at 20:33
  • With the `layout_width` being set to 0dp, it appears that the width the buttons is determined by the width of the first button, the width of which is determined by the text. One way to solve this is to set the `layout_width` and `layout_height` to fixed values. – Al Lelopath Mar 06 '14 at 21:14

4 Answers4

1

Set the width of the TableRow to match_parent and it will exapand with it's child elemnts i.e. your buttons

<TableRow
   android:id="@+id/tableRow2"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" >

No sure if would like LinearLayout,

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

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

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="20dp"
        android:text="Hello" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="20dp"
        android:text="Hello There" />
</LinearLayout>

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

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="20dp"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="20dp"
        android:text="Button" />
</LinearLayout>

Atul O Holic
  • 6,692
  • 4
  • 39
  • 74
  • Thanks for your reply, but that did not make a difference. – Al Lelopath Feb 19 '14 at 14:44
  • You are using a margin of android:layout_margin="4dp", try removing this as well. and try on the padding too. – Atul O Holic Feb 19 '14 at 14:48
  • I removed the margin and padding on your suggestion. See above in original post – Al Lelopath Feb 19 '14 at 15:02
  • Try one by one. Looking at the screen, please add the paddings back. What happens when you remove only the margin? – Atul O Holic Feb 19 '14 at 15:04
  • See above for padding only – Al Lelopath Feb 19 '14 at 15:19
  • The only issue which i guess now is the textSize due to which the 2nd button's text is wrapped to next line causing its height to increase than the others. Can you try to reduce that to something that gets the text in a single line? and if Linear layout will do for you I have edited my answer to include that. – Atul O Holic Feb 19 '14 at 15:22
  • `Can you try to reduce that to something that gets the text in a single line` This is the problem in the original. Adding the LinearLayout does not help – Al Lelopath Feb 19 '14 at 15:30
1

I think you won't be able to achieve it this way since your widths are based on weight instead of width property. Since you're making depend all the buttons' width on the one that has the maximum width, to get this effect I'd use a different approach, based on choosing the max. width of all the buttons, and setting it to the rest of them. This would work if you have a static number of buttons or if you can keep track of every button you have within your layout. So, resuming:

1) Remove the layout_weight property from your layout.

2) You can either leave the layout_width property to 0 if you don't know the texts assigned to them at create view time, or set it to wrap_content otherwise.

3) In your onCreate() or kind of method, do something like this (this is a pseudocode):

int maxwidth = -1;

// Firstly, get the maximum width
for (Button myButton : my_buttons)
  if (myButton.getWidth() > maxwidth)
    maxwidth = myButton.getWidth();

// Assign it to all your Buttons
for (Button myButton : my_buttons)
  myButton.setWidth(maxwidth);
nKn
  • 13,691
  • 9
  • 45
  • 62
  • 1
    This works. The buttons are static such that only steps 1 and 2 are necessary, but its good to know how to do 3 should the need arise. – Al Lelopath Mar 07 '14 at 15:03
1

try this code :

<?xml version="1.0" encoding="utf-8"?>


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

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

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

            <Button
                android:id="@+id/menu1Button"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:contentDescription="Button"
                android:onClick="click1"
                android:padding="60dp"
                android:text="hello"
                android:textSize="32sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/menu2Button"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:contentDescription="Button2"
                android:onClick="click1"
                android:padding="60dp"
                android:text="hellothere"
                android:textSize="32sp"
                android:textStyle="bold" />
        </LinearLayout>
    </TableRow>
</LinearLayout>

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

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

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

            <Button
                android:id="@+id/menu3Button"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:onClick="click1"
                android:padding="60dp"
                android:text="hello"
                android:textSize="32sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/menu4Button"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="4dp"
                android:layout_weight="1"
                android:onClick="click1"
                android:padding="60dp"
                android:text="hello"
                android:textSize="32sp"
                android:textStyle="bold" />
        </LinearLayout>
    </TableRow>
</LinearLayout>

Vijju
  • 3,458
  • 1
  • 22
  • 20
0

You have to add in your button declaration the following :

android:singleLine="true"

Hope this helped :)

karvoynistas
  • 1,295
  • 1
  • 14
  • 30
  • I added the line you suggested to the "hellothere" button and it indeed limits it to a single line, but results in that button reading as "hellot...". All buttons in this scenario are the same width & height, fitted to just "hello" – Al Lelopath Mar 06 '14 at 18:48