Reputation: 615
Android table layout formatting problems
I can not get my TableLayout to fit inside the screen when the text cell is large, despite the text wraps inside the cell.
This is my TableLayout. A simple two-rows, two-columns table. Left column cells are multiline. If the text of one of these cell is large enought to break in two lines, the column is stretched to fill the entire screen and the right columns is pushed out of the screen.
Why? How can I force the full table to stay inside the screen? Any hint is welcomed.
My TableLayout is the following:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<TextView
android:text="Account 4 with a very large name to see if it breaks on two or more lines"
android:singleLine="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
<TextView
android:text="$400.00"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
</TableRow>
<TableRow>
<TextView
android:text="Account 5"
android:singleLine="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
<TextView
android:text="$400.00"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</TextView>
</TableRow>
</TableLayout>
The code to display the layout is basic:
public class AccountBrowserTest
extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.setContentView(R.layout.accountbrowser_test);
}
}
Upvotes: 25
Views: 31117
Answers (10)
Reputation: 6331
You need to have a combination of layout weights handled nicely. Check the example below. All the views in the row should get the same width using layout_weight=1 and layout_width=0dp.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="*"
android:stretchColumns="*">
<TableRow
android:id="@+id/basicKeypadRow1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="T">
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="R">
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="Y">
</TextView>
</TableRow>
<TableRow
android:id="@+id/basicKeypadRow1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="R">
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="O">
</TextView>
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:text="W">
</TextView>
</TableRow>
Upvotes: 0
Reputation: 3890
Add android:stretchColumns and android:shrinkColumns to the TableLayout element:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:shrinkColumns="1">
The 1 values are the columns you want the changes to occur. You can specify more that one value like this:
android:stretchColumns="0,1"
or if you want the changes to happen to all you columns like this:
android:stretchColumns="*"
Please look here for detailed information: http://android-pro.blogspot.com/2010/02/table-layout.html
Upvotes: 40
Reputation: 1271
i had the same problem with my app and found the following solution:
<TableLayout
android:shrinkColumns="0"
android:stretchColumns="1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TableLayout>
This works fine with 2 Columns.
Upvotes: 8
Reputation: 51
Hope this code will help you.. public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:singleLine="false"
android:text="Account 4 with a very large \n name to see if it breaks \n on two or more lines" >
</TextView>
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="$400.00" >
</TextView>
</TableRow>
Upvotes: 0
Reputation: 6728
inside table layout use shrinkColumns property for columns you want them to be allowed to shrink for fitting
easiest way is:
<TableLayout
android:shrinkColumns="*"/>
to shrink all columns or you can write instead of " *" ,the column indices you want to shrink , which in your case will be
<TableLayout
android:shrinkColumns="0,1"/>
note that column indices start from zero , so the latest code allows first (index=0) and second (index =1) columns to shrink.
Upvotes: 5
Reputation: 46844
It might have to do with the wrap_content for the width of your multiline cells.
You could try a few ways of giving it a more explicit width... i.e., setting the width to 0, and giving all of the cells a layout_gravity = 1. That should cause each of the columns to take up an equal amount of width (or you can adjust if you want one to have more weight than the other).
Upvotes: 0
Reputation: 11
There is temporary fix, do:
android:stretchColumns = " (number of actual col) - 1 "
No solution here worked in my case.
Upvotes: 1
Reputation: 599
I had the same problem and solved it by adding
android:stretchColumns="0"
to the TableLayout element and setting
android:layout_width="0dp"
on the TextView that was too long.
Upvotes: 6
Reputation: 6591
You could also try manipulating stretchColumns and/or shrinkColumns in the TableLayout.
Upvotes: 0
Reputation: 20324
Disclaimer: I'm not really good with layouts, so I only played around a bit with some values, and this seemed to work (I cannot give you a good explanation of why though):
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow>
<TextView
android:text="Account 4 with a very large name to see if it breaks on two or more lines"
android:singleLine="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:text="$400.00"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.001"
/>
</TableRow>
<TableRow>
<TextView
android:text="Account 5"
android:singleLine="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:text="$400.00"
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.001"
/>
</TableRow>
</TableLayout>
Also note that I haven't tried this layout in an Activity, I only looked at it in the layout-view of the xml editor, but it looked fine there at least.
Upvotes: 0