Tuesday, March 23, 2010

Android TextView and HTML

Recently I wanted to display a TextView with a clickable link.




Let's setup a simple TextView and add a link.

mTextSample = (TextView) findViewById(R.id.textSample);
String text = "Visit my blog jtomlinson.blogspot.com";
mTextSample.setText(text);


The result is pure text displayed on screen. Android has no idea we want to display a clickable link.

This wasn't acceptable. I wanted people to be able to launch the url directly by clicking on the link. The next step was to use Linkify, a great feature for adding clickable links to text.

mTextSample = (TextView) findViewById(R.id.textSample);
String text = "Visit my blog jtomlinson.blogspot.com";
mTextSample.setText(text);
//jmt: pattern we want to match and turn into a clickable link
Pattern pattern = Pattern.compile("jtomlinson.blogspot.com");
//jmt: prefix our pattern with http://
Linkify.addLinks(mTextSample, pattern, "http://");



Now we are getting somewhere. Our link is clickable and the user is taken directly to the url using the browser. This is the most basic example of Linkify. WikiNotes is an example from Google that discusses more detailed use of Linkify.

Our next step is to tidy up the view by removing the url and allow the user to click on "blog" to launch the browser.

mTextSample = (TextView) findViewById(R.id.textSample);
String text ="Visit my blog"
mTextSample.setText(text);


Note: blogspot has marked up my text string, you can see the actual string in the screen shot below.



Again this doesn't quite work straight away. We need to tweak our text slightly so Android understands we want to display HTML.

All we need to do is update our setText method to include Html.fromHtml. This method will style our text based on the HTML tags. Not all tags are included so make sure you test first.

//jmt: style our text based on html tags
mTextSample.setText(Html.fromHtml(text));




Perfect, now we have our TextView looking exactly how we want it. There is only one problem, if we try to click the link nothing happens.

We have one last line of code to write. This informs Android we have a link that we would like to open when selected.

mTextSample.setMovementMethod(LinkMovementMethod.getInstance());


When clicked, the browser is launched and the user is taken to the specified url.






Here are the 4 lines of code required to display a clickable link
mTextSample = (TextView) findViewById(R.id.textSample);
mTextSample.setMovementMethod(LinkMovementMethod.getInstance());
String text = "Visit my blog";
mTextSample.setText(Html.fromHtml(text));

24 comments:

Chrisdadswell said...

Thanks for solving a major problem I was having!

雙子咖喱 said...

Your tourial help me to fixed a big problem! Thank you! But I have a question, if the HTML code which provide have image tag(<img>) inside, textview cannot display. How can I display all image & text content data in Textview?

Jason Tomlinson said...

You should use a WebView instead of a TextView if you are trying to display more complex HTML code.

Venu said...

Thanks for the nice solution

Anonymous said...

Thanks, this has really helped :)

Roney said...

Very useful... Thanks a bunch

Gopal said...

This tutorial is helping me lot but the link is not working i am following the same code that you have done

Chris King said...

Mad props. I couldn't for the life of me figure out the MovementType part.

bram said...

Cool, this worked for me. Thanks.

Anonymous said...

can we use marquee teg of html on text view...

usman said...

Thanks.. Very accurate post. Just wat i was looking for.

Sumeet said...

i am also trying to use marquee tag, within TextView, but i didn't get any success to buildup a url link with marquee tag.

any one can help me or give me some suggestion, how can we incorporate marquee tag of html with in textView of android, to call a URL.

Thanks in advance. waiting for some helping replies.

Suhail Larik said...

Very nice tutorial. Really i appreciate you.
thanks alot.

David Cheney said...

yowza BIG thanks!

Anonymous said...

If the TextView is in a ListView, then doing the setMovementMethod() method causes the ListView to break a little bit. Clicking an item will cause the element to turn black instead of orange and click handlers won't work.

But this was helpful for getting HTML to display in the view. Only slightly disappointed that I won't be able to get hyperlinks to be clickable but I guess that is what context menus are for. Thanks!

Anonymous said...

You can also do the same with the autoLink attribute of the TextView. android:autoLink="web"

android:autoLink

it also works for phone numbers and emails addresses

enzzef said...

Thanks a lot! It was very useful for me.

Praveen said...

Thanks a lot.....

Cường Trần Mạnh said...

Thanks a ton!

Anonymous said...

You are a true gentleman - Thanks for helping to clarify the Android online tutorials :)

Derek o Meara said...

thank you kind sir a problem solved now onto the next one.

Anonymous said...

An absolutely perfect tutorial. Great job, buddy and thank you!

3g Technology said...

i am also trying to use marquee tag, within TextView, but i didn't get any success to buildup a url link with marquee tag.

any one can help me or give me some suggestion, how can we incorporate marquee tag of html with in textView of android, to call a URL.

Thanks in advance. waiting for some helping replies.

Paul C said...

I'm very new to Android application building so sorry if I've made a basic mistake. I get mTextSample cannot be resolved error. The next error is in R.id.textSample (cannot be resolved or is not a field).

Also in the string the quotes (") are causing issues.

Lastly, how do I implement this in the actual text view I get no text, I have this so far: