Develop Reference

Xamarin listview outlining issues

I am trying to make a listview in Xamarin with 3 columns, having 1 imageview and 2 textviews. The imageview should be aligned to the left (working), the first textview should be in the middle, all aligned under each other, so that all first letters align. and the 3rd column should be all the way on the right and this is not working, the value of the 3rd column is directly set behind the text of the 2nd column.
The text should be centered verticaly in the row, but this is also not
working although the android:gravity="center_vertical" is set.
My code :
Listview with everything wrong displayed as shown :

Try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_item_menu"
android:layout_width="fill_parent"
android:layout_height="50dip">
<ImageView
android:id="#+id/layout_item_menu_image"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="20dp"
android:src="#drawable/menu_image" />
<TextView
android:id="#+id/layout_item_menu_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/layout_item_menu_image"
android:layout_marginRight="20dp"
android:text="TEXT 2"
android:textColor="#000000"
android:textSize="18sp" />
<TextView
android:id="#+id/layout_item_menu_text1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/layout_item_menu_image"
android:layout_toLeftOf="#id/layout_item_menu_text2"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:gravity="center"
android:text="TEXT 1"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>

Since there is problems with posting your code sample, I'll post this layout that may be adapted to your situation
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_outer"
android:layout_width="fill_parent"
android:layout_height="50dip">
<Button
android:id="#+id/btn_button1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
<RelativeLayout
android:id="#+id/rl_inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:gravity="center">
<TextView
android:id="#+id/tv_text1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center"/>
<TextView
android:id="#+id/tv_text2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/tv_text1"
android:gravity="right"/>
</RelativeLayout>
</RelativeLayout>

Layout with particular position of elements

I have this layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip"
android:background="#color/white"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/list_linearLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- titre food -->
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_titleT"
android:textColor="#color/black"
android:paddingLeft="5dp"/>
<!-- description food -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:id="#+id/souscarte_element_descT"
android:paddingLeft="5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- promo food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_promoT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#+id/souscarte_element_prixT"
android:paddingRight="5dp"/>
<!-- price food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_prixT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:paddingRight="5dp"/>
</RelativeLayout>
</FrameLayout>
The render of this is here :
The problem is on the red frame (on the picture): when I have a big content (a lot of words) the second price (in bottom) put himself to the bottom and the text comes between the 1st price and the 2nd..
I would like to know how make it just stay in bottom of 1st price, thank you!

Please check this.
hope this will helpful for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp"
android:background="#FFFFFF"
android:orientation="horizontal"
android:padding="5dip" >
<LinearLayout
android:id="#+id/list_linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_titleT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_descT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_promoT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_prixT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</FrameLayout>

You have set layout_align_parent_bottom="true" for the second price, that is why it stays fixed to the bottom. Change this to layout_below="#+id/souscarte_element_promoT".
Note that RelativeLayout allows its children to overlap, so it will draw children on top of other children if you aren't careful abotu how you arrange the children.

You could nest two layouts inside the main layout...
One for the texts, and the other one for the prices
Something like this:
<LinearLayout
android:orientation="horizontal" >
<LinearLayout <!--For the texts-->
android:layout_weight="1"
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
<LinearLayout <!--For the prices-->
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
</LinearLayout>

This is a rather hard thing to achieve as TextView doesn't provide this feature.
However, it's still possible.
You can extend TextView and when it's supposed to show the text (not sure in which method), you can measure the last 2 lines of text (maybe using Paint.measureText), in order to know where to place the price textView.
I say 2 because the first one would give you the Y coordinate, and the last one would tell you if it would wrap in case you put the textview, so that you will need to add extra to the Y coordinate.
Another possible solution is to put the price as a text inside the description TextView. In this solution you would also need to check the last line so that you could know if you need to create a new line or use the current one, and you need to know how many spaces to put.
Anyway, as others have mentioned, an easy way would be to simply always put the price below the text.

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.

How to make a dynamic table layout using XML

