Category Archives: TextView Hyperlink – Change Color and Remove Underline

TextView HyperLink – Change Color and Remove Underline


Sometimes, we need to display hyperlink in textview.

This hyperlink can of following format:

<strong><a href=”\&quot;index.php?option=com_socialapp&amp;task=profile.viewprofile&amp;userid=42\&quot;”>admin</a> is attending <a href=”_QQQ_/jsocial_app/index.php?option=com_socialapp&amp;view=events&amp;task=viewevent&amp;eventid=137&amp;Itemid=238_QQQ_”>Alchemist Rocks</a>.</strong>

Which will be seen in the web view as displayed below

Screenshot-Mozilla Firefox (Private Browsing)

How do we create such text in android textview ?

Follow the given steps and you will successfully create a textview whose links will be displayed as shown in the webview:

1. Create a textview in xml

  <TextView  
       android:id="@+id/profileFeedTitle"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_alignParentTop="true"  
       android:autoLink="web" //link the content of web  
       android:textColorLink="#576586" //change the color of the link  
       android:textColor="#555555" />  

2. In your activity, initialize the String and textview as given in the following code snippet

 String webLinkText = <a href="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png"><img src="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png" alt="Screenshot-Mozilla Firefox (Private Browsing)" width="293" height="254" class="alignnone size-full wp-image-291" /></a>  
 TextView linkTextView = (TextView) findViewById(R.id.profileFeedTitle);  
 holder.profileFeedTitle.setText(Html.fromHtml(webLinkText)));  

3. Run your project.

When you run your project, you will see a textview similar to the give figure:

tt_1

Here, in the given figure, you will see the user names in blue color, which is just as we want……..
But, we dont need the underline. To remove underline

i. Create a new class named as URLSpanNoUnderline as shown in the given code snippet:

 package com.example;  
 import android.text.TextPaint;  
 import android.text.style.URLSpan;  
 public class URLSpanNoUnderline extends URLSpan {  
      public URLSpanNoUnderline(String p_Url) {  
           super(p_Url);  
      }  
      public void updateDrawState(TextPaint p_DrawState) {  
           super.updateDrawState(p_DrawState);  
           p_DrawState.setUnderlineText(false);  
      }  
 }  

ii. Go to your activity and replace the code

 String webLinkText = <a href="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png"><img src="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png" alt="Screenshot-Mozilla Firefox (Private Browsing)" width="293" height="254" class="alignnone size-full wp-image-291" /></a>  
 TextView linkTextView = (TextView) findViewById(R.id.profileFeedTitle);  
 holder.profileFeedTitle.setText(Html.fromHtml(webLinkText)));  

by the following code snippet:

 String webLinkText = <a href="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png"><img src="https://prativas.files.wordpress.com/2013/05/screenshot-mozilla-firefox-private-browsing.png" alt="Screenshot-Mozilla Firefox (Private Browsing)" width="293" height="254" class="alignnone size-full wp-image-291" /></a>  
 TextView linkTextView = (TextView) findViewById(R.id.profileFeedTitle);  
 //set user name in blue color and remove underline from the textview 
Spannable spannedText = Spannable.Factory.getInstance().newSpannable(
				Html.fromHtml(webLinkText));
Spannable processedText = removeUnderlines(spannedText);
if (holder.profileFeedTitle != null) {
	holder.profileFeedTitle.setText(processedText);
}  

iii. then, add the given function in your activity:



/**
 * Removes URL underlines in a string by replacing URLSpan occurrences by
 * URLSpanNoUnderline objects.
 *
 * @param p_Text A Spannable object. For example, a TextView casted as
 *               Spannable.
 */

 public static Spannable removeUnderlines(Spannable p_Text) {  
           URLSpan[] spans = p_Text.getSpans(0, p_Text.length(), URLSpan.class);  
           for (URLSpan span : spans) {  
                int start = p_Text.getSpanStart(span);  
                int end = p_Text.getSpanEnd(span);  
                p_Text.removeSpan(span);  
                span = new URLSpanNoUnderline(span.getURL());  
                p_Text.setSpan(span, start, end, 0);  
           }  
           return p_Text;  
      }  

Then, run your code, you will get the perfect textview as shown in the given screenshot:

tt2

How did the underline disappeared ? What did the given class and function do ?

Heres the explanation :

As you may already know, the TextView object has a property named android:autoLink that creates HTML or email links automatically. You also got properties to change link colors such as android:textColorLink and android:textColorHighlight. The only missing option many of us would like to have is a way to remove the underline under the link itself.

Sadly, removing the underline seems to be somewhat “hard” to achieve. So i had added the given a news class and a new function.

Advertisements