Android Spannablestring Set Background Behind Part of Text

Android SpannableString set background behind part of text

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

Background color to spanableString in android

I have achieved the above UI like this.. Created Horizontal scroll-view and one Linear Layout with horizontal orientation. next during run-time depending upon the No of Strings in array i have added text view in Linear Layout that's it. The code is as below.

    private void addTextView(ArrayList<String> list,String whichLayout){

    for (int i = 0; i < list.size(); i++) {
         TextView textView = new TextView(getActivity());
         Spannable spValue = new SpannableString(list.get(i).toString());
         textView.setText(customeSpan.getRequiredFontTypeToText(spValue, tfHintTxtValue));
         textView.setTextSize(12.0f);
         textView.setTextColor(getResources().getColor(R.color.black));
         textView.setBackgroundResource(R.drawable.red_solid_background);
         LinearLayout.LayoutParams lllp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
         lllp.setMargins(0, 2, 10, 0); // llp.setMargins(left, top, right, bottom);
         textView.setLayoutParams(lllp);
         if(whichLayout.equalsIgnoreCase("hieghtWieght")){
             ((LinearLayout) heightWieghtLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("bodyType")){
             ((LinearLayout) bodyTypeLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("eyeHair")){
             ((LinearLayout) eyeHairColorLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("bestFeatures")){
             ((LinearLayout) bestFeaturesLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("personalStyle")){
             ((LinearLayout) personalStyleLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("zodiacSign")){
             ((LinearLayout) zodizcSignLinearLayout).addView(textView);
         }else if(whichLayout.equalsIgnoreCase("personalityTraits")){
             ((LinearLayout) personalityLinearLayout).addView(textView);
         }  
    }
} 

Android Spannablecontent With Rounded Corners

After reading getting a little help with a converter for C#, I came up with this. I still have some tweaking to do, but if anyone is also looking for a similar answer.

public class RoundedBackgroundSpan extends ReplacementSpan
{

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

    @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 + text.length(), bottom);
        paint.setColor(Color.CYAN);
        canvas.drawRoundRect(rect, 20, 20, paint);
        paint.setColor(Color.WHITE);
        canvas.drawText(text, start, end, x, y, paint);
    }
}

Set drawable background for a portion of TextView

Unfortunately, there is no out of the box Android solution for what you want to do as far as I know. You are on a good track looking at spans, but spans provide access to the underlying TextPaint and can only really do what TextPaint can do. The exception to this is the ReplacementSpan which replaces the spanned text in its entirety. Your ImageSpan is a ReplacementSpan, so the rectangle replaces all the text and doesn't overlay as one may expect.

There are several ways to do what you ask, but the one that I prefer is outlined in Drawing a rounded corner background on text. This would be a general solution but you would need to tweak it to make the rounded background your overline drawable.

If that looks like overkill to you, and your text view is simple enough and you know that the line you want to draw will not cross line boundaries, you could also look at this.

You could also create a simple View that is 2dp wide and as wide as you need to cover the letters with a background and move it programmatically. A custom View could also stretch over all of the text and you could draw the line in the view's onDraw() function. A TextView StaticLayout can help determine where in the custom view the line should be drawn.

I am sure that there are other solution available online if you search for them.

---

Related Topics