Set drawable background for a portion of TextView

Question

I have created a custom drawable for android:background attribute in a Textview. However I want the drawable background only for a certain part of the TextView and not the entire TextView

Work done till now:

Objective: I want to achieve something like this (i.e set background for only substring(1,2) of text):

This is how I have achieved my current result:

overline.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-2dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#030310" />
        </shape>
    </item>
</layer-list>

layout.xml

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/overline"
    android:textColor="#030310"
    android:text="Hello"/>

Here is what I have tried till now:

SpannableString ss = new SpannableString("Hello");

Drawable d = ContextCompat.getDrawable(((MainActivity) getActivity()).getApplicationContext(), R.drawable.overline);
d.setBounds(0, 0, 30, 30);

ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 1, 2, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

myTextView.setText(ss);

I do not understand ImageSpan quite well, and hence this is what I get after trying the above code (I am writing this code inside a Fragment loaded from MainActivity),

Answer 1

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.