Android SpannableString sets the background for a piece of text

Question

I would like to create something similar, as shown in this image:

I managed to create evertyhing using a SpannableStringBuilder, except for the orange rounded rectangle. I can set the background to this color with BackgroundColorSpan, but I cannot find a way to make it rounded. Any ideas how I can achieve this?

Thanks in advance!

EDIT: I am using Xamarin.Android, but here is my code:

stringBuilder.SetSpan(new BackgroundColorSpan(Application.Context.Resources.GetColor(Resource.Color.orangeColor)), stringBuilder.Length() - length, stringBuilder.Length(), SpanTypes.ExclusiveExclusive); 

Answer 1

I managed to solve my problem based on the pskink suggestion. Here is my class:

 public class RoundedBackgroundSpan : ReplacementSpan { public override void Draw(Canvas canvas, ICharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) { var rect = new RectF(x, top, x + MeasureText(paint, text, start, end), bottom); paint.Color = Application.Context.Resources.GetColor(Resource.Color.nextTimeBackgroundColor); canvas.DrawRoundRect(rect, Application.Context.Resources.GetDimensionPixelSize(Resource.Dimension.localRouteDetailsRoundRectValue), Application.Context.Resources.GetDimensionPixelSize(Resource.Dimension.localRouteDetailsRoundRectValue), paint); paint.Color = Application.Context.Resources.GetColor(Resource.Color.nextTimeTextColor); canvas.DrawText(text, start, end, x, y, paint); } public override int GetSize(Paint paint, ICharSequence text, int start, int end, Paint.FontMetricsInt fm) { return Math.Round(MeasureText(paint, text, start, end)); } private float MeasureText(Paint paint, ICharSequence text, int start, int end) { return paint.MeasureText(text, start, end); } } 

Usage example:

 var stringBuilder = new SpannableStringBuilder(); var stringToAppend = "hello world"; stringBuilder.Append(stringToAppend); stringBuilder.SetSpan(new RoundedBackgroundSpan(), stringBuilder.Length() - stringToAppend.Length, stringBuilder.Length(), SpanTypes.ExclusiveExclusive); 

Answer 2

If someone has problems with Roosevelt's sample code (I'm sure maybe because it's Xamarin.Android?), Here's a translation to a more basic version of Java java:

 public class RoundedBackgroundSpan extends ReplacementSpan { private static int CORNER_RADIUS = 8; private int backgroundColor = 0; private int textColor = 0; public RoundedBackgroundSpan(Context context) { super(); backgroundColor = context.getResources().getColor(R.color.gray); textColor = context.getResources().getColor(R.color.white); } @Override public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) { RectF rect = new RectF(x, top, x + measureText(paint, text, start, end), bottom); paint.setColor(backgroundColor); canvas.drawRoundRect(rect, CORNER_RADIUS, CORNER_RADIUS, paint); paint.setColor(textColor); canvas.drawText(text, start, end, x, y, paint); } @Override public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) { return Math.round(paint.measureText(text, start, end)); } private float measureText(Paint paint, CharSequence text, int start, int end) { return paint.measureText(text, start, end); } } 

And for use, the next code segment is taken from Activity and basically puts a nice rounded corner around each line of the tag, with a spatial buffer between each tag. Note that the commented line simply puts in a background color that does not create a nice view ...

 SpannableStringBuilder stringBuilder = new SpannableStringBuilder(); String between = ""; for (String tag : eventListing.getTags()) { stringBuilder.append(between); if (between.length() == 0) between = " "; String thisTag = " "+tag+" "; stringBuilder.append(thisTag); stringBuilder.setSpan(new RoundedBackgroundSpan(this), stringBuilder.length() - thisTag.length(), stringBuilder.length() - thisTag.length() + thisTag.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); //stringBuilder.setSpan(new BackgroundColorSpan(getResources().getColor(R.color.gray)), stringBuilder.length() - thisTag.length(), stringBuilder.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE); } TextView tv = new TextView(this); tv.setText(stringBuilder); 

Answer 3

just one word: replacing span