Images in TextView Android

Question

May be this Question has been asked earlier but i did not found any appropriate answer. My question is i have text View inside text i have some image resources. e.g.

http://xyz.abc.in/sites/xyz.abc.in/icons/wifi.jpg "SomeText goes here
http://xyz.abc.in/sites/xyz.abc.in/icons/lcd.jpg "Somtext goes here"
http://xyz.abc.in/sites/xyz.abc.in/icons/storage.jpg "SomeText goes here"

Now I want to put one of those images to the left side of the text(like bullet points). How can I do this? The images are coming from the server and can be changed.

Response :

<div class=\"specsSection\">\n<p><strong>Entertainment on the Go</strong></p>\n
 <table cellpadding=\"5\" cellspacing=\"0\" border=\"0\" class=\"tblSpecs\"><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/dolbyplus.jpg\" />
</td>\n<td>Sharp and Natural Sound with Digital Dolby Plus</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/wifi.jpg\" /></td>\n<td>
 GPRS + WiFi (With Voice Calling)</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/lcd.jpg\" /></td>\n
<td>7\"Capacitive Touch LCD</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/dualcore.jpg\" /></td>\n
<td>Dual Core Processor</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/storage.jpg\" /></td>\n
<td>1 GB RAM, 4 GB eMMC</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/android.jpg\" /></td>\n
<td>Andorid 4.2 JellyBean</td>\n</tr><tr><td>
<img src=\"http://xyz.abc.in/sites/xyz.abc.in/icons/battery.jpg\" /></td>\n
<td>7+ hours of battery life</td>\n</tr></table></div>\n<div style=\"clear:both\">   </div>\n",

getting both text and images and want to render as full html page. in the second fragment. — rupesh, Dec 26 '13 at 08:45
It is not clear what part of your activity need to show html. There is an option to create html page dynamically by getting text from server. Will you application will have native android UI or only HTML? — Ilya Gazman, Dec 26 '13 at 08:47
See i have two fragment form there i have 4 button on the basis of clicked button i am loading my data in second fragment. it can be full text or can be image and text or video too. Its only depends upon which button have you clicked. — rupesh, Dec 26 '13 at 08:51
Do you show the text/image/video as html or native android or you don't care? — Ilya Gazman, Dec 26 '13 at 08:52
native only.one more thing i want to use only one fragment to display all kind of data. — rupesh, Dec 26 '13 at 08:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43904/discussion-between-rup35h-and-babibu) — rupesh, Dec 26 '13 at 08:53

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

@Kirk idea is good. How ever it is not that simple to implement. If you are reading the description of Html.fromHtml() it says:

Returns displayable styled text from the provided HTML string. Any tags in the HTML will display as a generic replacement image which your program can then go through and replace with real images.

Here is a good implementation of that idea.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 26 '13 at 08:39

Ilya Gazman

31,250
24
137
216

GrIsHu · Answer 2 · 2013-12-26T08:21:03.757

0

Try out below code to load the image form url

Implement the Html.ImageGetter's getDrawable method which handles downloading the image, or accessing it from the net, and then create a drawable and return that object. ?

static ImageGetter imgGetter = new Html.ImageGetter() {
        @Override
       public Drawable getDrawable(String source) {
           Drawable drawable = null;
           drawable = Drawable.createFromPath(source);  // Or fetch it from the URL
           // Important
           drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable
.getIntrinsicHeight());
           return drawable;
    }
    };

and use the method on the TextView like this.?

  tv.setText(Html.fromHtml(source, imgGetter, null);

edited Dec 26 '13 at 08:21

answered Dec 26 '13 at 08:03

GrIsHu

29,068
10
64
102

Again i am getting the image url from the server that can be change.Just one i wanted to know how i put the image like html. – rupesh Dec 26 '13 at 08:04
its like in place of bullet point i want to pit image e.g. 3g+Wifi 4.0 I know how to store image in bitmap form url – rupesh Dec 26 '13 at 08:15
how to stores html tags and text separately from response. Currently i am storing only text filtering all tag. By using this replaceAll("\\<.*?>", "") . now i want to store only this tag – rupesh Dec 26 '13 at 08:23

Kirk · Answer 3 · 2013-12-26T10:27:53.343

One simple way is this.

int imageNumber = 1;

String textLine = "<html><body><b>Test</b><i>Italic</i><br/>"
        + "<img src=\"dial.png\"/>This is sample " + "<img src=\"dial.png\"/>" +
                "</body></html>";
textView.setText(Html.fromHtml(textLine , imageGetter, null));

private ImageGetter imageGetter= new ImageGetter() {

    public Drawable getDrawable(String source) {
            Drawable drawable = null;
            if(imageNumber == 1) {
            drawable = getResources().getDrawable(R.raw.icon);
            ++imageNumber;
            } else drawable = getResources().getDrawable(R.raw.a);
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable
                                .getIntrinsicHeight());

            return drawable;
    }
};

or if you want to do it by using XML, try this

<TextView
    android:id="@+id/textImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:drawableLeft="@drawable/dial"
    android:drawablePadding="4dp"
    android:singleLine="true"
    android:text="@string/textName"/>

Edited:

I found this code somewhere on this forum: it parse HTML like XML Parser use this small lib

File input = new File("/tmp/input.html");
Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/");

Element content = doc.getElementById("content");
Elements links = content.getElementsByTag("a");
for (Element link : links) {
   String linkHref = link.attr("href");
   String linkText = link.text();
}

honestly i didn't test above code. code standard much likely to handle like xml tags. so readi it by "ID" or "scr"

just give it a try!

Looks like helpful let me check once.Any way thanks for answering. — rupesh, Dec 26 '13 at 08:07
how to stores html tags and text separately from response. Currently i am storing only text filtering all tag. By using this replaceAll("\\<.*?>", "") . now i want to store only this tag — rupesh, Dec 26 '13 at 08:19
Still u can replace dial.png by your huge url. dnt use replace for this link? — Kirk, Dec 26 '13 at 08:22
Image url and text in same response.i will have to categories then only i can use this. — rupesh, Dec 26 '13 at 08:25
getDrawable(String source) { here source is image file source or full response?? — rupesh, Dec 28 '13 at 02:00

score 0 · Answer 4 · answered Dec 26 '13 at 08:32

Easiest way to do this:

SpannableStringBuilder builder = new SpannableStringBuilder();


builder.setSpan(new ImageSpan(getApplicationContext(),getImageFromWeb(imglink)),0, builder.length(),
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textview.setText(builder);

to get image from server:

public static Bitmap getImageFromWeb(String imglink) throws IOException
{

Bitmap bmpImage;

URL imgURL = new URL(imglink.toString());
URLConnection conn = imgURL.openConnection();
conn.setConnectTimeout(7000);
conn.connect();

InputStream is = conn.getInputStream();
BufferedInputStream bis = new BufferedInputStream(is);

bmpImage = BitmapFactory.decodeStream(bis);
bis.close();
is.close();
return bmpImage;

}

Images in TextView Android

4 Answers4