I want to make a table layout as shown in the below screen:
I am able to make this UI using the code. But I want to make it using the XML. I tried the following approach.
I tried to make a tablelayout which will have header and title. Now I have two row below title which is getting repeated.
So I made these two rows in separate XML file named row1 and row2. But Now I don't know how to integrate these three in the code. I know there is method LayoutInflater.inflate() to do it but I have two rows with diff kind of layout. See below the code for two rows. Please suggest What approach I should follow to make this kind of UI.
ROW_1.xml:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row"
android:minHeight="30dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/light_grey"
android:clickable="true"
>
<TextView android:id="#+id/tv1"
android:text="column1"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="#+id/tv2"
android:text="column2"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
<TextView android:id="#+id/tv3"
android:text="column3"
android:gravity="center"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
/>
</TableRow>
ROW_2.xml
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/table_row"
android:minHeight="30dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/light_grey"
android:clickable="true"
>
<TextView android:id="#+id/tv1"
android:text="short description text for Title 0 comes here"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:gravity="center"
android:textColor="#color/black"
/>
</TableRow>

from looking at the image i would suggest taking the list view route. have your layout as
R1Col1 R1Col2 R1Col3
R2 Looooong Col1
this should workout well for you.
UPDATE
you list_item.xml should look something like this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/wrapper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TextView android:id="#+id/tv1"
android:text="column1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/tv2"
android:text="column2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/tv3"
android:text="column3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView android:id="#+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="short description text for Title 0 comes here" />
</LinearLayout>
here is a sample to learn how to populate a ListView
ListView Example

Why you need two different rows ?
You can integrate two rows in one Xml and so you have only one row to add in table view

Align buttons inside a TableRow

I'm developing an Android application.
I have this:
<?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="200px"
android:orientation="vertical">
<TextView
android:id="#+id/gameTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:text="aaaaa"/>
<TextView
android:id="#+id/gameDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"
android:text="dddddd"/>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:text="#string/yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="#string/no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
I want to put playGame button in the left side of the center, and noPlayGame button in the right side of the center.
Now, both appear aligned to the left of the TableRow.
How can I do this?
Thank you.
EDIT: I've added the complete layout and the modifications suggested by Ashay.
2nd EDIT: THE SOLUTIONI've added to TableLayout the following: android:stretchColumns="0,1". Now the buttons are center aligned but they fill their entiry column!!!

I hope this helps:
<TableRow
android:id="#+id/tableRow1"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/stringtxt1"></Button>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:text="#string/stringtxt2"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"></Button>
</TableRow>

I posted my code, I hope that will help others users to resolve theirs problems (center content). I wanted to center two buttons in table row, here is my code, which solve this problem:
we indicate which columns will be stretched in prop android:strechColumns="a,b.." using comma-delimited list
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1" >
<TableRow>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button1Name"
android:layout_gravity="right"/>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button2Name"
android:layout_gravity="left"/>
</TableRow>
</TableLayout>
I hope that it will help. Sorry for my english :/

For centering a single button on a single row:
<TableRow android:id="#+id/rowNameHere"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center">
<Button android:id="#+id/btnDoStuff"
android:text="Do Stuff" />
</TableRow>
After reviewing the above answers, I grabbed a few things from each answer and this worked for me.

I added two dummy textviews to align my button in the center.
<TableRow>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
<Button
android:id="#+id/buttonSignIn"
android:text="Log In"
android:layout_height="wrap_content"
android:layout_weight=".50"
android:layout_width="0dip"
/>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
</TableRow>

Remove this line <TableRow android:layout_gravity="center">
And give android:fill_containt in table row for both height & width
EDITED ANSWER:
Well, I'm so sorry for the last posts spelling mistake
Through XML it seems impossible for TableLayout. You need to set this UI in code in oncreate.
In your java file you can set those by using below.
playGame.setWidth(ScreenWidth()/2-var);
noPlayGame.setWidth(ScreenWidth()/2-var);
here var can be used to set the distance between these 2 buttons like 10 or 30.
Also, your xml will get change as follows:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:text="yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<Button
android:text="no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</TableRow>
</TableLayout>
The method ScreenWidth() can be used for getting width of the screen through these methods
private int ScreenWidth() {
DisplayMetrics dm=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
String width=""+dm.widthPixels;
return Integer.parseInt(width);
}