SpannableString with Image example

Question

I am looking for an example of how to build and display Android SpannableString with ImageSpan. Something like inline display of smileys.

Thanks a lot.

Do you also want help for aligning string span (top, left ,right or bottom placement) with the image span in the output SpanableString? — Abhinav Saxena, Dec 26 '19 at 02:53

score 129 · Accepted Answer · edited Aug 24 '21 at 20:45

129

Found the following and it seems to do the job:

public class TestActivity extends Activity { 
@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    TextView textView  = (TextView) findViewById(R.id.textview); 
    SpannableString ss = new SpannableString("abc"); 
    Drawable d = ContextCompat.getDrawable(this, R.drawable.icon32);
    d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); 
    ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE); 
    ss.setSpan(span, 0, 3, Spannable.SPAN_INCLUSIVE_EXCLUSIVE); 
    textView.setText(ss); 
}

edited Aug 24 '21 at 20:45

STG

305
3
11

answered Jul 05 '10 at 07:08

Asahi

13,378
12
67
87

4

`d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());` is key for Drawables that don't have intrinsic bounds. – Stephen Niedzielski Oct 27 '15 at 21:17
getDrawable function depreciated please update your answer – Ali Karaca Mar 17 '17 at 10:23
1

If I want to adjust the position the of ImageSpan inside the spannable .. string? Example I want to give a margin of 10 dp from bottom to the Imagspan. – Khay May 04 '17 at 07:24
1

@Hasan Ali Karaca: I suggest you use: `ContextCompat.getDrawable(context, R.drawable.my_drawable);` – Jorge Salas May 12 '17 at 23:14
1

@Khay I solved it by using VectorDrawable with more space at the bottom of viewport. It's not ideal, but seems like simpler solution than overriding ImageSpan and draw method. – Lukas Novak Oct 16 '17 at 13:43
1

@Khay I used " \n" in my string to place string below image. – Abhinav Saxena Dec 26 '19 at 02:56
@AbhinavSaxena I did'nt had the liberty to change string and use this hack, so had to find a work around. LukasNovak did the job for me. – Khay Jan 06 '20 at 14:50
It worked for me too. With Canvas integration, you can do everything. I suggested merely a minimal code. Thanks. – Abhinav Saxena Jan 06 '20 at 15:52
Be sure to use AppCompatResources for vectore compatibility prior to Lollipop. – Paul Lammertsma Nov 30 '20 at 20:34

score 20 · Answer 2 · edited May 23 '17 at 12:02

20

SpannableString + ImageSpan don't work in Android API 21 & 22 (I tested in Android Studio 1.2.1.1 in emulator), but if you do this:

TextView textView  = (TextView) findViewById(R.id.textview);
textView.setTransformationMethod(null);
...
textView.setText(ss);

SpannableString + ImageSpan will work.

I was inspired by this post: https://stackoverflow.com/a/26959656/3706042

edited May 23 '17 at 12:02

Community

1
1

answered May 31 '15 at 17:15

Dedkov Vadim

426
5
10

2

My device that runs API `22` displays `SpannableString` + `ImageSpan` fine. I'm using `VectorDrawable`s though... – Sakiboy May 19 '17 at 07:50
1

If text has flag `textAllCaps=true` you will lose it and it wont be uppercased if you reset transformationMethod – RadekJ Apr 20 '18 at 09:19

Akamaccio · Answer 3 · 2021-02-16T13:54:06.457

If anyone is still interested, I've created the a Java method to allow adding recursively a listed drawables to a text (set at the end to a textView) based on a "string to replace".

public void appendImages(@NonNull TextView textView,
                           @NonNull String text,
                           @NonNull String toReplace,
                           Drawable... drawables){
    if(drawables != null && drawables.length > 0){
        //list of matching positions, if any
        List<Integer> positions = new ArrayList<>();
        int index = text.indexOf(toReplace);
        while (index >= 0) {
            //add position
            positions.add(index);
            index = text.indexOf(toReplace, index + toReplace.length());
        }
        if(positions.size() > 0 && drawables.length >= positions.size()){
            textView.setTransformationMethod(null);
            SpannableString ss = new SpannableString(text);
            int drawablesIndex = 0;
            for(int position : positions){
                Drawable drawable = drawables[drawablesIndex++];
                //mandatory for Drawables
                drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                ss.setSpan(new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE), position, position+toReplace.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
            }
            textView.setText(ss);
        }
        else Timber.w("The amount of matches to replace is %s and the number of drawables to apply is %s", positions.size(), drawables.length);
    }
    else Timber.w("The drawables array is null or empty.");
}

Usage:

appendImages(myTextView, "This is a ^ simple ^ test", "^", drawable1, drawable2);

SpannableString with Image example

3 Answers3

Linked

Related