Android TableLayout width issue - android

I'm using TableLayout to display data.
Text of the TextViews of the right column will be set when activity calls onCreate().
Now, as you can see in the following image that my address text can be long and it should be wrapped.
So I set android:layout_width="wrap_content". but it still take a width of screen size to wrap data.
How can I overcome from this issue?
My xml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5px">
<TableRow>
<TextView android:text="Job#"
android:paddingRight="5px" />
<TextView android:id="#+id/DetailJobNo" />
</TableRow>
<TableRow>
<TextView android:text="Address"
android:paddingRight="5px" />
<TextView android:id="#+id/DetailAddress"
android:layout_width="wrap_content"
android:text="Address Address Address Address Address Address Address Address "/>
</TableRow>
</TableLayout>

Adding android:shrinkColumns="1" to TableLayout solves my issue.

Can you try setting setHorizontallyScrolling to the DetailAdress TextView to false?

#Vikas, its good that you have solved your problem.
BUt I would still recommend to use HorizontalScrollView for security purposes. If at all few chars are not visible, then horizontal scrollbar will help to manage that. XML text :
<HorizontalScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp" android:layout_marginBottom="10dp" >
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5px">
......
......
ADD YOUR ROWS
</TableLayout>
</HorizontalScrollView>
Its always better to take care of the unexpected.

Related

Wrap Text - Android TextView

Before someone says that I should google this, I want to point out that I did and then i tried all the different methods to see what would work and nothing did for me. So, now that ugly business is out of the way on with my questions.... :)
I cannot seem to get a text view to wrap for me. Dont know why. Here is my XML code for the layout. It is a table layout that will be used for a listview in another xml layout.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ot_color_priority"
android:layout_height="fill_parent"
android:layout_width="20dp"
android:gravity="center_vertical"/>
<RelativeLayout>
<TextView
android:id="#+id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textStyle="bold"/>
<TextView
android:id="#+id/ot_ticket_details"
android:layout_alignParentBottom="#id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="15dp"
android:scrollHorizontally="false"
android:ellipsize="none"
android:maxLines="10"
android:text="This is a long dang string that never wants to freaking wrap worth a crap!"/>
</RelativeLayout>
</TableRow>
</TableLayout>
The data that is in the textview just continues to write off the screen to the right. I cannot get it to wrap. The only way I can seem to get it to work is if I set a DP value to the layout_width. I dont want to do that because it will be used on different devices screen resolutions and I am afraid that may cause some problems later on.
So please someone help me :(
You should set android:shrinkColumns="1" to your TableLayout.
It will shrink the second column which is occupied by RelativeLayout.
It's probably your RelativeLayout which does not have any width specified, so it is defaulting to "WRAP_CONTENT" :
http://developer.android.com/reference/android/widget/RelativeLayout.html#generateDefaultLayoutParams()
I should also point out that inside that TextView you have a child with a "match_parent" width, but the relative layout will sit next to an element with a "20dp" width.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ot_color_priority"
android:layout_height="fill_parent"
android:layout_width="20dp"
android:gravity="center_vertical"/>
<!-- this is the problem, the layout has no parameters set -->
<RelativeLayout>
<TextView
android:id="#+id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textStyle="bold"/>
<TextView
android:id="#+id/ot_ticket_details"
android:layout_alignParentBottom="#id/ot_ticket_number"
android:layout_height="wrap_content"
android:layout_width="300dp"
android:layout_marginTop="15dp"
android:scrollHorizontally="false"
android:ellipsize="none"
android:maxLines="10"
android:text="This is a long dang string that never wants to freaking wrap worth a crap!"/>
</RelativeLayout>
</TableRow>
</TableLayout>

How can I align two EditText views when I do not know the amount of text ahead of time for both views?

I have two EditText views whose height I wish to align. The problem is that I cannot predict which view will have more text and hence using android:layout_alignTop and android:layout_alignBottom will not work. The layout I am experimenting with is below. I have already tried android:layout_alignTop and android:layoutAlignBottom but they do not yield satisfactory results.
Layout 1
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/text1"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="5dip"
android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl"
/>
<EditText
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/text1"
android:padding="5dip"
android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
/>
</RelativeLayout>
Figure for Layout 1: http://imgur.com/P6KV7.png
Layout 2 with android:layout_alignTop and android:layout_alignBottom
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/text1"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/text2"
android:layout_alignBottom="#+id/text2"
android:padding="5dip"
android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl"
/>
<EditText
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/text1"
android:padding="5dip"
android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
/>
</RelativeLayout>
Figure for Layout 2: http://imgur.com/x6fyI.png
But, if I were to change the text on the first EditText then some of the text in that box gets cut-off. See Layout 3 and Figure 3 below:
Layout 3
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:id="#+id/text1"
android:layout_width="200dip"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/text2"
android:layout_alignBottom="#+id/text2"
android:padding="5dip"
android:text="Text 1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl
1 bvhg hbjbj kjkbkj kjnjkn hlihj lklkkl ncksjcksn
lkslksldcsdc
the end"
/>
<EditText
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/text1"
android:padding="5dip"
android:text="Text 2 lasndklsa lkmsclslk klmsldmlk lksdl"
/>
</RelativeLayout>
Figure 3 for Layout 3 : (Sorry, cannot post more than two hyperlinks because of rep issues.)
Is there a way to align the heights of EditText views when the amount of text in either view is not known ahead of time?
Well, I have to say, this is the first time I've ever found a TableLayout useful. Note the text LOOKS cut off in the preview (as it's really big), but when you compile and run, you'll see that the text is scrollable. The TableView does all the tricky stuff for you. I think this will work for you.
Just realised that you want the textviews to look the same size also - that's easy - give them a transparent background and make the background of the table have the background.
EDIT - One more thing - due to a framework bug, I had to use this:
android:inputType="none"
android:editable="false"
to get the text both scrollable and non-editable. Also, a good point from #mandel - use "fill_parent" not "match_parent" if programming for android devices of an api level less than 8.
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:id="#+id/tableRow1"
android:gravity="center_vertical">
<EditText
android:inputType="none"
android:editable="false"
android:text="I have two EditText to align. The problem is that I cannot predict which view will have more tetText to align. The problem is that I cannot predict which view will have more text and hencem I have two EditText views whose height I wish to align. The problem is that I cannot predict which view will have more text and hence"
android:id="#+id/editText1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
</EditText>
<EditText
android:inputType="none"
android:editable="false"
android:text="I have two EditText views whose height I wish to alignhave more text and hence "
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></EditText>
</TableRow>
</TableLayout>

