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
Related
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>
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.
My problem is to find best view configuration for my application that have a record in the listView.
My main.xml has this content:
<LinearLayout android:id="#+id/tabName" android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textConnection" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:minHeight="20dp"
/>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textTitle" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:minHeight="40dp"
/>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listRecord"
android:layout_width="match_parent" android:layout_height="match_parent">
</ListView>
</LinearLayout>
And the my actual row of ListView is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageBox"
android:layout_width="48px"
android:layout_marginTop="13dp"
android:layout_height="48px">
</ImageView>
<TextView
android:id="#+id/longText" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/num1" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/num2" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
/>
<TextView
android:id="#+id/num3" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
/>
</LinearLayout>
I tried with TableLayout but starting the application report an error in the bindView.
Can I write my XML code with only textView?
Consider that then I must add the caption of the ListView that have three image above each column with number.
Thank's.
I think the ListView is indeed your best option.
Can I write my XML code with only textView?
Yes, of course.
I don't see what is your problem actually. You should have an activity layout with the textConnection, the textTitle, then the 3 images aligned to the right (missing in your layout file), and the listview.
As for the row xml layout, I think it is OK! Just combine it with a simple cursor adapter in your java code, and you're done.
I am trying to make a relativeLayout with three textViews in a column on the left and two buttons next to each other on the right. The problem is, when the first textView is short "i.e. 3 or 4 characters" the textViews below get wrapped whenever they are longer then the first textView. I don't want this and want them to go all the way to the buttons if possible. I know I'm probably missing a parameter or something similar. Can anybody help me?
<LinearLayout android:id="#+id/LinearLayout02" android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/RelativeLayout_class1" android:visibility="visible">
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:id="#+id/TextView_class1_name" android:textColor="#color/Button_Text1"></TextView>
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_name" android:layout_height="wrap_content" android:layout_alignLeft="#+id/TextView_class1_name" android:layout_alignRight="#+id/TextView_class1_name" android:id="#+id/TextView_class1_building" android:textColor="#color/Button_Text1"> </TextView>
<TextView android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_building" android:layout_alignLeft="#+id/TextView_class1_building" android:layout_alignRight="#+id/TextView_class1_building" android:id="#+id/TextView_class1_room" android:textColor="#color/Button_Text1" android:layout_height="wrap_content" android:width="0dip" android:layout_width="wrap_content"></TextView>
<Button android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/Button_class1_map" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_map" android:layout_centerVertical="true"></Button>
<Button android:layout_toLeftOf="#+id/Button_class1_map" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="#+id/Button_class1_map" android:layout_alignBottom="#+id/Button_class1_map" android:id="#+id/Button_class1_edit" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_edit" android:layout_centerVertical="true"></Button>
</RelativeLayout>
</LinearLayout>
Why not just use a table layout? It might be a little easier to design because you are talking about columns and rows. The problem with relative is that its going to change based on the others, if you don't want this to happen then using a table layout with x rows and y columns will be a lot easier.
Along with this, using table layout allows you to specific zeroing-in in a particular column or having a particular element consume more than one column.
I have experienced something similar when creating a home screen widget. As widgets have limited options, a TableLayout could not be used. I reverted to something that translates as follows to your situation:
<?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="horizontal" >
<LinearLayout
android:id="#+id/RelativeLayout_class1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:visibility="visible" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="shrt" >
</TextView>
<TextView
android:id="#+id/TextView_class1_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="quite a bit longer" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1" >
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2" >
</Button>
</LinearLayout>
</LinearLayout>
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);
}