Add Background to ImageSpan

Question

I am trying to add a background span to the image. I can set a background span to strings, but the imagespan in the same string does not show the background.

This is a sample of what I want, the selected part shows an image and text with background span.

This is what I have tried.

    public void applySpannable(String lastString, String changeString, int type, String title) {

        String totalString = lastString + title;
        Spannable spanText = new SpannableString(totalString);

        Drawable d;
        if (type == 1) {
            d = getResources().getDrawable(R.drawable.type_flag_bg_red);
        } else {
            d = getResources().getDrawable(R.drawable.type_flag_bg_red);
        }
        d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
        ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);

        ForegroundColorSpan foregroundSpan = new ForegroundColorSpan(Color.WHITE);
        BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(Color.RED);

        spanText.setSpan(foregroundSpan, lowerBound, upperBound, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        spanText.setSpan(backgroundSpan, lowerBound, upperBound, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        spanText.setSpan(span, lastString.length(), lastString.length()+1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);



        edtAddTask.setText(spanText);
        edtAddTask.setSelection(edtAddTask.getText().toString().length());
    }

The string appears with background, but transparent image is shown without background. I have set the lower index ahead of image position.

Thanks

Answer 1

You can't use BackgroundColorSpan and ImageSpan at the same time. The idea is creating an ImageSpan from LayerDrawable with background and image layers. Please look at the following code:

Try this for java:

Spannable span = new SpannableString("This is   ic launcher with background");
Drawable myImage = context.getResources().getDrawable(R.drawable.ic_launcher_foreground);
ShapeDrawable background = new ShapeDrawable();
background.getPaint().setColor(Color.RED);
LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{background, myImage});
layerDrawable.setBounds(0, 0, 64, 64);
ImageSpan image = new ImageSpan(layerDrawable, ImageSpan.ALIGN_BASELINE);
span.setSpan(image, 8, 9, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

textView.setText(span);

For kotlin:

val span: Spannable = SpannableString("This is   ic launcher with background")
val myImage: Drawable = resources.getDrawable(R.drawable.ic_launcher_foreground)
val background = ShapeDrawable()
background.paint.color = Color.RED
val layerDrawable = LayerDrawable(arrayOf(background, myImage))
layerDrawable.setBounds(0, 0, 64, 64)
val image = ImageSpan(layerDrawable, ImageSpan.ALIGN_BASELINE)
span.setSpan(image, 8, 9, Spannable.SPAN_INCLUSIVE_EXCLUSIVE)

textView.setText(span)

From this answer: https://stackoverflow.com/a/60150320/6160172