Indent bullet list in TextView

I have a TextView which I fill with text from a string resources in strings.xml. The string resource contains < li > elements to create a bullet list inside the TextView. My problem is that I want to control the indention of lines in the bullet list that span over more than one line. Default the text isn't indented past the bullet so it looks kind of ugly. Is it possible to do this with style parameters or to create bullets in some other way?
Thanks in advance.
edit:
Is it really answered? I don't have any problems producing the bullet list, as described in those links but I'm having problems getting the layout correct. The indentation is like this:
text that go beyond the width
of the line.
And I want the "of the line" to at least start indented as far as the text after the bullet. That's what I try to achieve.
I'm suprised that there seems to be noone with this problem. I mean, bullet list can't be that uncommon in about-dialogs, FAQ etc and a bullet doesn't have to contain too much text to span more than one row and run into this problem.
Anyway, I got to solve it like this for now:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/ScrollViewTipsLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TipsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_height="wrap_content"
android:id="#+id/TableLayout01"
android:layout_width="wrap_content"
>
<TableRow>
<TextView android:id="#+id/tvIngress"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#+string/tv_picking_content_ingress"
android:layout_span="2"
android:singleLine="false"
android:layout_weight="1"
/>
</TableRow>
<TableRow>
<TextView android:id="#+id/tvCleaningDot1"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningFirst"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_first"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
<TextView android:id="#+id/tvCleaningDot2"
android:layout_height="wrap_content"
android:text="•"
android:singleLine="false"
/>
<TextView android:id="#+id/tvCleaningSecond"
android:layout_height="wrap_content"
android:text="#+string/tv_picking_content_second"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="left"
android:singleLine="false"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
I use it to present static text in a bullet list so I don't bother to create the bullet + text dynamically in code. If anyone have any suggestion how to accomplish the same thing in a better way, please enlight me.
Btw, if going with the solution suggested in second link above:
android:text="<ol><li>item 1\n</li><li>item 2\n</li></ol>
The second, third etc. row in a bullet that span over more than one row won't get same indention as first line, which is quite ugly.
Thank you #Bjorn
You can also do something like bellow.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/point"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Text Here"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14sp" />
</LinearLayout>
The way I solved this problem was by using a RelativeLayout and marginLeft. The marginLeft will put a blank margin between it and the previous item.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarTrackVertical="#drawable/scrollbar_vertical_track"
android:scrollbarThumbVertical="#drawable/scrollbar_vertical_thumb"
android:scrollbarSize="12dip">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10sp">
<TextView
android:id="#+id/body_text3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="Main paragraph of text, before the bulleted list"
android:textSize="15sp" />
<TextView
android:id="#+id/type1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• First bullet"
android:textSize="15sp"
android:layout_below="#+id/body_text3"
android:layout_marginLeft="25dp" />
<TextView
android:id="#+id/type2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="3sp"
android:text="• Second bullet"
android:textSize="15sp"
android:layout_below="#+id/type1"
android:layout_marginLeft="25dp" />
</RelativeLayout>
</ScrollView>
Just trying to point out the key answer of the question:
to create an bullet list, use TableLayout with two columns for each row. One column for TextView of a bullet and the other one for the text
to make text TextView fill the rest empty TableRow and indented at new line, set the weight to 1. You can set the bullet weight to zero or just simply not set the bullet weight and let it empty
based on my experience, changing width parameter do not affect the text and the bullet. So you can leave it empty or set it to anything you want.
Example:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/bullet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/bullet"/>
<TextView
android:id="#+id/TextView01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="this is the text of a bullet list"/>
</TableRow>
</TableLayout>

