Develop Reference

Android BackgroundColorSpan breaking with lineSpacing less than 1

I have got a textView to which I do this:
textView.setLineSpacing(1f, .70f);
and then I would like to set a background color only to specific words in that textView so I've tried this:
spannableStringBuilder.setSpan(new BackgroundColorSpan(bckgndColor), spanStart, spanEnd, 0);
The problem is that because of the lineSpacing it shows up like this:
as opposed to if I were to comment out the lineSpacing() line I would have this, which is perfect:
Any ideas on how to solve this problem? I tried playing around with the BackgroundColorSpan object, but after digging in the code of the class I see that it only does this:
/**
* Updates the background color of the TextPaint.
*/
#Override
public void updateDrawState(#NonNull TextPaint textPaint) {
textPaint.bgColor = mColor;
}
and even if I override the class, I don't have access to any "Rect" value to adjust or ... dunno..
Any ideas are appreciated. Thank you !

With help from MikeM. this is what I was looking for:
public class FauxBackgroundColorSpan extends ReplacementSpan {
private final Rect tmpBounds = new Rect();
private final int backgroundColor;
public FauxBackgroundColorSpan(#ColorInt int color) {
backgroundColor = color;
}
#Override
public int getSize(Paint paint, CharSequence text, int start,
int end, Paint.FontMetricsInt fm) {
// Necessary for full length spans to be drawn.
if (fm != null) {
final Paint.FontMetricsInt pfm = paint.getFontMetricsInt();
fm.top = pfm.top;
fm.ascent = pfm.ascent;
fm.descent = pfm.descent;
fm.bottom = pfm.bottom;
}
// This would normally be the width of whatever we're replacing the text with, but
// we just return the text's own measure, since we're not really replacing anything.
return getTextMeasure(paint, text, start, end);
}
#Override
public void draw(Canvas canvas, CharSequence text, int start,
int end, float x, int top, int y, int bottom, Paint paint) {
// Draw the background.
final int previousColor = paint.getColor();
final Paint.Style previousStyle = paint.getStyle();
paint.setColor(backgroundColor);
paint.setStyle(Paint.Style.FILL);
final Rect bounds = tmpBounds;
paint.getTextBounds(text.toString(), start, end, bounds);
canvas.drawRect(x, y + bounds.top,
x + getTextMeasure(paint, text, start, end), y + bounds.bottom, paint);
paint.setStyle(previousStyle);
paint.setColor(previousColor);
// Draw the text we "replaced".
canvas.drawText(text, start, end, x, y, paint);
}
private int getTextMeasure(Paint paint, CharSequence text, int start, int end) {
return (int) (paint.measureText(text, start, end) + .5f);
}
}

Text is not fitting inside a replacement span in android

I want to create a custom background around a block of text. For that, I have come up with a replacement span. Everything was right but the background color is not correctly fitting up with each text. line spacing between each text is 48dp. If I increase the spacing, then the span color is increasing and vice versa. Currently, it seems like the bottom portion of the background fills until the starting of the next line.
This is the code I'm using:
public class CoolBackgroundColorSpan extends ReplacementSpan {
private final int mBackgroundColor;
private final int mTextColor;
private final float mCornerRadius;
private final float mPaddingStart;
private final float mPaddingEnd;
private final float mMarginStart;
// private float mheight;
public CoolBackgroundColorSpan(int mBackgroundColor, int mTextColor, float mCornerRadius, float mPaddingStart, float mPaddingEnd, float mMarginStart) {
super();
this.mBackgroundColor = mBackgroundColor;
this.mTextColor = mTextColor;
this.mCornerRadius = mCornerRadius;
this.mPaddingStart = mPaddingStart;
this.mPaddingEnd = mPaddingEnd;
this.mMarginStart = mMarginStart;
}
#Override
public int getSize(#NonNull Paint paint, CharSequence text, int start, int end, #Nullable Paint.FontMetricsInt fm) {
return (int) (mPaddingStart + paint.measureText(text.subSequence(start, end).toString()) + mPaddingEnd);
}
#Override
public void draw(#NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, #NonNull Paint paint) {
float width = paint.measureText(text.subSequence(start, end).toString());
RectF rect = new RectF(x - mPaddingStart + mMarginStart, top, x + width + mPaddingEnd + mMarginStart, bottom);
paint.setColor(mBackgroundColor);
canvas.drawRoundRect(rect, mCornerRadius, mCornerRadius, paint);
paint.setColor(mTextColor);
canvas.drawText(text, start, end, x + mMarginStart, y, paint);
}
I have used LineHeightSpan. But this background color has a movement. This will move to the corresponding text below with each interval of time, like in karaoke. So that time, the line heigth is also increasing.

Since no one has answered yet, I'll post the answer
public void draw(#NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, #NonNull Paint paint) {
float width = paint.measureText(text.subSequence(start, end).toString());
RectF rect = new RectF(x - mPaddingStart + mMarginStart, top, x + width + mPaddingEnd + mMarginStart,bottom);
paint.setColor(mBackgroundColor);
canvas.drawRoundRect(rect, mCornerRadius, mCornerRadius, paint);
paint.setColor(mTextColor);
canvas.drawText(text, start, end, x + mMarginStart, y + (YourValue), paint);
}
Here give the value in (YourValue, lets say 11)

ReplacementSpan cuts line in TextView

I need to use custom underline for text in my TextView.
I use ReplacementSpan to do this. But it cuts text at the end of the first line.
Here is my CustomUnderlineSpan class:
public class CustomUnderlineSpan extends ReplacementSpan {
private int underlineColor;
private int textColor;
public CustomUnderlineSpan(int underlineColor, int textColor) {
super();
this.underlineColor = underlineColor;
this.textColor = textColor;
}
#Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
paint.setStrokeWidth(3F);
paint.setColor(textColor);
canvas.drawText(text, start, end, x, y, paint);
paint.setColor(underlineColor);
int length = (int) paint.measureText(text.subSequence(start, end).toString());
canvas.drawLine(x, bottom, length + x, bottom, paint);
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
return Math.round(paint.measureText(text, start, end));
}
}
This is method to implement CustomUnderlineSpan for all text length:
public static Spannable getCustomUnderlineSpan(String string, int underlineColor, int textColor) {
Spannable spannable = new SpannableString(string);
CustomUnderlineSpan customUnderlineSpan = new CustomUnderlineSpan(underlineColor, textColor);
spannable.setSpan(customUnderlineSpan, 0, spannable.length(), 0);
return spannable;
}
And here is setting text to TextView:
String text = "Just text to underline Just text to underline Just text" +
"to underline Just text to underline Just text to underline Just text" +
"to underline Just text to underline Just text to underline";
textView.setText(getCustomUnderlineSpan(text,
Color.parseColor("#0080ff"), Color.parseColor("#000000")), TextView.BufferType.SPANNABLE);
Result:
Do you have any suggestions why text cuts at the end of line?
Thanks!

Solved
Using DynamicDrawableSpan instead ReplacementSpan solved the problem.
It seems ReplacementSpan just cant perform line breaks.
Here is my code:
public class CustomUnderlineSpan extends DynamicDrawableSpan {
private int underlineColor;
private int textColor;
private final float STROKE_WIDTH = 3F;
public CustomUnderlineSpan(int underlineColor, int textColor) {
super(DynamicDrawableSpan.ALIGN_BASELINE);
this.underlineColor = underlineColor;
this.textColor = textColor;
}
#Override
public Drawable getDrawable() {
return null;
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end,
Paint.FontMetricsInt fm) {
return (int) paint.measureText(text, start, end);
}
#Override
public void draw(Canvas canvas, CharSequence text,
int start, int end, float x,
int top, int y, int bottom, Paint paint) {
int length = (int) paint.measureText(text.subSequence(start, end).toString());
paint.setColor(underlineColor);
paint.setStrokeWidth(STROKE_WIDTH);
canvas.drawLine(x, bottom - STROKE_WIDTH / 2, length + x, bottom - STROKE_WIDTH / 2, paint);
paint.setColor(textColor);
canvas.drawText(text.subSequence(start, end).toString(), x, y, paint);
}
}

Adding a padding/margin to a Spannable

