7

I have a TextView storing an address that is two lines long. The street goes on the first line and is bold. The city & state go on the second line and are not bold. I want the end of each line ellipsized if the individual text on that line runs over. I'm using a SpannableString to store the address because I want the street address to be bold and the city & state to be not bold.

Is there a way to do this that isn't a total hack without using two TextViews for each line?

Example outputs:

Ex:
123812 Washington A...
Schenectady New Yor...

Ex:
2792 Dantzler Boulev...
Charleston SC, 29406

Ex:
3 Main Street
Atlanta GA

3 Answers 3

22

I had the same problem and solved it by creating an EllipsizeLineSpan class. You can wrap each line that you want to ellipsize with it.

Example for marking up a spannable string with it:

SpannableStringBuilder textspan = new SpannableStringBuilder("#1.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n"+
    "Protect from ellipsizing #2.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n"+
    "#3.Lorem ipsum dolor sit amet, consectetur adipisicing elit\n"+
    "#4.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n");

// find  ellipsizable text (from '#' to newline)
Pattern pattern = Pattern.compile("#.*\\n", Pattern.CASE_INSENSITIVE);
Matcher matcher = pattern.matcher(textspan);
while(matcher.find()) {
    textspan.setSpan(new EllipsizeLineSpan(), matcher.start(), matcher.end(),   Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
}

EllipsizeLineSpan:

public class EllipsizeLineSpan extends ReplacementSpan implements LineBackgroundSpan {
int layoutLeft = 0;
int layoutRight = 0;

public EllipsizeLineSpan () {
}

@Override
public void drawBackground (Canvas c, Paint p,
                            int left, int right,
                            int top, int baseline, int bottom,
                            CharSequence text, int start, int end,
                            int lnum) {
    Rect clipRect = new Rect();
    c.getClipBounds(clipRect);
    layoutLeft = clipRect.left;
    layoutRight = clipRect.right;
}

@Override
public int getSize (Paint paint, CharSequence text, int start, int end,
                    Paint.FontMetricsInt fm) {
    return layoutRight - layoutLeft;
}

@Override
public void draw (Canvas canvas, CharSequence text, int start, int end,
                  float x, int top, int y, int bottom, Paint paint) {
    float textWidth = paint.measureText(text, start, end);

    if (x + (int) Math.ceil(textWidth) < layoutRight) {  //text fits
        canvas.drawText(text, start, end, x, y, paint);
    } else {
        float ellipsiswid = paint.measureText("\u2026");
        // move 'end' to the ellipsis point
        end = start + paint.breakText(text, start, end, true, layoutRight - x - ellipsiswid, null);
        canvas.drawText(text, start, end, x, y, paint);
        canvas.drawText("\u2026", x + paint.measureText(text, start, end), y, paint);

    }

}


}
3
  • Is it possible to add "Protect from ellipsizing" text to the end of line?
    – Yazon2006
    Commented Feb 18, 2019 at 20:46
  • Assuming that you have a char prefix like the # (say '^' ), then you would need to measure the text from after the '^' and subtract the measured value in the calculation the moves the 'end' point. Then do a last drawtext() for the remaining text after the '^'
    – dangVarmit
    Commented Feb 22, 2019 at 19:24
  • Good pattern for me is : Pattern.compile(".*\\n", Pattern.CASE_INSENSITIVE); Commented May 27, 2020 at 9:34
1

DangVarmit's answer helped me a lot but after using it for a while, I found out that sometimes the top offset of the text is randomly incorrect. Here is the part that needs to be replaced:

  override fun getSize(paint: Paint, text: CharSequence, start: Int, end: Int, fontMetricsInt: Paint.FontMetricsInt?): Int {
    fontMetricsInt?.let {
        it.top = paint.getFontMetricsInt(it)
    }
    return Math.round(paint.measureText(text, start, start))
}
-4

Try to set TextView ellipse size in your layout like:

 android:ellipsize="end"
2
  • 1
    but that will just ellipsize the end of the entire TextView. I want both lines ellipsized.
    – erin
    Commented Apr 4, 2013 at 5:15
  • 2
    @erin I don't think it's possible with a single TextView, put in severalTextViews is a trick.
    – Ali
    Commented Apr 4, 2013 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.