Android SpannableString set background behind part of text

Question

I would like to create something similar as seen on this image:

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

Thanks in advance!

EDIT: I'm 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);

Solution 1

I managed to solve my problem, based on pskink's 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);
    }
}

Example usage:

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

Solution 2

If anyone's having difficulty with Roosevelt's code sample (I sure was, maybe because it's Xamarin.Android?), here's a translation into a more basic Android java version:

    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 usage, the following code segment is taken from an Activity and basically puts a nice rounded-corner background around each tag string, with a spacial buffer in between each tag. Note that the commented out line just puts in a background color, which doesn't produce as nice a look...

    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);

Solution 3

just one word: ReplacementSpan

Comments

[pskink]

i am glad you solved this by yourself, its better lesson when you try something instead of taking the complete working code

[jason]

Hi Roosevelt. Can you please look into this stackoverflow.com/questions/32293229/… .ReplacementSpan is not working.

[dis.iz.peez]

awesome! Thanks for this!

[android developer]

This doesn't look like Java style... Anyway, can you check out this question: stackoverflow.com/q/41938378/878126

[anthony]

Great! And in my case the tags are in several lines, and how can I do to avoid that the background touch each other on top and bottom?

[jkincali]

Hi Anthony, I haven't tried it, but perhaps something like what is suggested at stackoverflow.com/a/6864017/4307281

[jkincali]

Anthony... also, in the RoundedBackgroundSpan .draw() method, you can adjust the top and/or bottom parameters when the RectF object is created. For example, play around with adding or subtracting 1 from those top and bottom parameters and see if the results yield something more suitable.