Android question about TableLayout and ellipsis - android

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.

Related

TableLayout enforce text in one line

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).

Place Button just after end of TextView in multilline TextView?

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.

How to force a TableRow to wrap_content?

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.

How would I center this for the android

I am trying to center two Text Views horizontally so that are next to each other at the top of the screen. I am doing this because one of the TextViews will be larger than the other. Here is my code
<TableRow
android:layout_gravity="center">
<TextView
android:layout_column="1"
android:padding="3dip"
android:gravity="right"
android:text="open" />
<TextView
android:padding="3dip"
android:gravity="left"
android:text="Ctrl O" />
</TableRow>
So you want your views next to each other and in the center of the screen like this?
| View1|reallylongView2 |
Generally try to avoid table rows unless you actually want to have a table. If you want what I've shown above, the best thing to do would be to have a single text view, particularly since the order of the text might need to change if you ever internationalize your app.
Otherwise try a relative layout parent, with a centered horizontal linear layout child, which in turn contains both of your text views like so:
<RelativeLayout
...
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
<TextView ... />
<TextView ... />
</LinearLayout>
</RelativeLayout>
Otherwise you need to clarify what you're looking for. A screenshot, or ascii art would be helpful.
I didn't quite get your question bit is this what you are looking for:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:text="open" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="3dip"
android:text="Ctrl O" />
</TableRow>
</TableLayout>

Table layout in android -Row sizing

I have a table layout as shown.I have a lot of rows.
I have used android:strechcolumns="1" to strech the second column of each row.This is the case everywhere.
But in the fifth row I have 2 fields.I want them to occupy equal space.The row size should be same as that of the previous row.I want the overall size of the rows to remain the same as that on the screeshot.Also I have indicated in the screenshot the boundary within which all rows should lie .
How can this be done?
<TableRow>
<TextView
android:gravity="right"
android:paddingTop="10dip"
/>
<Spinner
android:id="#+id/depot_name_spinner"/>
</TableRow>
<TableRow>
<TextView
android:text="#string/product_name"
android:paddingTop="10dip"
android:gravity="right"/>
<Spinner
android:id="#+id/product_name_spinner"
/>
</TableRow>
<TableRow>
<TextView
android:text="#string/date"
android:gravity="right" />
<Button
android:id="#+id/date_button" />
</TableRow>
<TableRow>
<TextView
android:text="#string/measure_ltr"
android:gravity="right"
/>
<EditText
android:id="#+id/ltr_text"
android:layout_width="50dip"/>
<TextView
android:text="#string/measure_qts"
android:gravity="right"
/>
<EditText
android:id="#+id/qts_text"
/>
</TableRow>
Thanks
You can add not only TableRow to the table. Just use a simple LinearLayout and put all raw content into it. I think it must solve your problem.
EDIT: Also, you can add the LinearLayout with all widgets to a TableRow and set LinearLayout's android:layout_span=2:
<TableRow>
<LinearLayout
android:layout_span="2">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/measure_ltr"
android:gravity="right"/>
<EditText
android:id="#+id/ltr_text"
android:layout_width="50dip"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/measure_qts"
android:gravity="right"/>
<EditText
android:id="#+id/qts_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</TableRow>
I haven't tried it, but hope it will work.
Try using android:weight. This will divide the remaining space once the layout is laid out in which ever way you want. I mean you can define the proportion of space which each of your view should use. Look into this example below.
<TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
<TableRow>
<LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
android:layout_height="wrap_content" android:weightSum="100"> // Mention Weightsum as 100 so that its easy to split among your views.
<TextView android:id="#+id/row1Label"
android:layout_width="0dip" android:layout_weight="60" // This will occupy 60% of the remaining space
android:layout_height="wrap_content">
</TextView>
<TextView android:id="#+id/row1Label"
android:layout_width="0dip" android:layout_weight="40" // This will occupy 40% of the remaining space
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</TableRow>
<TableRow>
<LinearLayout android:layout_width="fill_parent" android:orientation="horizontal"
android:layout_height="wrap_content" android:weightSum="100">
<TextView android:id="#+id/row2Label"
android:layout_width="0dip" android:layout_weight="60" // This will occupy 60% of the remaining space
android:layout_height="wrap_content">
</TextView>
<TextView android:id="#+id/row3Label"
android:layout_width="0dip" android:layout_weight="40" // This will occupy 40% of the remaining space
android:layout_height="wrap_content">
</TextView>
// You can more views and distribute the space accordingly....
</LinearLayout>
</TableRow>
...........
With this you can achieve something like this
You can split the Table row area in whichever way you want. This can done using only Linear Layout as other layouts don't have this options of weights. I have used this methodology extensively to create complex views. Hope it helps you.

Categories

Resources