Develop Reference

set the Columns of a TableRow in a TableLayout

well basicly I'm getting data from a database and I want to adapt this data in a kind of "DataGridView" on any other lenguaje, Basicly I have an GridView in a Main layout define like this:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gastoGridView"
android:stretchMode="columnWidth"
android:cacheColorHint="#00000000"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="1"
android:clipChildren="true"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip" />
other hand I have a second xml layout file than define every item(row) for this gridView, It is my item_gridview xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TableLayout android:id="#+id/TableLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TableRow android:id="#+id/TableRow01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal">
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/fechaAtt"
android:gravity="left"
android:layout_gravity="left" />
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/descpAtt"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal" />
<TextView android:text="#string/hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/saldoAtt"
android:layout_gravity="right" />
</TableRow>
</TableLayout>
Ok, basicly I'm getting 3 attributes from database, I already developed the adapter to this gridview, so I show the information on it, but not in the way I want, I'll try to explain you, Currently it's being show like this
| Date | Description | Price |
2014-11-17 any description it have 50.85$
I'm trying to divide my tablerow (width:fill_parent) on 3 sections(columns) I'm not sure if It's possible, because I'm not very involved on this subject, but I want to divide this tablerow on those 3 section, I want a small section on the left side of the row which will be my date, a large section in the center_horizontal wich will be my Description, and another left section wich will be my price, I'm not sure if you guys get my point but I want some like this.
| Date | Description | Price |
2014-11-17 Get the description Centered Here 50.85$
I've tried to use the layout_span and layout_column on every TextView, but I get a Null Pointer error which I don't understand, maybe I'm doing that in a wrong way.
Could you guys help me to get this style? I've been reading about it a lot, It's a kind of difficult because Android do not support an DataGridView tool as others lenguages do.
Thanks you beforehand, I really need it

Your difficulty stems from the fact that your trying to bring your concept of the DataGridView into Android which is problematic. What you really want to do use a ListView with a proper Adapter and Loader (use a Loader if possible).
Now, with a ListView what happens is it creates View for every row returned from the Cursor using the Adapter to create (inflate) this view and populate it (binding). This is useful since you can now think about each row as a set of three items and lay them out appropriately. I recommend just using the regular LinearLayout with the appropriate layout_weight set for your layout. You'll have to remember to set the LinearLayout to horizontal.
Edit:
For clarification. With LinearLayout you can specify in the layout.xml file the android:layout_weight parameter. This allows you to set 'relative' sizes (width or height depending on horizontal or vertical LinearLayout). Once you do this the android:layout_width is ignored but you should set it to 0dp. An Example:
<LinearLayout
android:id="#+id/row_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="#+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/description"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TextView
android:id="#+id/price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Now you have three TextView in a horizontal LinearLayout each with a weight set to 1. That would make them all equal size. You can adjust the weight values to change their relative sizes to each other and the parent width.

How to vertically align a textview field using table row in Android

I have this output
http://www.cubixshade.com/images/align_row.jpg
I want first field that is date field to be align vertically center?
and what should i use use to add some space from left or right in other field also?

You can set android:gravity="center_vertical" property to TableRow to align its child vertically center.
Also you can use android:layout_marginLeft property or android:layout_marginRiight property to put some margins from left and right similarly you can put margin to top and bottom using android:layout_marginTop or android:layout_marginBottom.
If you want to stretched column then you can use the android:layout_weight property to define the weight of the column.
For reference you can see below example with 2 columns
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:id="#+id/TextView01"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Male"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/etNoOfMale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Female"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/etNoOfFemale"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:inputType="number"/>
</TableRow>
</TableLayout>

