So, I'm creating TableLayout from code by inflating layout files. I'm trying to get first row spanning over two columns, and each next row contains two TextViews: key and value. Problem is that value can be quite long, so I was playing around with settings android:stretchColumns, android:shrinkColumns in TableLayout xml. Now Key column and Value Column looks fine, but first, spanned, header is wider that screen size.
Current situation of my files looks like this:
tale_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<TextView
android:id="#+id/key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textStyle="bold"
android:layout_marginRight="10dp" />
<TextView
android:id="#+id/value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/black" />"
</TableRow>
header_row.xml:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/header"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_span="2"
style="#style/group_separator_style"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
</TableRow>
table.xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1" >
</TableLayout>
Any ideas, what could be the reason? Setting attributes clipChildren and clipToPadding to true didn't help.
It looks like setting android:stretchColumns="1" and android:shrinkColumns="1" solved the problem
Related
I'm using a tablelayout where each row has a number of checkboxes, and am using a custom adapter. The columns do expand evenly across the screen. On the parent layout I also have a series of "check/uncheck all" type checkboxes and they line up perfectly with the listview checkboxes. My issue is that I can't get column headings for the checkboxes to line up with the columns. They have a creep, either too much or too little, let alone working across both phone and tablet devices. My suspicion is that the problem may be caused by the text associated with the leftmost checkboxs, the only ones that have any text associated with them.
This is the xml for the check/uncheck all checkboxes and lines up fine.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/checkBox1"
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Ck all"
android:textSize="15dp"
android:textStyle="bold" />
<CheckBox
android:id="#+id/checkBoxI"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
<CheckBox
android:id="#+id/checkBoxII"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false" />
etc.
This is for column headings and does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:width="60dp"
android:gravity="center"
android:background="#color/light_blue"/>
<TextView
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/light_blue"
android:gravity="center"
android:text="I"/>
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"/>
etc
This is another attempt that also does not line up.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_blue"
android:orientation="horizontal">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_height="match_parent"
android:width="60dp"
android:layout_weight="1"
android:text=""
android:gravity="center"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"/>
<TextView
android:id="#+id/keycode"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:text="I"
android:textStyle="bold" />
<TextView
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/light_blue"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="II"
android:textStyle="bold" />
etc.
I've tried many different combinations of text alignment, and even tried to force the column widths which of course wouldn't work across devices. I've spent all day on this and still have no clue. Any help appreciated.
Ok, it was my stupidity. I had forgotten that I had left LinearLayouts around the table rows as I was cutting and pasting. After removing those Linearlayouts things lined up as expected. I did have to give the first column a textsize parm though, otherwise the variable width of the text associated with the leftmost checkbox messed up the alignment of the rest of the columns. I just had to make the textsize larger than any of the text in that column.
I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
The layout code is
<RelativeLayout
android:id="#+id/table_relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
<TextView
android:id="#+id/example_column1_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/column1_header"
android:text=""
android:paddingLeft="8dip"
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column2_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column2_header"
android:text=""
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column3_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column3_header"
android:paddingRight="8dip"
android:text=""
android:visibility="gone"
/>
</RelativeLayout>
However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)
<ScrollView
android:id="#+id/table_scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true"
>
...
</ScrollView>
This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?
Try with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
</LinearLayout>
<ScrollView
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scroll_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<rows>
</LinearLayout>
</ScrollView>
<RelativeLayout>
you don't want to do this with xml.
Because you simply can't reference views inside of an relativeLayout
from the outside and vice versa, to align things.
I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly.
That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.
calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts
This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.
Greets, Steve.
OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.
Thanks for your answers!
I am having an issue with a certain layout in one of my apps in which text is not showing correctly. I have 2 TextViews in each TableRow, and in some cases, the 1st TextView's text is being cut off and/or not displayed at all. The right (2nd set) of TextViews are populated programatically. I just set android:shrinkColumns="0" and seems to have fixed the problem on smaller-screen devices (emulator).
Here is my layout file
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:fillViewport="true">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:shrinkColumns="0">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"
android:gravity="center_horizontal"
android:text="#string/testHeader"
android:textSize="18sp"
android:textStyle="bold" />
<TableRow
android:layout_width="match_parent"
android:gravity="center">
<TextView
android:id="#+id/tvTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:padding="3dp"
android:singleLine="false"
android:text="#string/test1" />
<TextView
android:id="#+id/tvTest2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:padding="3dp"
android:singleLine="false"
android:text="text" />
</TableRow>
...... Similar setup in the rest of my layout...
This looks fine on all of my test devices, but a user showed me a screenshot, and the whole 1st set of textviews in each TableRow are barely, if at all, visible. It got worse after shrinking column 0. What could be causing this whacky issue?
I have a little problem with my table layout.
I have two columns
column1 | column 2
The column1 content is static and indicates a property e.g. "locations", "products".
The second column is populated using an adapter.
My problem is that the text view breaks the word in column1. I want the word of column1 to be displayed in exactly one line (enforce that the line does not break). And the size of the second column has to adapt.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:shrinkColumns="*"
android:stretchColumns="*"
>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="products"
android:padding="5dp"
/>
<TextView
android:id="#+id/newID"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Branche"
android:padding="5dp"/>
</TableRow>
</TableLayout>
I tried to set
android:singleLine="true"
However the device (S3) only shows the first few letters and ...
I also tried to set a layout_weight. However I was not able to fix this issue.
Thanks for your help
Try this code:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:shrinkColumns="*"
android:stretchColumns="*">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="products"
android:padding="5dp"/>
<TextView
android:id="#+id/newID"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:text="ancheBrrancheBraeBrancheBrancheBrancheBrancheBrancheBrancheBrancheBrancheBranche"
android:padding="5dp"/>
</TableRow>
</TableLayout>
If you use a layout_weight attribute, you should remeber about the fact that layout_width must be set with 0dp (in this case of course).
I am trying to build a really simple TableLayout, with 2 columns and an undeterminate number of rows.
In the first columns, I put a TextView, which MUST BE written on 2 lines :
<string name="param_period_data_rec_text">Période d\'acquisition des données\n(secondes)</string>
And in the second column, I put an EditText.
My problem is : the EditText's height is about 1 and a half lines of text, and the TableRows wraps around it, hiding the half of the second line of the TextView.
Of course, I would like the TextView to be displayed completely. How should I do?
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:background="#color/blanc"
android:orientation="horizontal"
android:padding="20dp" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/param_frequence_data_rec_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/param_period_data_rec_text"
android:textColor="#android:color/black"
android:textSize="20sp" />
<EditText
android:id="#+id/param_frequence_data_rec_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/param_period_data_rec_input"
android:textColor="#android:color/black"
android:textSize="20sp" />
</TableRow>
</TableLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/param_frequence_data_rec_text"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="#string/param_period_data_rec_text"
android:textColor="#android:color/black"
android:textSize="20sp" />
<EditText
android:id="#+id/param_frequence_data_rec_input"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="editText"
android:textColor="#android:color/black"
android:textSize="20sp" />
</TableRow>
update: textVeiw and editText width = 0dp, so that layout_weight="1" property can work
Try to set android:layout_height="wrap_content" to fill_parent in your TextView.
Try adding
android:minLines="2"
to the tag describing the widget that needs to have at least two lines. wrap_content (which you already have) should take care of the rest.