Hacking by Walkingice: Android Clickable Span in TextView

2012/04/09

Android Clickable Span in TextView

Note: You could find chinese version in my chinese blog.


Spannable brings lots of possibility to TextView, includes displaying various appearance of a Text and onClick callbak.

The normal way to make a TextView clickable is to use View.setOnClickListener. It sets a callback listener to the whole view. What if we just want to add callback to a substring of a text?


This pictures demonstrate

  • One TextView
  • The sub-string has variant color
  • The sub-string is clickable


Of course we could use ViewGroup + many TextView to accomplish that, spannable make things eaiser.(maybe....)

We can understand Span in this way: Put extra function to a CharSequence. For example, If I have string 'TheFinalAnswerIs42', I can set Red color to "Final" and make 42 clickable. But the TextView does not know so much things, it only focus on showing the whole string.



We know that TextView only needs CharSequence as its content, and both of Spannable and Spanned are sub-interface of CharSequence. The question becomes 'How to build desired CharSequence'

Android API Documentations tells us that we can use SpannableStringBuilder to generate SpannableString.

Spannable span = (new SpannableStringBuilder()).newSpannable("TheFinalAnswerIs42");
span.setSpan(new ForegroundColorSpan(0xFFFF0000), 3, 5,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

So the string "Final" becomes red.And we are going to make '42' clickable.

span.setSpan(new MyClickableSpan(), 16, text.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView.setText(span);
mTextView.setMovementMethod(LinkMovementMethod.getInstance());


MyClickableSpan is to be a implementation of ClickableSpan. All we have to do is override method onClick.

Further question: why setSpan is using primitive class Object but not some interface such as Spanned?


API documentation also tells you that you can bind any your own object as Span to TextView. But how to use my customized span object? To solve this, we should understand how the TextView use ClickableSpan.

The source code of TextView tells us that it handle ClickableSpan in onTouchEvent.

In other words, to handle our customzied span object, we should extends TextView to use CustomizedTextView to accomplish it.

6 comments:

  1. the thing i want to ask is that,my app has a list view and i want to linkify some texts along with weblink too.For this particular purpose this idea is not working,since the holder does not recognizing the click able text. So please tell me another way out

    ReplyDelete
    Replies
    1. I don't understand your question exactly. 'Click a text and open a web link' is feasible. If you put the TextView into a ListView, you should consider that is the event pass to TextView correctly.

      Delete
  2. span click event,see below
    http://stackoverflow.com/a/16182500/596555

    ReplyDelete
  3. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.Android Training in chennai | Android Training|Android Training in chennai with placement | Android Training in velachery

    ReplyDelete
  4. I'll read this android callback reference Textview clickable display view and I want to use this Textview On-click code for my site this code processing is clearly working. In Span click to android version developing site any text you want to click using their OnClick Textview using this code View.setOnClickListener.
    Selenium Training in Chennai | Hadoop Training in Chennai with Placement | Android Training in Chennai | Android Training Institute in Velachery

    ReplyDelete