Develop Reference

TableLayout divide space without stretching the button?

I want the buttons to be their original size (wrap content), but them to be aligned in that logical cell location. Is that possible? I mean, I want something like,
|[Lisa]_______|[Simpson]____|
not,
|[___Lisa____]|[__Simpson__]|
or,
|[Lisa]|[Simpson]___________|
The following code did not work.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Lisa"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Simpson"/>
</TableRow>

TableLayout centers its items by default. What you can use is a LinearLayout, like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Lisa"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Simpson"/>
</LinearLayout>
This divides the space of the two buttons evenly, but does not center each button. This is how it looks.

android layout pushing views from the screen

For building an application, we have several lists.
the problem exists with a list item, which is custom, but very simple nontheless.
The format is:
This represents one list item with 2 textviews and one image view
Note that title and date are actually right underneath eachother and the image is on the right side, with center vertical as attribute.The image should NOT be in between the two text views
I will give the XML first and then explain the exact problem.
The XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>
</LinearLayout>
Problem:
In some sense, this layout displays everything exactly as the ascii representation.
What does NOT function correctly is when the text is becoming long. In cases where the text is long, but not long enough to take 2 lines, it just makes the imageview tiny.
In other cases, it just pushes imageview completely off the screen..
What I need is, when the length of either the date or the other textview is too long, to break to a new line. And ofcourse it needs to be a solution portable to all sorts of screen sizes.
I'm not a UI artist, so, apologies if I'm abusing layouts in a sense that they should not be used.
Aside help, tips and hints are also welcome!

I think your best bet is one simple RelativeLayout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:textSize="16dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/validationStateImg"
android:layout_alignParentLeft="true"
android:layout_below="#id/title"
/>
</RelativeLayout>
Snap the ImageView to the right side of the parent, and let the TextViews take the rest of the width, but aligned to the left of the ImageView.

Hope this helps:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_weight = "1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf dsfasdfasd asdfadsf dfasdfads asdfasdf"
android:textSize="16dip" />
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="dasdfasdfasdfasdfsadfsdf"
android:textSize="12dip" />
</LinearLayout>
<RelativeLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginRight="5dip" >
<ImageView
android:id="#+id/validationStateImg"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>

I think in this case you need a different layout, check this one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="wrap_content">
<TextView
android:textSize="16dip"
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:textSize="12dip"
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/validationStateImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"/>
</LinearLayout>

If you don't want your image shrinking then you need to give it a specific ratio of the real estate that its parent offers.
Specifically the LinearLayout that is its parent needs to have a weight_sum and then both the text and image need to have a layout_weight.
the weight should add up to the sum. The weight doesn't have to be a whole number and it's very important (and very counter intuitive) that the layout_width needs to be 0 (assuming that the two of them are sitting side by side)... so...
I'm removing all the extra stuff below that you need to add back in and just leaving the important parts....
<LinearLayout weight_sum=2 layout_height=fill_parent>
<TextView layout_weight=2 layout_height=0dp/>
<ImageView layout_weight=2 layout_height=0dp />
<TextView layout_weight=2 layout_height=0dp/>
</LinearLayout>
This will split the LinearLayout in half and the left side will be text (which will wrap if it can) and the right side will be the image. You can adjust this by setting the sum to 3 and splitting up the sides to 2 and 1 in which case the text will be 2/3 of the screen and the image 1/3. Or leave the sum at 2 and have the left be 1.3 and the right .7 for a similar effect.

Android layout ignoring gravity attribute

i have a couple list items. one works, the other one doesn't, and they both look fairly identical. this really should be a game of "spot the difference" in the XML files but i can't, for the life of me, figure out what's wrong. one of the list items is perfect and the other refuses to justify some of the Views on the right side of the layout, as indicated in the xml. here's what they each look like with code included.
^ list_view_item_2.xml:
<?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"
android:minHeight="?android:attr/listPreferredItemHeight"
android:padding="5dp">
<TextView
android:id="#+id/item_text_product"
android:textSize="20sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/item_text_total"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/item_text_units"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/item_text_uom"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/text_acog"
android:text="COG:"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/item_text_acog"
android:paddingLeft="1sp"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
This next layout is the one that works.
^ inventory_child_item.xml:
and the code looks identical, for the most part...
<?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"
android:minHeight="?android:attr/listPreferredItemHeight"
android:padding="5dp">
<TextView
android:id="#+id/ici_site"
android:textSize="20sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/ici_units"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/ici_uom"
android:paddingLeft="1sp"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/ici_total"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/ici_price"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>

You need to set match_parent to ListView
like:
android:layout_width="match_parent"

MoonlightCheese,
The only difference I can find in your code is: in the layout that works, your TextView named #+id/ici_uom has a padding of 1sp. For no logical reason can I figure out why this one line would cause any discrepancy as it should not. You will probably be likely to change this value or even add it to the other list and see no difference in behavior. As a result, I am inclined to believe that there is something different with the ListViews themselves or their relationships to their parents.
I say this because it is an absolute fact that your list items are justifying to the right. It seems that the width is off on a per element basis. The fill_parent in the LinearLayout should be the indicator. I would reanalyze the lists themselves and potentially how you are populating the views.
Without your parent markups, it is hard to say exactly what is happening and why. This is because we have no idea how you are using the ListViews, if there are more than one, if one is a ListActivity and the other is not, or even how they are nested.
Based on the difference in appearance, I assume that you have two ListViews and in order to further help you, we would need the markup for them and their parents. Without the markup, that is where I would tell you to look.
Hope this helps,
FuzzicalLogic

I think the gravity on the textviews doesn't mean anything in your case, because the layout_width is wrap_content, which means, the textview will be as big as your text is. What if you try adding android:layout_gravity="right" to your TableLayout.

Android - Align TextViews like a table row

I have a listview that I'm populating with data and I'm trying to get my layout to look like this:
Is there a way to create this while using Linear or Relative layouts? I tried with TableRows and while it works, it leaves a gap between for the column that divides the left from the right and it doesn't look appealing at all.
Not too sure where to get started....any help is greatly appreciated.

I am writing a sample for one line. Please refer that.
<LinearLayout
android:id="#+id/line1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="Issue Number"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:layout_width="0px"
android:gravity="right"/>
<TextView
android:text="6046"
android:layout_weight="1.0"
android:layout_height="wrap_content"
android:layout_width="0px"
android:gravity="left"/>
</LinearLayout>
You need to write this for all the lines and then enclose it under the parent LinearLayout with orientation vertical.

You can provide an xml to format each row in a ListView, whereby each row is a simple horizontal LinearLayout with two TextViews.
So something along the same lines as this:
http://www.heikkitoivonen.net/blog/2009/02/15/multicolumn-listview-in-android/
A more detailed article dealing with ListViews:
http://www.vogella.de/articles/AndroidListView/article.html

I created a layout with your firsts 2 rows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Issue Number:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date Received:"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_toRightOf="#+id/linearLayout1"
android:gravity="left"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6,046"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09/02/2008"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</RelativeLayout>

You can actually do this by placing a 2 LinearLayout inside a single parent LinearLayout. Where parent android:orientation should be horizontal. For each row you need to use this technique.
I did use this method for my project.

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.