Why Spannable with icon inside is not displayed correctly ("obj" box is shown instead)?

Question

I want to display an icon within text inside an EditText. I am using the following code snippet:

Html.ImageGetter imageGetter;
Spanned cs;
imageGetter = new Html.ImageGetter() {
        public Drawable getDrawable(String source) {
            Drawable d = getResources().getDrawable(R.drawable.icon);
            d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
            return d;
        }
    };

     cs = Html.fromHtml("<img src='" + getResources().getDrawable(R.drawable.icon) + "'/>", imageGetter, null);

It was taken from this answer: https://stackoverflow.com/a/7200218/930835

then it's used this way:

editable.clear();
editable.insert(0,(leftPartString+" "+cs+" "+rightPartstring));
editText.setText(editable);

R.drawable.icon corresponds to an xml file with a svg inside:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/icon"
>
<svg code here.../>
</svg>
</selector>

I adapted it from other drawable files found in the directory.

When the application runs I get a strange symbol instead of the desired icon, that is a box with "obj" text inside.

How to get the right visualization?

`(leftPartString+" "+cs+" "+rightPartstring)` – That's implicitly calling `toString()` on the `Spanned`, so you get a flat `String` instead of the formatted text. You can either include those other `String`s in the HTML, somehow, or use another method to add that image inline, like just using `ImageSpan` directly, which is what `Html.fromHtml()` is using. — Mike M., Nov 26 '19 at 15:09
@Mike M. I was noticing that the Editable methods just want char sequences, so what is the purpose of the Spannable? How is it intended to work? — P5music, Nov 26 '19 at 15:27
I should also mention that the `getResources().getDrawable(R.drawable.icon)` call in the HTML is pointless, and a needless resource lookup and image load. You can put whatever you want there – like some random text – since the `ImageGetter` is only dealing with that one thing. — Mike M., Nov 26 '19 at 15:29
Spans are how text is decorated in Android. They're basically like invisible markup, in object form. `Spanned` and `Spannable` are two text types that can have spans attached to them. All span-capable types are `CharSequence`s, as are `String`s, `CharBuffer`s, `StringBuilder`s, etc. It's just a very "generic" way of referring to text, so that, e.g., you can pass all sorts of different things to `EditText`. — Mike M., Nov 26 '19 at 15:33
@Mike M. I just want the icon to be displayed within the EditText. Don't you have a answer with working code? — P5music, Nov 26 '19 at 15:35
Here ya go: https://drive.google.com/file/d/1AVyB2XmUiAE4k9cHYc2sL6eNRa_lTXZr/view?usp=drivesdk. — Mike M., Nov 26 '19 at 15:45
@Mike M. my xml for drawable has to be wrong because the ImageSpan in your code seems to be blank (I get its dimensions = -1) — P5music, Nov 26 '19 at 16:00
I wasn't really sure what that snippet meant. Last I knew, ` — Mike M., Nov 26 '19 at 16:08
@Mike M. I have a svg file that I copied the svg element into the drawable. — P5music, Nov 26 '19 at 16:12
@Mike M. Sorry, I copied an entire svg element, that is not the right way. I created a new vector asset in the drawable folder and imported the svg, that was transformed into a vector resource. Now it works. If you want to write an answer with this explanation and your code I will accept it. — P5music, Nov 26 '19 at 17:12

Why Spannable with icon inside is not displayed correctly ("obj" box is shown instead)?

0 Answers0