Develop Reference

Move View to "next line" if it doesn't fit

So, idea in this: I have two TextViews, first can expand whatever it wants, second always 5 chars (time). Problem is in that first TextView can easily push second out of the screen.
So, what I need is something like adjustable LinearLayout, or maybe some GridLayout that will move second TextView on some sort of second line if it doesn't fit parent.
For example you can watch at message bubbles in Viber and WhatsApp. Thanks for any advise.
Update 1
Here is XML that i have now (Only message part)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox"
android:layout_gravity="center_vertical"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|end"
android:gravity="center_vertical|end"
android:paddingLeft="8dp"
android:textSize="12sp"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
Update 2
So I added layout_weight to first TextView, that helped with my first problem, but now I have new one. This two TextViews are in LinearLayout which is in another LinearLayout with another TextView. Parent LinearLayout have width set to wrap_content so if top TextView will be bigger than 2 TextViews it will cause child LinearLayout to be less than it's parent, and 2nd TextView (from that 2) wouldn't be in the end of parent. But when child LinearLayout is bigger, all appears to be OK. I know it's complicated, so this is XML
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="0dp"
android:id="#+id/contentPanel"
app:bringToFront="#{true}"
android:orientation="vertical"
android:background="#{(mess.isMine?#drawable/chat_bubble_right:#drawable/chat_bubble_left)}">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text='#{!mess.authorRole.equals("Client")?(mess.authorRole + " - " + mess.author):mess.author}'
android:textColor='#{mess.authorRole.equals("Lawyer")?#color/colorPrimary:mess.authorRole.equals("Admin")?#color/red:#color/green}'
android:textSize="12sp"
android:id="#+id/author"
android:fontFamily="sans-serif-medium"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/messageBox">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_weight="0.7"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Medium"
android:textColor="#color/black"
android:text='#{mess.message}'/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:textSize="12sp"
android:gravity="bottom|end"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Small"
app:checkFit="#{false}"
android:text='#{Utils.parseMillsToHoursAndMins(mess.date)}'/>
</LinearLayout>
</LinearLayout>

The new approach for achieving such behaviour is using ConstraintLayout with Flow. Here is an example of usage:
<androidx.constraintlayout.helper.widget.Flow
android:id="#+id/socialsButtonsFlow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:flow_horizontalGap="8dp"
app:flow_verticalGap="4dp"
app:flow_wrapMode="aligned"
app:flow_horizontalStyle="spread_inside"
app:constraint_referenced_ids="vkButton,twitterButton,facebookButton,youtubeButton,instagramButton,odnoklassnikiButton,tiktokButton"
app:layout_constraintEnd_toEndOf="#id/socialsLabel"
app:layout_constraintStart_toStartOf="#+id/socialsLabel"
app:layout_constraintTop_toBottomOf="#+id/socialsLabel" />
For small screens it looks like this:

I am not sure this will help you or not but:
Use: https://github.com/ApmeM/android-flowlayout
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</org.apmem.tools.layouts.FlowLayout>
Inside FlowLayout you can put your view's and it will auto move to next line if not fit.

if your textviews in linearlayout you can add weightSum method

TextView and EditText overflow

I've got a need to display and TextView (label), EditText(Input) and TextView(suffix) in a line.
The issue I have is - if the label TextView is too long it The EditText and Suffix TextView and not drawn.
Here's my code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_weight="0"
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.." />
<TextView
android:padding="5dp"
android:layout_weight="0"
android:text="Suffix.."
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
So what I want is - even if the label is over 2-3 lines, for an EditText to appear followed by another TextView.
Any pointers would be appreciated.
Thanks!
Edit:
I've added some 'diagrams' so you can understand what I want to do a bit better.
The label to the EditText can be arbitrary length(2/3 lines), so whenever the label finishes I want an EditText to start (which is followed by another TextView showing a suffix..)
..
![This shows a 2 line label and TextView..]
Edit 2: Thanks for the responses guys!! I think #questioner has really understood what I want to do i.e. I want your 3 views to move to other lines so that they behave like they were one view - and as he has suggested i'll have to find a library for this!

How about this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="5dp"
android:text="Label"
android:id="#+id/label_text_view"
android:layout_width="100dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"/>
<EditText
android:layout_weight="1"
android:id="#+id/input_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColorHint="#color/dark_grey"
android:textColor="#color/black"
android:hint="text.."/>
<TextView
android:padding="5dp"
android:text="Suffix.."
android:layout_gravity="center_vertical"
android:background="#color/lite_grey"
android:id="#+id/suffix_text_view"
android:layout_width="100dp"
android:layout_height="wrap_content"/>
</LinearLayout>
If you want your 3 views to move to other lines so that they behave like they were one view - you should use external library for that.

Why not use a RelativeLayout instead of LinearLayout and then use android:layout_below="#+id/..." or android:layout_above="#+id/..." also android:layout_toRightOf="#+id/..." or android:layout_toLeftOf="#+id/..."

