Wrap Text - Android TextView - android

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>

Related

TextView not wrapping to multiline

I have a TextView inside a LinearLayout which displays only a part of its text without wrapping to a newline and cannot understand why. It doesn't even show the ellipsis somewhere.
The TextView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/import_progress_text"
android:singleLine="false"
android:maxLines="4"
android:ellipsize="end"
style="#style/TxtDefault" />
i also tried layout_weight=0 along with layout_height=0 but still no luck. All the siblings inside the LinearLayout have layout_height=wrap_content set.
EDIT
Okay apparently it works when a fixed width is set, but neither with fill_parent nor with match_parent. Is this the expected behaviour?
Per Request the whole layout
Note that inside the FrameLayout is another invisible one, which is rather long
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
style="#style/ContentBody"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/progress"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/import_progress_title"
style="#style/TxtTitle" />
<TextView
android:layout_width="410dp"
android:layout_height="wrap_content"
android:text="#string/import_progress_text"
android:singleLine="false"
android:maxLines="4"
android:ellipsize="end"
style="#style/TxtDefault" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="410dp"
android:layout_height="wrap_content"
android:id="#+id/progress_bar_view"
android:progress="2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/import_progress_start"
android:id="#+id/progress_text_view"
style="#style/TxtSecondary" />
</LinearLayout>
</FrameLayout>
if you want to always show text in n lines, just add android:lines="n",
or if it's not work, try to use for your TextView ->
android:textAppearance="?android:attr/textAppearanceLarge"
hope that will help.
The code snippet is wrapping to multiline perfectly. There might be some problem with the IDE, which is not previewing properly. Test on a real device.

Textview is not truncating the text

Following is my .xml file
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical" >
...
<TextView
android:id="#+id/tvAlternateRoad"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:gravity="start"
android:text="Via A11"
android:lines="1"
android:textColor="#808080"
android:textSize="#dimen/fancy_dashboard_lable_size" />
</TableRow>
I am calling the above .xml file in my main view .xml as following,
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.85"
android:gravity="end"
android:orientation="horizontal" >
<TableLayout
android:id="#+id/layAlternateRoute"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:background="#drawable/bg_round_rect_alternate_route" />
</RelativeLayout>
http://i.stack.imgur.com/a0KRs.png
I am displaying a view on the screen which has above TableRow element. I am setting this Textview tvAlternateRoad's text value at run time. Sometimes when Text is large then it is moving outside the view. I tried to truncate it using android:ellipsize="end" from some S.O. posts but it seems it is not working now a days.
Can somebody help me on this?
Give paddingRight to text view. Also, text view has width wrap content and no relation with any other view. So your text view width can exceed the rounded corner background image as per text length. So either give some maxWidth value or relate it to some other views.
Edit
I just made this xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textview_Statu"
style="#style/text_view_login_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/more_txt3_margin_t"
android:background="#android:color/white"
android:ellipsize="end"
android:singleLine="true"
android:text="1234567890qwertyuiopasdfghjklzxcvbnm"
android:textColor="#color/blue_end" />
</LinearLayout>
In graphical view, It looks like this
Its working fine.
I have noticed that TextView will do different things with respect to wrapping and truncating depending on the container it's in. Try having the TableRow cell be, for instance, a FrameLayout. Then put your TextView inside the FrameLayout and see what happens.
Just use:
android:singleLine="true" and android:ellipsize="end"
and set a fixed width for your textview like "match_parent" or something in dp like "180dp" etc.
singleLine="true" needs your textview to have a fixed width which is not provided by "wrap_content".
A textview will only show ellipses at the end of its view's bounds and since you have set "wrap_content" your textview does not have any fixed bounds.
try this
tablelayout should be
<TableLayout
android:id="#+id/tbl"
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
the remaining part should be
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<TextView
android:id="#+id/tvAlternateRoad"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:ellipsize="end"
android:maxLines="1"
android:minLines="1"
android:layout_marginRight="#dimen/fancy_dashboard_max_speed_circle_strock_size"
android:gravity="start"
android:text="Via A11"
android:layout_weight="1"
android:textColor="#808080"
android:textSize="#dimen/fancy_dashboard_lable_size" />
Ok, after long effort I have solve the issue my self.
Logic:
fetch the screen size programmatically
int screen_width = context.getResources().getDisplayMetrics().widthPixels;
then I used 42% of the screen_width as maxwidth of textView
((TextView)alternate.findViewById(R.id.tvAlternateRoad)).setMaxWidth((int)(screen_width*0.42));
I have also set below values in xml
android:ellipsize="marquee"
android:maxLines="1"

Android LinearyLayout with TextView

I'm trying to build a LisView item that contains a LinearLayout with two TextView objects. The first object needs to be 70% of the screen width, and the other needs to be fixed at a 125dp width.
I am using the layout_weight attribute to tell the layout to make the first TextView scale appropriately, but I'm not able to get it working correctly. It looks fine in the preview box (Screenshot 1), but in the emulator the TextView on the left is always resized to just fit it's contents (Screenshot 2).
Does anyone know what's going on? I'm new to Android development, so this is just baffling me.
Thanks!
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:layout_weight="0"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
When providing a weight, width (or height for vertical layouts) has to be 0dp.
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:weightSum="10"
android:padding="6dip">
<TextView
android:id="#+id/TitleTextView"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="7"
android:gravity="center_vertical"
android:text="Headling Rent (pa)"
android:textSize="16sp" />
<TextView
android:id="#+id/ValueTextView"
android:layout_below="#id/TitleTextView"
android:layout_width="125dp"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:text="20,000"
android:textSize="16sp" />
</LinearLayout>
Ok, so I've figured out the issue. Two things were incorrect. First, the answer from #user3249477 is correct that I needed to include the weightSum in the parent LinearLayout tag, and I also needed to set the width to 0dp for the text elements that should scale.
However, this still did not actually fix my problem. The actual problem was the parent ListView had it's width and height set to "wrap_content" instead of "fill_parent". I updated this and the layout started to work.
I will am accepting the answer from #user3249477 as he was correct but I also would appreciate it if anyone could up-vote this answer as it did allow the fix above to work.
Thanks!

Android Layout Matching Peers

I'm looking for some insights into the layout system. Is anyone aware of a method in the Android layout system that allows peer View elements (meaning Views grouped together in the same container) to match their height and width attributes without creating an interstitial container just to govern their sizes?
For example: A layout has two TextView elements. The first should always wrap width to its text content, but the second should match the width of the first. A solution that WORKS is this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
However, I had to create a special container for both views to ensure they both match the width of whatever text is in the first; adding unnecessary complexity to the hierarchy. What I would love to know is if there is a layout attribute I could use to do something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textTwo"
android:layout_widthMatchPeer="#id/textOne" <!-- An attribute like this -->
android:layout_height="wrap_content"
android:layout_below="#id/textOne" />
</RelativeLayout>
Creating a hard dimension as the width is defeating the purpose of letting the primary element wrap. Is there a technique someone is aware of, or an attribute I've missed, to accomplish this? Could be in any standard layout, I just chose RelativeLayout as an example.
Additionally, what if the elements are not located near each other?
Cheers.
I think the RelativeLayout class can do what you want:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textTwo"
android:layout_alignLeft="#id/textOne"
android:layout_alignRight="#id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textOne" />
</RelativeLayout>
since the views are in a relatve layout, use android:layout_below="id/firsttv" android:layout_alignLeft="id/firsttv" and android:layout_alightRight="id/firsttv"

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>

Categories

Resources