I have a table that has a border around each of the table rows. I get a problem with the border part when text in one column goes onto a second line, while the text in the other column doesn't. That causes the row that doesn't have the text wrapped onto a second line to be be shorter and a black background on the second line. How can I get that row to be the same height as the other row?
My code is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#013567" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:shrinkColumns="*"
android:stretchColumns="*" >
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<TextView
android:id="#+id/textView2"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="long text abc 123 ong tex ong tex"
android:textColor="#fff" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="short text"
android:textColor="#fff" >
</TextView>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<TextView
android:id="#+id/textView2"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="short text"
android:textColor="#fff" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_margin="2dip"
android:background="#013567"
android:gravity="center"
android:text="long text abc 123 ong tex ong tex"
android:textColor="#fff" >
</TextView>
</TableRow>
</TableLayout>
</ScrollView>
Example:
add following properties to your TextView, not your TableRow:
android:layout_height="match_parent"
or
android:layout_height="fill_parent" (deprecated)
Try setting the following to your TableRow:
android:layout_height="fill_parent"
add new line to the en of 'short text'
programmatically:
\n
xml:
simply hit enter in your XML code
There is a couple of ways to fix this,
add a FrameLayout around each text with android:layout_height="match_parent".
or
change your stying to be applied to the table, as e.g.
How to style a tablelayout in android
setting the Table background to be the blue and borders to be black.
Related
I have the following code:
<TableLayout
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shrinkColumns="*"
android:stretchColumns="*"
android:layout_marginTop="15dp">
<TableRow
android:id="#+id/table_row1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<Spinner
android:id="#+id/spinner_project2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
<TableRow
android:id="#+id/table_row2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Very long test"/>
<Spinner
android:id="#+id/spinner_project2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
</TableLayout
It basically creates the following table:
text [spinner]
very long text [spinner]
I want the spinner to be closer to the text so I don't want the row to be 50-50. Rather I want to take the longest string in the text and this will be the size of the cells in the first column. I will get:
text [spinner] <Nothing here>
very long text [spinner] <Nothing here>
I tried to use marginLeft but it didn't help. I also tried use weights=3 with inserting empty text-view. It looks better but then I get empty textview in the middle of the code. I'm sure there is a way to do it. How can I do it?
Use android:shrinkColumns="1" for TableLayout currently you are using * and remove android:stretchColumns="*"
<TableLayout
android:id="#+id/table"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:layout_margin="15dp"
>
<TableRow
android:id="#+id/table_row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
<TableRow
android:id="#+id/table_row2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_project2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Very long test"/>
<Spinner
android:id="#+id/spinner_2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawSelectorOnTop="true" />
</TableRow>
</TableLayout>
Note : Indexing starts from 0 i.e if you want to shrink/stretch 1st
column you have to use 0 not 1
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'm developing an Android application that contains some text view and button.
I need to put Button just after the text view. When my TextView is single line that's working well. But when using multiple line of text view , my button was placed to the end of line 1.
How to place button in the right position (after last line in the text view)?
after edit :
this is my xml , I use it in my code and generate it dynamically .
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow android:id="#+id/tableRow1" >
<Button
android:id="#+id/ayehPlace_btnCounter"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ayeh_counter"
android:text="" />
<TextView
android:id="#+id/ayehPlace_txtAyeh"
android:layout_width="wrap_content"
style="#style/ayehPlace_txt"
android:layout_height="wrap_content"
android:text="" />
</TableRow>
</TableLayout>
Use Table Layout instead .... It worked for me ..
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow
android:descendantFocusability="beforeDescendants"
android:focusable="true"
android:focusableInTouchMode="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your Text" />
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""/>
</TableRow>
</TableLayout>
Use RelativeLayout and add
android:layout_toRightOf="#+id/textviewid"
to Button.
I'll prefer to use table layout instead..it makes the UI uniform and adjusts automatically
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:shrinkColumns="1"
android:stretchColumns="1" >
<TableRow android:id="#+id/tableRow1" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Main Status "
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/retentionMainStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CLICK ME" />
</TableRow>
</TableLayout>
I think, you need to use TableLayout together with android:gravity="bottom". Try it.
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.
I'm having a problem with my TableLayout. It consists of two columns and multiple rows. When the TextView of the second column contains text of a longer width, then it pushes the TextView's in that column (in the below rows) off of the screen (to the right). Instead, I want it to keep the text to the left and have it cap the text at the end with an ellipsis. Can anyone see what's wrong with my XML?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#4096cc" >
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/roundedshape"
android:layout_margin="5dp"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="Server Name"
android:textStyle="bold"
android:padding="10dip" />
<TextView
android:id="#+id/txtServerName"
android:text=""
android:gravity="right"
android:ellipsize="end"
android:padding="10dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:text="Status"
android:textStyle="bold"
android:padding="10dip" />
<ImageView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="10dip"
android:src="#drawable/icon" />
</TableRow>
.
.
.
</TableLayout>
</LinearLayout>
Depending on which column you want to put the cap on, you need to use
android:shrinkColumns=x
in your TableLayout where x is the index of the column you want to ellipsize.
You probably also want to set the maxLines on the TextView to 1 as well.