U can use tags likes below in your xml file page to align proper, If can give the details about the pblm you are facing I can give more explanation.
android:layout_marginLeft="25dp"
android:layout_below="#+id/imageView1"
the first code gives a margin of 25dp from the left and the second code just align the filed to right under the imageview1.
And there is one another method
Just right click on the text-view or anything you added in the design page the select the Other properties->layout parameters->then select the item you need[it contains all the align properties.
Hope this one help you. Thank you

Uneven LinearLayout weight distribution

I have a LinearLayout that has four views layed out horizontally. The first and last component are a set size. For the inner two views I want to just share the available space 50:50. I set each to a weight of "1" but when the views are layed out, the views are different sizes depending on the content they hold.
Here is my layout xml for reference.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/status"
android:src="#drawable/white"
android:paddingRight="10dip"
android:layout_height="35dip"
android:layout_width="35dip">
</ImageView>
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/status"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/description"
android:text="Description"
android:layout_toRightOf="#id/name"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
<TextView android:id="#+id/time"
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/description"
android:textSize="25dip">
</TextView>
</LinearLayout>
Obviously these aren't the actual column names but I changed them for privacy purposes. This layout is used by a ListView which changes the text of each view to be whatever value its presented. The name and description fields should line up since they're both given 50% of the remaining screen but when the name is longer the description is shifted right. Why?

For the weight to be considered, the layout dimension needs to be 0 (zero)
<TextView android:id="#+id/name"
android:text="Name"
android:layout_height="fill_parent"
android:layout_width="0dip"
android:layout_weight="1"
android:textSize="25dip">
</TextView>
I also recommend making your weight add up to either 1 (and use fractions) or 100.
So instead of 1 you would use either 50 or .5 for each view. The LinearLayout code will work properly with any weight sum, but it gets difficult if you want to modify your view later with additional sections.
Also, if you are not using relative layout, get rid of the toRightOf attributes. Less is more.

Try to use android:layout_width="fill_parent" instead of "wrap_content" in all children of LinearLayout. Or better yet, make such a structure in your xml:
<RelativeLayout>
<ImageView /> # status, fixed width, alignParentLeft="true"
<TextView /> # time, fixed width, alignParentRight="true"
<LinearLayout> # layout_width="fill_parent", toLeftOf="time" toRightOf="status"
<TextView /> # name, use layout_weight="1"
<TextView /> # description, use layout_weight="1"
</LinearLayout>
</RelativeLayout>
This should do what you want. Using LinearLayout instead of RelativeLayout might work too, but you have to experiment a bit (I believe using nested Layout, as in my example, will do the work).

Android layout space-filling problem

I'm having real difficulty coming up with a layout which works. I have a view which fills the width of the screen. It contains three sub-views:
Some text
A number in parentheses after the main text
A button
The button is right-aligned, and the text items are left-aligned one after the other, as shown:
| Some heading text (n) [button] |
The problem is controlling what happens when the text is too long. I want it like this, so that the number is always visible just to the right of the main text. The main text should be truncated if needed so the other two views remain visible.
| Some very very long headin... (n) [button] |
The closest I've got which succesfully truncates the main text results in the (n) always being right-aligned next to the button even when the main text is short enough to fit. That's not what I want.
How would you approach this?
I'm not posting any of my current XML yet, lest it prejudice anyone's suggestions.

I do not believe there's any xml layout for that. My guess is that you will need to extend TextView and measure the text length inside onDraw(...), adjusting the text accordingly through some iteration (i.e., removing one character at a time until the text fits the canvas)
I just found another question that is quite similar to yours: Ellipsize only a section in a TextView . No other answer than ellipsize in the middle.
Another thoughts:
I'm wondering if it would work to have one textview with the main text (ellipsize left, wrap_content) and another with the number in the parenthesis (wrap_content), both inside an horizontal linear layout. That layout would be inside a relative layout and layout_toLeftOf the button, which would be wrap_content, layout_alignParentRight.
Does it make any sense? I don't have Eclipse now to test it myself. Not sure if the (n) textview would be lost behind the button or not with a long text.
Alternatively (and less interesting), you can setup one single relative layout with the two textviews all layout_toRightOf and the button aligned to the right (layout_alignParentRight) and set the max witdth ot the first textview (android:maxWidth). You would need to set up different layouts for different screens, though.
An example with a fixed max width that will work as required:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short text"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t1"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n1"
android:layout_toRightOf="#id/t1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt2"
android:layout_below="#id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="very long text that will not fit in any layout, regardless of the size of the screen"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t2"
android:layout_below="#id/bt1"
android:layout_alignParentLeft="true"
android:maxWidth="220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n2"
android:layout_below="#id/bt1"
android:layout_toRightOf="#id/t2"
/>
</RelativeLayout>

Try a linearlayout, set the weight of the text view as 1,, and set ellipsis as TruncateAt.MIDDLE. Check this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView android:id="#+id/text" android:layout_width="0dp"
android:layout_height="wrap_content" android:lines="1"
android:ellipsize="middle" android:gravity="left"
android:layout_weight="1" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

The key is the ordering of the items as this is the order they are measured, in order to ensure your button and (n) text get enough space in the overall layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_toLeftOf="#id/button"
android:text="(n)"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/middle"
android:layout_alignParentLeft="true"
android:gravity="left"
android:ellipsize="end"
android:text="Some really long to text to make this flow over"
android:lines="1"
android:maxLines="1"
/>
</RelativeLayout>

How to get a layout where one text can grow and ellipsize, but not gobble up the other elements on the layout

I've read some of the other posts here such as Two TextViews side by side, only one to ellipsize? but I'm still having an issue with my layout.
I have a list item layout, and I want each item in the list to look like this:
| (Expanding TextView #1) (TextView #2) (Image) |
TextView #2 and Image must always be visible.
Right now I'm using the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainItem"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:background="#drawable/myBackground"
android:onClick="onClick"
android:longClickable="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:layout_toLeftOf="#+id/myImage"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="14dp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="0"/>
<TextView
android:id="#+id/testView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:paddingRight="14dp"
android:onClick="onClick"
android:src="#drawable/myIcon"/>
</RelativeLayout>
I've read from the other posts that adding a layout_weight="1" to TextView#1 will force TextView #2 to be shown, and it does, but the problem is that this forces TextView #2 to be right-aligned because it causes TextView #1 to expand even when it doesn't have to.
I'm pretty stumped on this now... could anyone help? :)
UPDATE
I was able to fix this by using a TableLayout and the shrink & stretch column properties. By playing around with that it finally worked the way I wanted it to.

This will truncate (if needed) the text in the first TextView, keep the text in the second TextView as is, and align and keep as is the text in the third TextView.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:gravity="end"
android:maxLines="1"/>
</TableRow>
</TableLayout>

If I were you I'd probably switch the row from LinearLayout to RelativeLayout, that way you can align image to the parent right, butt textview2 right up next to it and just align textview1 with the parent left and it can resize without affecting the other two fields.