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.
Related
I need to place two EditText side by side, the left one can be multiline, but the right one has to be just one line. I've used a table layout with just one row but I have the following problem, the second column should have just the enough room to show the one single line text but not more. How can I achive that? Thank you very much
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<TableRow
android:background="#87F1FF"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxLines="3"
android:text="this can take more than a line"
android:textColor="#android:color/black"
android:textSize="40sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#454545"
android:maxLines="1"
android:text="May 25 - 10:00 pm"
android:textColor="#android:color/black"
android:textSize="20sp" />
</TableRow>
</TableLayout>
Make second TextView without android:layout_weight="1"
Just change in your 2nd TextView:
android:layout_width="0dp"
Instead of
android:layout_width="wrap_content"
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.
I want to align content of TableLayout in android.
I want align the table headers too. what changes needed in main.xml?
<TableRow android:layout_margin="0dp" android:id="#+id/myRow">
<TextView android:id="#+id/myTitle" android:layout_span="5" android:text="" android:layout_gravity="center_horizontal" />
</TableRow>
<TableRow> <TextView android:layout_span="5" android:background="#000000" android:height="1dp" android:gravity="right" />
</TableRow>
See the Developer pages about Common Layout Objects. You have to add gravity to your elements inside your table.
No problem since every table row has its own definition.
use the "gravity" to achieve your needs, for example
<TableRow android:id="#+id/tableRow1" android:layout_height="wrap_content" android:layout_width="fill_parent">
<TextView android:text="TextView" android:id="#+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="left"></TextView>
<TextView android:text="TextView" android:id="#+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center_vertical|center_horizontal"></TextView>
</TableRow>
the textbox in the first column is left-alligned
the textbox in the second column is centered vertically and horizontally
which turns out to look like this:
have a look here for gravity details
additionally you can use padding to preserve some space left/right/above/under
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.