Multiple RelativeSizeSpan on same line

Question

I'm trying to use two RelativeSizeSpan next to each other, but a big gap appears in between. See what I want to achieve and what I'm getting.

This is how I'm building the Spanned instance

    String formattedValue = "25%";
    SpannableStringBuilder ssb = new SpannableStringBuilder(formattedValue);
    ssb.append("\n");
    ssb.append(otherValue);

    int firstSpanEnd = formattedValue.length();
    ssb.setSpan(new RelativeSizeSpan(1.5f), 0, firstSpanEnd-1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    ssb.setSpan(new RelativeSizeSpan(0.3f), firstSpanEnd, firstSpanEnd+1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

And this is how I'm drawing it

  float maxTextWidth = getPaintCenterText().measureText(mText, 0, mText.length());

  TextPaint textPaint = new TextPaint(getPaintCenterText());

  mCenterTextLayout = new StaticLayout(mText, textPaint, (int) maxTextWidth, Layout.Alignment.ALIGN_NORMAL, 0.85f, 0, false);

  c.save();

  float centerY = center.y - totalheight;

  c.translate(center.x, centerY);

  mCenterTextLayout.draw(c);

  c.restore();

If I remove the second RelativeSizeSpan the gap is smaller, but it's still there.

Also, I've tried several Spanned flags, but none seem to have any effect.

Edit: mText field of my SpannableStringBuilder

[0] = '2' 48
[1] = '5' 46
[2] = '%' 48
[3] = '\n' 10
[4] = 'E' 69
[5] = 'x' 120
[6] = 'e' 101
[7] = 'r' 114
[8] = 'c' 99
[9] = 'i' 105
[10] = 's' 115
[11] = 'e' 101
[12] = ' ' 32
[13] = 'd' 100
[14] = 'a' 97
[15] = 'y' 121
[16] = 's' 115
[17] = '\u0000' 0
[18] = '\u0000' 0
[19] = '\u0000' 0
[20] = '\u0000' 0
[21] = '\u0000' 0
[22] = '\u0000' 0

Answer 1

Setting setTextAlign(Paint.Align.CENTER) on TextPaint might be interfering with your spans.

Instead, use Layout.Alignment.CENTER on the StaticLayout which should center the text as a whole.

mCenterTextLayout = new StaticLayout(mText, textPaint, (int) maxTextWidth, 
                          Layout.Alignment.ALIGN_CENTER, 0.85f, 0, false);

Answer 2

Check this code this is giving the proper output as per your requirement

editText=(TextView)findViewById(R.id.editText);
        editText.setTextSize(40);
        SpannableString span1 = new SpannableString("25%");
        SpannableString span2 = new SpannableString("25%");

        span1.setSpan(new RelativeSizeSpan(0.3f),  2, 3, 0);
        span1.setSpan(new RelativeSizeSpan(1.5f),  0, 2, 0);

        span2.setSpan(new RelativeSizeSpan(0.3f),  2, 3, 0);
        span2.setSpan(new RelativeSizeSpan(1.5f),  0, 2, 0);

        editText.setText(TextUtils.concat(span1," " ,span2));

Answer 3

firstSpanEnd has a value of 3 in your example.

The first RelativeSizeSpan would then be applied to the characters [0, 2] -> 25.

The second RelativeSizeSpan would be applied to the characters [3, 4] which is the \n not the % character.

ssb.setSpan(new RelativeSizeSpan(1.5f), 0, firstSpanEnd-1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
ssb.setSpan(new RelativeSizeSpan(0.3f), firstSpanEnd-1, firstSpanEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

should fix the issue but I guess there's an underlying layout bug that causes the space (the \n probably) showing before the %.