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.
Related
I am designing a table using RelativeLayout in Android and add entries programmically. The result pleases me so far:
The layout code is
<RelativeLayout
android:id="#+id/table_relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
<TextView
android:id="#+id/example_column1_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/column1_header"
android:text=""
android:paddingLeft="8dip"
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column2_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column2_header"
android:text=""
android:visibility="gone"
/>
<TextView
android:id="#+id/example_column3_entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/column3_header"
android:paddingRight="8dip"
android:text=""
android:visibility="gone"
/>
</RelativeLayout>
However, as more entries are added, scrolling becomes necessary. So I wrap the whole thing in a ScrollView (as per this answer)
<ScrollView
android:id="#+id/table_scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true"
>
...
</ScrollView>
This of course has the result that the header row is hidden if I scroll down. I'd much rather have it outside the ScrollView but then I don't know how to align the entries with the header. Any ideas?
Try with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/column1_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/column1_header"
style="?android:attr/listSeparatorTextViewStyle"
android:layout_weight="1.0"
/>
<TextView
android:id="#+id/column2_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column1_header"
android:textSize="14sp"
android:textStyle="bold"
android:textAllCaps="true"
android:textColor="#color/textColor"
/>
<TextView
android:id="#+id/column3_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBaseline="#id/column1_header"
android:text="#string/column3_header"
android:textSize="14sp"
android:textAllCaps="true"
android:textStyle="bold"
android:paddingRight="8dip"
/>
</LinearLayout>
<ScrollView
android:layout_below="#id/header"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/scroll_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<rows>
</LinearLayout>
</ScrollView>
<RelativeLayout>
you don't want to do this with xml.
Because you simply can't reference views inside of an relativeLayout
from the outside and vice versa, to align things.
I had to deal with exactly your issue, as I implemented a in size selfadjusting tableView. The trick is to add all your textViews for one row into a ViewGroup (LinearLayout e.g, because easy to use with addView) and calculate the width of every row header in forehand. Than set the size of the viewGroups programmaticaly.
That's the key. This way, you can easily change your row header later and keep beeing flexible. Moreover you are not limited to a fixed size of columns.
calculate the width of the header
set the size of the (e.g) LinearLayouts for every row
add all TextViews to the LinearLayouts
This should hopefully help you. Answers to all the upcoming question for calculation sizes etc, should you find yourself on stackoverflow.
Greets, Steve.
OK, I found a solution: I'll have the three header TextViews outside of the ScrollView, as suggested by several commenters, and three additional "header" TextViews with the same parameters plus android:visibility="invisible" inside the ScrollViews. Those invisible TextViews will be used to align the visible entries.
Thanks for your answers!
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.
I am not able to upload the image to help me better.
How to acheive space on the top of the tablelayout (i.e)between the screen and the tablelayout. The table below is beginning without any space between the table and screen.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/my_shape_file"
android:layout_alignParentRight="true"
android:layout_marginTop="10dip"
android:stretchColumns="3">
<TableRow>
<TextView
android:layout_column="1"
android:gravity="left"
android:background="#drawable/todayhr"/>
<TextView
android:layout_column="2"
android:text="one"
android:gravity="center"
android:textColor="#000000" />
</TableRow>
<View
android:layout_height="1dip"
android:layout_width="wrap_content"
android:background="#ABABAB" />
<tablerow>
.................
........
Margins for a view are used by its container to position the view itself. Just include the TableLayout in a LinearLayout, and the latter will correctly add the margin.
I'm developing what I thought would be a simple listview row layout, but I'm having some trouble getting my views to line up properly. There are 4 TextViews all using layout_weight within a LinearLayout to size themselves appropriately. What I can't figure out, however, is how to align them consistently so that each TextView begins in the same position as the one above and beneath it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#AAAAAA88">
<TextView
android:id="#+id/quality"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="2"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_name"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_grade"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="5px"
/>
<TextView
android:id="#+id/route_distance"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_gravity="center_vertical|right"
android:textColor="#ffffff"
android:padding="2px"
/>
</LinearLayout>
My attempts to use the :gravity tag don't seem to work. Is LinearLayout the wrong approach here?
As an edit, I'm making some headway using specific width values in dips. Now to test if it looks the same across different screens.
The gravity distributes the remainder of space available after minimum constraints not the total space.
So align different row above and below make sure the remaining space is equal on each row. A good way to accomplish this is to hard-code the minimum space each element needs:
android:layout_weight="2"
android:layout_width="1dip"
Make each TextView on every row 1dip width and split the remaining space according to weight.
you can try using RelativeLayout. Try 4 of the TextViews to be placed relatively, 3 can have fixed width in dp and the 4th can take up rest of the available space. that way each textview will start at a fixed position every time.
something like:
<?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" >
<TextView
android:id="#+id/text_1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 1"/>
<TextView
android:id="#+id/text_2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_1"
android:gravity="left"
android:padding="8dp"
android:text="Text 2"/>
<TextView
android:id="#+id/text_3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_2"
android:gravity="left"
android:padding="8dp"
android:text="Text 3"/>
<TextView
android:id="#+id/text_4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/text_1"
android:layout_toLeftOf="#+id/text_3"
android:layout_alignParentLeft="true"
android:gravity="left"
android:padding="8dp"
android:text="Text 4"/>
</RelativeLayout>
I'm having trouble positioning the layout elements. The AutoComplete in my TableLayout and the button after it are expanding the TableRow larger than the width of the screen. Anyone have an idea why? Below is my XML code as well as a picture of the problem.
Thanks in advance!!
<?xml version="1.0" encoding="utf-8"?>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView android:id="#+id/installation"
android:textSize="14sp" android:completionThreshold="3" />
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/btn_find" android:text="#string/btn_find"></Button>
</TableRow>
<TableRow android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:id="#+id/error" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:paddingTop="20px"
android:textColor="#FF0000" />
</TableRow>
Picture of UI
For the ones that do need the table layout, use the layout_weight option. See code below.
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6sp" android:id="#+id/detailsLayout">
<TableRow
android:layout_width="wrap_content"
android:id="#+id/TableRow03"
android:layout_height="wrap_content">
<TextView
android:id="#+id/TextView06"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Detail 1"></TextView>
<TextView
android:text="#string/empty_value"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/sessionAudience"
android:layout_weight="1"></TextView>
</TableRow>
</TableLayout>
By default, widgets in a TableRow have android:layout_width="wrap_content". That does not limit you to the size of the screen -- wrap_content means "wrap content", not "wrap content but please don't go off the edge of the screen, if you don't mind".
In this case, you do not need to use a TableLayout and set of TableRows, since you do not have a table.
So, one approach is to use a RelativeLayout and have your AutoCompleteTextView use android:layout_alignParentLeft="true" and android:layout_alignParentRight="true". That will pin it to the outer edges of the RelativeLayout, which you can size with android:layout_width=fill_parent to fill the screen.