Set
android:layout_weight="1"
for each view so that they all occupy the same amount of horizontal space.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1">
Try this or please expand a little more.

Android layout space-filling problem

I'm having real difficulty coming up with a layout which works. I have a view which fills the width of the screen. It contains three sub-views:
Some text
A number in parentheses after the main text
A button
The button is right-aligned, and the text items are left-aligned one after the other, as shown:
| Some heading text (n) [button] |
The problem is controlling what happens when the text is too long. I want it like this, so that the number is always visible just to the right of the main text. The main text should be truncated if needed so the other two views remain visible.
| Some very very long headin... (n) [button] |
The closest I've got which succesfully truncates the main text results in the (n) always being right-aligned next to the button even when the main text is short enough to fit. That's not what I want.
How would you approach this?
I'm not posting any of my current XML yet, lest it prejudice anyone's suggestions.

I do not believe there's any xml layout for that. My guess is that you will need to extend TextView and measure the text length inside onDraw(...), adjusting the text accordingly through some iteration (i.e., removing one character at a time until the text fits the canvas)
I just found another question that is quite similar to yours: Ellipsize only a section in a TextView . No other answer than ellipsize in the middle.
Another thoughts:
I'm wondering if it would work to have one textview with the main text (ellipsize left, wrap_content) and another with the number in the parenthesis (wrap_content), both inside an horizontal linear layout. That layout would be inside a relative layout and layout_toLeftOf the button, which would be wrap_content, layout_alignParentRight.
Does it make any sense? I don't have Eclipse now to test it myself. Not sure if the (n) textview would be lost behind the button or not with a long text.
Alternatively (and less interesting), you can setup one single relative layout with the two textviews all layout_toRightOf and the button aligned to the right (layout_alignParentRight) and set the max witdth ot the first textview (android:maxWidth). You would need to set up different layouts for different screens, though.
An example with a fixed max width that will work as required:
<?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"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short text"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t1"
android:layout_alignParentLeft="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n1"
android:layout_toRightOf="#id/t1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click me"
android:id="#+id/bt2"
android:layout_below="#id/bt1"
android:layout_alignParentRight="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="very long text that will not fit in any layout, regardless of the size of the screen"
android:lines="1"
android:ellipsize="end"
android:id="#+id/t2"
android:layout_below="#id/bt1"
android:layout_alignParentLeft="true"
android:maxWidth="220dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="(n)"
android:lines="1"
android:id="#+id/n2"
android:layout_below="#id/bt1"
android:layout_toRightOf="#id/t2"
/>
</RelativeLayout>

Try a linearlayout, set the weight of the text view as 1,, and set ellipsis as TruncateAt.MIDDLE. Check this layout
<?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">
<TextView android:id="#+id/text" android:layout_width="0dp"
android:layout_height="wrap_content" android:lines="1"
android:ellipsize="middle" android:gravity="left"
android:layout_weight="1" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

The key is the ordering of the items as this is the order they are measured, in order to ensure your button and (n) text get enough space in the overall layout:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
/>
<TextView
android:id="#+id/middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:layout_toLeftOf="#id/button"
android:text="(n)"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/middle"
android:layout_alignParentLeft="true"
android:gravity="left"
android:ellipsize="end"
android:text="Some really long to text to make this flow over"
android:lines="1"
android:maxLines="1"
/>
</RelativeLayout>

How to get a layout where one text can grow and ellipsize, but not gobble up the other elements on the layout

I've read some of the other posts here such as Two TextViews side by side, only one to ellipsize? but I'm still having an issue with my layout.
I have a list item layout, and I want each item in the list to look like this:
| (Expanding TextView #1) (TextView #2) (Image) |
TextView #2 and Image must always be visible.
Right now I'm using the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainItem"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:background="#drawable/myBackground"
android:onClick="onClick"
android:longClickable="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:layout_toLeftOf="#+id/myImage"
android:layout_alignParentLeft="true">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="14dp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="0"/>
<TextView
android:id="#+id/testView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:paddingRight="14dp"
android:onClick="onClick"
android:src="#drawable/myIcon"/>
</RelativeLayout>
I've read from the other posts that adding a layout_weight="1" to TextView#1 will force TextView #2 to be shown, and it does, but the problem is that this forces TextView #2 to be right-aligned because it causes TextView #1 to expand even when it doesn't have to.
I'm pretty stumped on this now... could anyone help? :)
UPDATE
I was able to fix this by using a TableLayout and the shrink & stretch column properties. By playing around with that it finally worked the way I wanted it to.

This will truncate (if needed) the text in the first TextView, keep the text in the second TextView as is, and align and keep as is the text in the third TextView.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0"
android:stretchColumns="2">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:maxLines="1"/>
<TextView
android:layout_height="wrap_content"
android:gravity="end"
android:maxLines="1"/>
</TableRow>
</TableLayout>

If I were you I'd probably switch the row from LinearLayout to RelativeLayout, that way you can align image to the parent right, butt textview2 right up next to it and just align textview1 with the parent left and it can resize without affecting the other two fields.

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>