How to add an image to TextView text?

Question

I searched on Google and stumbled upon this site where I found a question similar to mine in which how to include an image in TextView text, for example “hello, my name is [image]” and the answer was as follows:

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

I would like to know in this code

• What should I type or do in context?
• Do I have to do something with text.setSpan() as an import or link or leave text?

If someone can break it for me, that would be very appreciated.

Answer 1

Try it.

  txtview.setCompoundDrawablesWithIntrinsicBounds( R.drawable.image, 0, 0, 0); 

Also see this. http://developer.android.com/reference/android/widget/TextView.html

Try this in an XML file

  <TextView android:id="@+id/txtStatus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawableLeft="@drawable/image" android:drawablePadding="5dp" android:singleLine="true" android:text="@string/name"/> 

Answer 2

com / xyz / customandroid / TextViewWithImages .java:

 import java.util.regex.Matcher; import java.util.regex.Pattern; import android.content.Context; import android.text.Spannable; import android.text.style.ImageSpan; import android.util.AttributeSet; import android.util.Log; import android.widget.TextView; public class TextViewWithImages extends TextView { public TextViewWithImages(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TextViewWithImages(Context context, AttributeSet attrs) { super(context, attrs); } public TextViewWithImages(Context context) { super(context); } @Override public void setText(CharSequence text, BufferType type) { Spannable s = getTextWithImages(getContext(), text); super.setText(s, BufferType.SPANNABLE); } private static final Spannable.Factory spannableFactory = Spannable.Factory.getInstance(); private static boolean addImages(Context context, Spannable spannable) { Pattern refImg = Pattern.compile("\\Q[img src=\\E([a-zA-Z0-9_]+?)\\Q/]\\E"); boolean hasChanges = false; Matcher matcher = refImg.matcher(spannable); while (matcher.find()) { boolean set = true; for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class)) { if (spannable.getSpanStart(span) >= matcher.start() && spannable.getSpanEnd(span) <= matcher.end() ) { spannable.removeSpan(span); } else { set = false; break; } } String resname = spannable.subSequence(matcher.start(1), matcher.end(1)).toString().trim(); int id = context.getResources().getIdentifier(resname, "drawable", context.getPackageName()); if (set) { hasChanges = true; spannable.setSpan( new ImageSpan(context, id), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE ); } } return hasChanges; } private static Spannable getTextWithImages(Context context, CharSequence text) { Spannable spannable = spannableFactory.newSpannable(text); addImages(context, spannable); return spannable; } } 

Application:

in res / layout / mylayout.xml:

  <com.xyz.customandroid.TextViewWithImages android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFFFFF00" android:text="@string/can_try_again" android:textSize="12dip" style=... /> 

Please note: if you place TextViewWithImages.java in a place other than com / xyz / customandroid /, you must also change the package name com.xyz.customandroid above.

in res / values ​​/strings.xml:

 <string name="can_try_again">Press [img src=ok16/] to accept or [img src=retry16/] to retry</string> 

where ok16.png and retry16.png are the icons in the res / drawable / folder folder

Answer 3

This answer is based on this excellent answer 18446744073709551615 . Their solution, although useful, does not change the image icon with the surrounding text. It also does not set the icon color for the color of the surrounding text.

The solution below uses a white square icon and it matches the size and color of the surrounding text.

 public class TextViewWithImages extends TextView { private static final String DRAWABLE = "drawable"; /** * Regex pattern that looks for embedded images of the format: [img src=imageName/] */ public static final String PATTERN = "\\Q[img src=\\E([a-zA-Z0-9_]+?)\\Q/]\\E"; public TextViewWithImages(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TextViewWithImages(Context context, AttributeSet attrs) { super(context, attrs); } public TextViewWithImages(Context context) { super(context); } @Override public void setText(CharSequence text, BufferType type) { final Spannable spannable = getTextWithImages(getContext(), text, getLineHeight(), getCurrentTextColor()); super.setText(spannable, BufferType.SPANNABLE); } private static Spannable getTextWithImages(Context context, CharSequence text, int lineHeight, int colour) { final Spannable spannable = Spannable.Factory.getInstance().newSpannable(text); addImages(context, spannable, lineHeight, colour); return spannable; } private static boolean addImages(Context context, Spannable spannable, int lineHeight, int colour) { final Pattern refImg = Pattern.compile(PATTERN); boolean hasChanges = false; final Matcher matcher = refImg.matcher(spannable); while (matcher.find()) { boolean set = true; for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class)) { if (spannable.getSpanStart(span) >= matcher.start() && spannable.getSpanEnd(span) <= matcher.end()) { spannable.removeSpan(span); } else { set = false; break; } } final String resName = spannable.subSequence(matcher.start(1), matcher.end(1)).toString().trim(); final int id = context.getResources().getIdentifier(resName, DRAWABLE, context.getPackageName()); if (set) { hasChanges = true; spannable.setSpan(makeImageSpan(context, id, lineHeight, colour), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE ); } } return hasChanges; } /** * Create an ImageSpan for the given icon drawable. This also sets the image size and colour. * Works best with a white, square icon because of the colouring and resizing. * * @param context The Android Context. * @param drawableResId A drawable resource Id. * @param size The desired size (ie width and height) of the image icon in pixels. * Use the lineHeight of the TextView to make the image inline with the * surrounding text. * @param colour The colour (careful: NOT a resource Id) to apply to the image. * @return An ImageSpan, aligned with the bottom of the text. */ private static ImageSpan makeImageSpan(Context context, int drawableResId, int size, int colour) { final Drawable drawable = context.getResources().getDrawable(drawableResId); drawable.mutate(); drawable.setColorFilter(colour, PorterDuff.Mode.MULTIPLY); drawable.setBounds(0, 0, size, size); return new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM); } } 

How to use:

Just insert links to the desired icons in the text. It does not matter if the text is set programmatically through textView.setText(R.string.string_resource); or if it is installed in xml.

To insert a drawing icon named example.png, include the following line in the text: [img src=example/] .

For example, a string resource might look like this:

 <string name="string_resource">This [img src=example/] is an icon.</string> 

Answer 4

I tried many different solutions, and this was better for me:

 SpannableStringBuilder ssb = new SpannableStringBuilder(" Hello world!"); ssb.setSpan(new ImageSpan(context, R.drawable.image), 0, 1, Spannable.SPAN_INCLUSIVE_INCLUSIVE); tv_text.setText(ssb, TextView.BufferType.SPANNABLE); 

This code uses a minimum of memory.

Answer 5

This is partly based on this previous answer above @A Boschman . In this solution, I found that the size of the input image greatly affected the ability of makeImageSpan() correctly center the image. In addition, I found that the decision affected the spacing between the texts, creating an unnecessary line spacing.

I found BaseImageSpan (from the Facebook Fresco library) to do the job especially well:

  /** * Create an ImageSpan for the given icon drawable. This also sets the image size. Works best * with a square icon because of the sizing * * @param context The Android Context. * @param drawableResId A drawable resource Id. * @param size The desired size (ie width and height) of the image icon in pixels. * Use the lineHeight of the TextView to make the image inline with the * surrounding text. * @return An ImageSpan, aligned with the bottom of the text. */ private static BetterImageSpan makeImageSpan(Context context, int drawableResId, int size) { final Drawable drawable = context.getResources().getDrawable(drawableResId); drawable.mutate(); drawable.setBounds(0, 0, size, size); return new BetterImageSpan(drawable, BetterImageSpan.ALIGN_CENTER); } 

Then put your instance of betterImageSpan on spannable.setSpan() as usual