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.
Related
I have created a table view inside of a list view in Android studio (see following code) and for various reasons I have used a text view and a checkbox as separate elements rather than just having the checkbox and attaching the text. The problem is the text is on the left of the screen/table but the checkbox is essentially centred where as I want it to be at the far right hand side.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_above="#+id/Button1"
android:id="#+id/scrollView"
android:background="#drawable/list">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:layout_width="fill_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/Maths"
android:id="#+id/Maths"
android:layout_column="1"
android:textColor="#ffffff" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/MathsCheck"
android:layout_column="2"
android:buttonTint="#00ffff"
android:onClick="MathsClicked"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/History"
android:id="#+id/History"
android:layout_column="1"
android:textColor="#ffffff"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HistoryCheck"
android:layout_column="2"
android:onClick="HistoryClicked"
android:buttonTint="#00ffff" />
</TableRow>
</TableLayout>
</ScrollView>
There are in reality a lot more of these text view and checkboxes but you get the idea. I have tried using padding and margins but that doesn't really work as it will work ok on some devices displays but I have to hard code it which isn't ideal. I've also tried the gravity feature which for some reason doesn't seem to do anything.
Any help appreciated
Is there a particular reason why you are using a TableLayout?
If not, the desired output (TextViews left-aligned, Checkboxes right-aligned) can be easily achieved with a RelativeLayout within a vertical LinearLayout.
Your XML would then look like this (including only the relevant parts, all other attributes of your code will remain unchanged):
<ScrollView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
Edit:
If you want to place multiple checkboxes next to each other, you can do so by making their position reference each other, like this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_alignParentLeft="true" />
<CheckBox
android:id="#+id/checkbox1"
android:layout_alignParentRight="true" />
<CheckBox
android:id="#+id/checkbox2"
android:layout_toLeftOf="#id/checkbox1" />
<CheckBox
android:id="#+id/checkbox3"
android:layout_toLeftOf="#id/checkbox2" />
</RelativeLayout>
Note that you have to define the rightmost checkbox first, and the leftmost last.
Given the width of the checkboxes is identical (which they is in most cases), they will perfectly align.
I am trying to center two Text Views horizontally so that are next to each other at the top of the screen. I am doing this because one of the TextViews will be larger than the other. Here is my code
<TableRow
android:layout_gravity="center">
<TextView
android:layout_column="1"
android:padding="3dip"
android:gravity="right"
android:text="open" />
<TextView
android:padding="3dip"
android:gravity="left"
android:text="Ctrl O" />
</TableRow>
So you want your views next to each other and in the center of the screen like this?
| View1|reallylongView2 |
Generally try to avoid table rows unless you actually want to have a table. If you want what I've shown above, the best thing to do would be to have a single text view, particularly since the order of the text might need to change if you ever internationalize your app.
Otherwise try a relative layout parent, with a centered horizontal linear layout child, which in turn contains both of your text views like so:
<RelativeLayout
...
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal" >
<TextView ... />
<TextView ... />
</LinearLayout>
</RelativeLayout>
Otherwise you need to clarify what you're looking for. A screenshot, or ascii art would be helpful.
I didn't quite get your question bit is this what you are looking for:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TableRow
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:gravity="center" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:padding="3dip"
android:text="open" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="3dip"
android:text="Ctrl O" />
</TableRow>
</TableLayout>
Trying to make toolbar with two buttons on both sides and header between. Header should be ellisized when text is too long, like this:
[Button] Some quite long header te... [Button]
I've tried several solutions, but none help. My last try was something like this:
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#444"
android:stretchColumns="1">
<TableRow android:background="#777" android:minHeight="60dp">
<Button android:text="Left"/>
<TextView android:text="Center this very long text and ellisize"
android:background="#f00"
android:lines="1"
android:ellipsize="end"
android:scrollHorizontally="true"
android:gravity="center"
/>
<Button android:text="Right"/>
</TableRow>
</TableLayout>
But right button still goes away from screen...
UPDATE:
The solution is:
<RelativeLayout android:layout_width="fill_parent" android:layout_height="64dip">
<Button android:id="#+id/btnLeft"
android:text="Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button android:id="#+id/btnRight"
android:text="Right"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:text="Center this very long text and ellisize"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#f00"
android:lines="1"
android:ellipsize="end"
android:gravity="center"
android:scrollHorizontally="true"
android:layout_toLeftOf="#id/btnRight"
android:layout_toRightOf="#id/btnLeft"
/>
</RelativeLayout>
UPDATE 2: And the second solution using TableLayout:
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#444"
android:stretchColumns="1"
android:shrinkColumns="1">
<TableRow android:background="#777" android:minHeight="60dp">
<Button android:text="Left"/>
<TextView android:text="Center this very long text and ellisize"
android:background="#f00"
android:lines="1"
android:ellipsize="end"
android:scrollHorizontally="true"
android:gravity="center"
/>
<Button android:text="Right"/>
</TableRow>
</TableLayout>
Try using a relative layout instead of a table layout. If you set up the two buttons to be aligned left and right respectively, you can set the text field to span between the two buttons with the layout_alignRight and layout_alignLeft properties. You can look at the example code for the RelativeLayout given on the android development website.
While the RelaviveLayout should work, another option is to add a LinearLayout set to Horizontal. Set the three widgets to layout_width:"fill_parent" and give the TextView and both Buttons a weight (1 for each if you want them to equally take up three parts of the screen).
Not at a computer to test it right now, but should theoretically work.
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.
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.