Format TextView to look like link

Question

I've been using the android:autoLink just fine for formatting links and such, but I need to use android:onClick so I can't use that in this case. The reasoning is that I find it too easy to click on a phone number accidentally, so I'm going to intercept the click with a confirmation Dialog and then call.

Is there an easy way to still make the phone number in my TextView look like a normal clickable link? I poked around the Android source code, but couldn't find any particular style for me to reference.

One solution would be to extend ClickableSpan to do your own custom handling of clicking the link: http://developer.android.com/reference/android/text/style/ClickableSpan.html Also check this thread: http://stackoverflow.com/questions/11413399/open-textview-links-at-another-activity-not-default-browser — almalkawi, Aug 05 '12 at 22:28

score 14 · Answer 1 · edited May 23 '17 at 12:00

This is the shortest solution:

final CharSequence text = tv.getText();
final SpannableString spannableString = new SpannableString( text );
spannableString.setSpan(new URLSpan(""), 0, spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
tv.setText(spannableString, TextView.BufferType.SPANNABLE);

Sadly, the effect of clicking doesn't show up as being clicked on a real url link, but you can overcome it like so:

    final CharSequence text = tv.getText();
    final SpannableString notClickedString = new SpannableString(text);
    notClickedString.setSpan(new URLSpan(""), 0, notClickedString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    tv.setText(notClickedString, TextView.BufferType.SPANNABLE);
    final SpannableString clickedString = new SpannableString(notClickedString);
    clickedString.setSpan(new BackgroundColorSpan(Color.GRAY), 0, notClickedString.length(),
            Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    tv.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(final View v, final MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                tv.setText(clickedString);
                break;
            case MotionEvent.ACTION_UP:
                tv.setText(notClickedString, TextView.BufferType.SPANNABLE);
                v.performClick();
                break;
            case MotionEvent.ACTION_CANCEL:
                tv.setText(notClickedString, TextView.BufferType.SPANNABLE);
                break;
            }
            return true;
        }
    });

Another solution is to use Html.fromHtml(...) , where the text inside has links tags ("") .

If you wish for another solution, check this post.

score 3 · Answer 2 · edited May 23 '17 at 12:25

3

You can create a colors.xml resource file, what contains colors. Please take a look at Colors
If you want to underline your text, then please take a look at this post: Underline
Don't forget to add android:clickable="true" or setClickable(true) to your TextViews to make them clickable!

edited May 23 '17 at 12:25

Community

1
1

answered Aug 05 '12 at 22:31

Balázs Édes

13,452
6
54
89

yugidroid · Answer 3 · 2014-06-24T12:46:04.397

3

To underline your TextView's text, you have to do something like:

final TextView text = (TextView) findViewById(R.id.text);

SpannableString string = new SpannableString("This is the uderlined text.");
string.setSpan(new UnderlineSpan(), 0, string.length(), 0);
text.setText(string);

This should work. Let me know about your progress.

edited Jun 24 '14 at 12:46

answered Aug 05 '12 at 23:30

yugidroid

6,640
2
30
45

just replace content with string and then only your code will work fine. because content is nothing here. – Robi Kumar Tomar Jun 24 '14 at 09:23

score 3 · Answer 4 · answered Aug 06 '12 at 01:55

Linkify is a great class, it hunts for complex patterns like URLs, phone numbers, etc and turns them into URLSpans. Rather than re-write the existing regular expressions I extended the URLSpan class and created a method to upgrade only the telephone URLSpans to a custom URLSpan with a confirmation dialog.

First my extended URLSpan class, ConfirmSpan:

class ConfirmSpan extends URLSpan {
    AlertDialog dialog;
    View mView;

    public ConfirmSpan(URLSpan span) {
        super(span.getURL());
    }

    @Override
    public void onClick(View widget) {
        mView = widget;

        if(dialog == null) {
            AlertDialog.Builder mBuilder = new AlertDialog.Builder(widget.getContext());
            mBuilder.setMessage("Do you want to call: " + getURL().substring(4) + "?");
            mBuilder.setNegativeButton("No", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                    dialog.cancel();
                }
            })
            .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                    openURL();
                }
            });
            dialog = mBuilder.create();
        }
        dialog.show();
    }

    public void openURL() {
        super.onClick(mView);
    }
}

Next the method to swap out the different span classes:

private void swapSpans(TextView textView) {
    Spannable spannable = (Spannable) textView.getText();
    URLSpan[] spans = textView.getUrls();
    for(URLSpan span : spans) {
        if(span.getURL().toString().startsWith("tel:")) {
            spannable.setSpan(new ConfirmSpan(span), spannable.getSpanStart(span), spannable.getSpanEnd(span), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            spannable.removeSpan(span);
        }
    }
}

Finally all you need to do is create a TextView with the autoLink attribute:

android:autoLink="phone"

And remember to call the swapSpans() method. Understand that I wrote this for fun, there may be other methods of doing this but I am unaware of them at the moment. Hope this helps!

Thank you, this looks very nice! I will try to implement it soon and see how it goes. :) — telkins, Aug 06 '12 at 03:42

score 1 · Answer 5 · answered Apr 02 '19 at 22:43

With kotlin extension function (if you don't need the click effect as on a real link)

fun TextView.hyperlinkStyle() {
    setText(
        SpannableString(text).apply {
            setSpan(
                URLSpan(""),
                0,
                length,
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
            )
        },
        TextView.BufferType.SPANNABLE
    )
}

How to use

yourTextView.hyperlinkStyle()

Debasish Ghosh · Answer 6 · 2017-06-10T10:37:45.790

Have a better answer.This is what i did.

     final SpannableString ss = new SpannableString("Click here to verify Benificiary");
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(View textView) {

            }
            @Override
            public void updateDrawState(TextPaint ds) {
                super.updateDrawState(ds);
                ds.setUnderlineText(false);
            }
        };
        ss.setSpan(clickableSpan,0,ss.length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
        textView.setHighlightColor(Color.BLUE);

You go anywhere you like when user clicks on the link through onclick method of ClickableSpan

manu · Answer 7 · 2020-01-29T16:06:24.980

0

Simply underline it:

val myText = "Text to be underlined"
textView.text = Html.fromHtml("<u>$myText</u>")

or with kotlin extensions:

fun TextView.underline() {
    text = Html.fromHtml("<u>${text}</u>")
}

usage:

textView.text = myText
textView.underline()

More ways to style text in android here: https://medium.com/androiddevelopers/spantastic-text-styling-with-spans-17b0c16b4568

edited Jan 29 '20 at 16:06

answered Jan 29 '20 at 15:58

manu

1
1
2

Format TextView to look like link

7 Answers7

Linked