Text wrap in TextView within a Tab

First off, sorry about the large screen. I am trying to get the text to wrap but am currently unable to do so. I have tried android:layout_width="fill_parent", android:scrollHorizontal="false", android:width="0dip" all of which suggested in another question. Does anyone have any idea how I can achieve text wrapping? Here's a sample of the xml:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_column="1"
android:gravity="center"
android:background="#drawable/lgrayborder"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:id="#+id/chatUser1"/>
<TextView
android:layout_column="1"
android:gravity="left"
android:background="#drawable/lgrayborder"
android:paddingLeft="5dip"
android:id="#+id/chatComm1"/>
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:gravity="center"
android:background="#drawable/lgrayborder"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:id="#+id/chatUser2"/>
<TextView
android:layout_column="1"
android:gravity="left"
android:background="#drawable/lgrayborder"
android:paddingLeft="5dip"
android:id="#+id/chatComm2"/>
</TableRow>
</TableLayout>
</ScrollView>
Update: I have tried setting attributes in the ScrollView, TableLayout, and TableRow in hopes that it would force the TextViews to wrap but to no avail. Still looking for a solution to this.
Have you already tried to use
android:maxEms="int"
in combination with ellipsize? This should solve your problems.
I had the same issue with TableLayout and fixed it by setting column shrinkable to "true" like this:
TableLayout tl = (TableLayout)findViewById( R.id.ViewTaskTable );
tl.setColumnShrinkable( 0, true );
HTH
You need to set the ellipsize property of the TextView.

How to create column-like layout for ListView rows?

I have a relative layout which looks like this:
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/nameText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:text="Symbol"
/>
<TextView
android:id="#+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/nameText"
android:gravity="right"
android:text="100"
/>
<TextView
android:id="#+id/changeText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_toRightOf="#+id/priceText"
android:gravity="right"
android:text="1.3"
/>
</RelativeLayout>
How can I get the company name to line up next to the number 1.3?
Following up on Mayra's answer, here's one way to do it using layout_weight:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableRow>
<TextView
android:id="#+id/left_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|center_vertical"
android:padding="5dip"
android:layout_weight="0"
android:text="Code"
/>
<TextView
android:id="#+id/middle_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:padding="5dip"
android:layout_weight="1"
android:text="Name of Company"
/>
<TextView
android:id="#+id/right_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:gravity="right|center_vertical"
android:layout_weight="0"
android:text="1.3"
/>
</TableRow>
</TableLayout>
It's not clear exactly what you want to have happen, but here are a few options:
If you want columns to be aligned across rows, you might consider using a TableLayout.
You can also use the "weight" atribute to affect what percentage of the screen each TextView takes up. If you assign a value of 1 on the left-most text view, and 0 on the other 2, this will cause the left text view to take up all the extra space, and thus push the middle text view to the right. This will probably cause the middle text view to look right aligned though. You could instead give the left one 20%, the middle one 50% and the right one 30% by assign 2, 5 and 3.
You could also just set an explicit size for the text views (in dpi), but this might be problamatic with different sized screens.
I agree with Mayra! Use the TableView, you'll get the formatting your looking for as well as keep almost all functionality of a ListView (scolling, and list oriented functionality)

Categories

Resources