I'm using BackgroundColorSpan to customize parts of a TextView.
Here's the code I have:
String s = "9.5 Excellent!";
s.setSpan(new BackgroundColorSpan(darkBlue, 0, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
s.setSpan(new BackgroundColorSpan(darkBlue, 3, 14, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Which gives me the following result:
And this is what I'm trying to achieve:
As you can see, I'm trying to add a padding to the "9.5" as well as the "excellent!" Strings, but I've been unable to find a solution so far.
Is there a way to add this padding/margin to these Spannables?

You can use ReplacementSpan.
In your Activity:
TextView tagsTextView = (TextView) mView.findViewById(R.id.tagsTextView);
SpannableStringBuilder stringBuilder = new SpannableStringBuilder();
SpannableString tag1 = new SpannableString("9.5");
stringBuilder.append(tag1);
stringBuilder.setSpan(new TagSpan(getResources().getColor(R.color.blue), getResources().getColor(R.color.white)), stringBuilder.length() - tag1.length(), stringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
SpannableString tag2 = new SpannableString("excellent!");
stringBuilder.append(tag2);
stringBuilder.setSpan(new TagSpan(getResources().getColor(R.color.blueLight), getResources().getColor(R.color.blue)), stringBuilder.length() - tag2.length(), stringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tagsTextView.setText(stringBuilder, TextView.BufferType.SPANNABLE);
TagSpan.java
public class TagSpan extends ReplacementSpan {
private static final float PADDING = 50.0f;
private RectF mRect;
private int mBackgroundColor;
private int mForegroundColor;
public TagSpan(int backgroundColor, int foregroundColor) {
this.mRect = new RectF();
this.mBackgroundColor = backgroundColor;
this.mForegroundColor = foregroundColor;
}
#Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
// Background
mRect.set(x, top, x + paint.measureText(text, start, end) + PADDING, bottom);
paint.setColor(mBackgroundColor);
canvas.drawRect(mRect, paint);
// Text
paint.setColor(mForegroundColor);
int xPos = Math.round(x + (PADDING / 2));
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;
canvas.drawText(text, start, end, xPos, yPos, paint);
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end, FontMetricsInt fm) {
return Math.round(paint.measureText(text, start, end) + PADDING);
}
}

You can use RoundedBackgroundSpan.
It supports both padding and margin
It avoids the situation where the text is not centered in the TextView.
It can also set BackgroundColor for the text.
public class RoundedBackgroundSpan extends ReplacementSpan {
private final int mBackgroundColor;
private final int mTextColor;
private final int mPaddingLeft;
private final int mPaddingRight;
private final int mMarginLeft;
private final int mMarginRight;
/**
* Add rounded background for text in TextView.
* #param backgroundColor background color
* #param textColor text color
* #param paddingLeft padding left(including background)
* #param paddingRight padding right(including background)
* #param marginLeft margin left(not including background)
* #param marginRight margin right(not including background)
*/
public RoundedBackgroundSpan(int backgroundColor, int textColor,
int paddingLeft,
int paddingRight,
int marginLeft,
int marginRight) {
mBackgroundColor = backgroundColor;
mTextColor = textColor;
mPaddingLeft = paddingLeft;
mPaddingRight = paddingRight;
mMarginLeft = marginLeft;
mMarginRight = marginRight;
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end,
Paint.FontMetricsInt fm) {
return (int) (mMarginLeft + mPaddingLeft +
paint.measureText(text.subSequence(start, end).toString()) +
mPaddingRight + mMarginRight);
}
#Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y,
int bottom, Paint paint) {
float width = paint.measureText(text.subSequence(start, end).toString());
RectF rect = new RectF(x + mMarginLeft, top
- paint.getFontMetricsInt().top + paint.getFontMetricsInt().ascent
, x + width + mMarginLeft + mPaddingLeft + mPaddingRight, bottom);
paint.setColor(mBackgroundColor);
canvas.drawRoundRect(rect, rect.height() / 2, rect.height() / 2, paint);
paint.setColor(mTextColor);
canvas.drawText(text, start, end, x + mMarginLeft + mPaddingLeft,
y - paint.getFontMetricsInt().descent / 2, paint);
}
}

Android paddings for Spannable?

I use this code to set background for piece of text inside TextView:
s.setSpan(new BackgroundColorSpan(getResources().getColor(R.color.selection_blue)), prevIndex, index, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
But I need to set padding for this text too. Is it possible?

You can use ReplacementSpan.
In your Activity:
TextView tagsTextView = (TextView) mView.findViewById(R.id.tagsTextView);
SpannableStringBuilder stringBuilder = new SpannableStringBuilder();
SpannableString tag = new SpannableString("TEST");
stringBuilder.append(tag);
stringBuilder.setSpan(new TagSpan(getResources().getColor(R.color.blue), getResources().getColor(R.color.white)), stringBuilder.length() - tag.length(), stringBuilder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tagsTextView.setText(stringBuilder, TextView.BufferType.SPANNABLE);
TagSpan.java
public class TagSpan extends ReplacementSpan {
private static final float PADDING = 50.0f;
private RectF mRect;
private int mBackgroundColor;
private int mForegroundColor;
public TagSpan(int backgroundColor, int foregroundColor) {
this.mRect = new RectF();
this.mBackgroundColor = backgroundColor;
this.mForegroundColor = foregroundColor;
}
#Override
public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
// Background
mRect.set(x, top, x + paint.measureText(text, start, end) + PADDING, bottom);
paint.setColor(mBackgroundColor);
canvas.drawRect(mRect, paint);
// Text
paint.setColor(mForegroundColor);
int xPos = Math.round(x + (PADDING / 2));
int yPos = (int) ((canvas.getHeight() / 2) - ((paint.descent() + paint.ascent()) / 2)) ;
canvas.drawText(text, start, end, xPos, yPos, paint);
}
#Override
public int getSize(Paint paint, CharSequence text, int start, int end, FontMetricsInt fm) {
return Math.round(paint.measureText(text, start, end) + PADDING);
}
}