How to display image in Android's TextView?

Question

I want to inset some images in the TextView. How to do it? Any idea

using first two answers, you aren't able to add images between text, only on top, bottom, left or right, but my solution allows you to add image at what index you want in the text — Buda Gavril, Apr 06 '11 at 06:45
See this article on how to [set compound drawables to a TextView](http://mgmblog.com/2010/06/04/setcompounddrawable-to-add-drawables-to-textview/) — Salil, Apr 06 '11 at 05:47

score 73 · Accepted Answer · edited May 20 '12 at 00:19

73

You can create a spannableString and place your image where you want in the TextView. Or you can use

ImageSpan is = new ImageSpan(context, resId);
text.setSpan(is, index, index + strLength, 0);

edited May 20 '12 at 00:19

Yellos

1,657
18
33

answered Apr 06 '11 at 06:39

Buda Gavril

21,409
40
127
196

1

won't this end up on an index out of bounds exception because the 3rd parameter, which is int end, is beyond length of the string? – Lendl Leyba Jul 30 '14 at 08:15
5

@LeiLeyba correct. the real answer would be: final Spannable text = new SpannableString(string + " "); text.setSpan(is, string.length(), 1 + string.length(), 0); . this will add an image to the end of the given string. – android developer Aug 14 '14 at 12:14
If u like to place an image wrapped with text, be aware that its not displayed if u span a "space"-character and the textview inserts a linebreak at that position. I guess the textview cuts all spaces in this case, which leads to the image not beeing displayed at that position. Use a dummy character like "x" which is not cut by the textview instead. – Kedu Apr 08 '15 at 13:43
What if the user was say writing into an EditText box and wanted to add a picture also inside. Let's say it was a note taking app and they wanted to add a picture to those notes? Same process? – SmiffyKmc Nov 25 '15 at 18:46
Here "text" is SpannableString – Atul Bhardwaj Jul 15 '16 at 07:44
@BudaGavril Can we use the device stored image with Textview like IMAGE..123456789..IMAGE.. please help me on it – Ravindra Kushwaha Jul 31 '17 at 09:31

score 62 · Answer 2 · answered Feb 05 '15 at 15:09

62

Much easier you can use SpannableStringBuilder from API 1

Example usage:

For API >= 21

    SpannableStringBuilder builder = new SpannableStringBuilder();
    builder.append("My string. I ")
            .append(" ", new ImageSpan(getActivity(), R.drawable.ic_action_heart), 0)
            .append(" Cree by Dexode");

    textView.setText(builder);

For API >= 1

    SpannableStringBuilder builder = new SpannableStringBuilder();
    builder.append("My string. I ").append(" ");
    builder.setSpan(new ImageSpan(getActivity(), R.drawable.ic_action_heart),
            builder.length() - 1, builder.length(), 0);
    builder.append(" Cree by Dexode");

    textView.setText(builder);

answered Feb 05 '15 at 15:09

Gelldur

11,187
7
57
68

Hey, Is it possible by anyway to add an edittext within textview as we have added image within textview like above? – Anudeep Mar 08 '17 at 06:09
@Anu You must try :) But probably answer will be YES. Checkout emojis in edit text :) – Gelldur Mar 08 '17 at 09:43
This looks interesting: https://github.com/hitanshu-dhawan/SpannableStringParser – Gelldur Jan 16 '20 at 08:40

score 25 · Answer 3 · answered Aug 21 '12 at 04:58

25

ImageSpan is = new ImageSpan(context, R.drawable.arrow);
SpannableString text = new SpannableString("Lorem ipsum dolor sit amet");
text.setSpan(is, 5, 5 + 10, 0);

answered Aug 21 '12 at 04:58

Pranita Patil

791
1
9
16

score 11 · Answer 4 · edited Oct 03 '12 at 12:05

11

do something like this.

textView.setCompoundDrawableWithIntrinsicBounds(yourImg, null, null, null);

edited Oct 03 '12 at 12:05

casperOne

73,706
19
184
253

answered Apr 06 '11 at 06:02

Ajay Singh

1,611
3
22
29

score 1 · Answer 5 · edited Oct 16 '14 at 15:24

make custom.xml

       <RelativeLayout
           xmlns:android="http://schemas.android.com/apk/res/android"
           android:layout_width="fill_parent"
          android:layout_height="wrap_content">
          <ImageView 
               android:id="@+id/thumbnail_view"
               android:src="@drawable/ic_launcher"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content" />

    <TextView android:id="@+id/message_view"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_toRightOf="@id/thumbnail_view"
               android:textSize="18sp"
               android:text="MyText" />
      </RelativeLayout>

then in main.xml , include this custom.xml

       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical" 
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"  
          android:gravity="center_horizontal">

   <include 
        android:id="@+id/customView"
         layout="@layout/custom"/>

           </LinearLayout>

This is my mainActivity.class

  package com.example.test;


 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.ImageView;
  import android.widget.TextView;


     public class MainActivity extends Activity implements OnClickListener {

   private String TAG = MainActivity.class.getSimpleName();
  ImageView img;
  ImageView img1;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    TextView txt = (TextView)findViewById(R.id.message_view);
     img = (ImageView) findViewById(R.id.thumbnail_view);
     img1 = (ImageView) findViewById(R.id.thumbnail_view1);

    img.setOnClickListener(this);
    img1.setOnClickListener(this);

}
@Override
public void onClick(View v) {
    if(v== img){
        // do something for img
    }
    else if (v== img1){
        //do something for img1
    }

}
}

score 0 · Answer 6 · answered Dec 05 '19 at 05:25

If you want to add the image end of the view you can follow me

  ImageSpan is = new ImageSpan(context, R.drawable.arrow);
  SpannableString text = new SpannableString("Lorem ipsum dolor sit amet"+"  ");
  text.setSpan(is, text.length()-2, text.length(), 0);

if Image need to center alignment you can follow

ImageSpan center vertical

recommended @amy answer

score 0 · Answer 7 · answered Jul 07 '22 at 09:03

0

here is a View I did precisely for inline images in TextView which also supports click handling on the image https://github.com/myDario/DarioInlineImageTextView

answered Jul 07 '22 at 09:03

Raphael C

2,296
1
22
22

How to display image in Android's TextView?

7 Answers7

Linked