How to add click action for the ImageSpan

Question

I have a ImageSpan set in the TextEdit. And I want to add the action - when user click on the ImageSpan, it will popup a dialog and show the big image.

I checked the SDK and seems the ImageSpan doesn't support onclick. Is there anyway to enable the onclick for the ImageSpan or other Span that support Image?

I checked the code and found there is a URLSpan created with the ImageSpan because the input string is

But seems the URLSpan doesn't work and there is no click action create for it. Any idea?

Thanks.

Answer 1

I've been trying to solve the same problem today and find the solution. To make the image clickable you need to attach a ClickableSpan object to the same range as ImageSpan for your image. When you get your Spanned object from Html.fromHtml() you can go through the set of ImageSpan objects assigned for it and attach additional ClickableSpan object.

Like this:

            ImageSpan[] image_spans = s.getSpans(0, s.length(), ImageSpan.class);

            for (ImageSpan span : image_spans) {

                final String image_src = span.getSource();
                final int start = s.getSpanStart(span);
                final int end = s.getSpanEnd(span);

                ClickableSpan click_span = new ClickableSpan() {

                    @Override
                    public void onClick(View widget) {

                        Toast.makeText(HtmlImagesTestActivity.this,
                                "Image Clicked " + image_src,
                                Toast.LENGTH_SHORT).show();

                    }

                };

                ClickableSpan[] click_spans = s.getSpans(start, end, ClickableSpan.class);

                if(click_spans.length != 0) {

                    // remove all click spans

                    for(ClickableSpan c_span : click_spans) {
                        s.removeSpan(c_span);
                    }


                }


                s.setSpan(click_span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

            }               

Answer 2

I have found the key point。 In order to response to click action, we not only set clickablespan , but also set edittext'setMovementMethod, the code is like this:

EditText.setMovementMethod(LinkMovementMethod.getInstance());

Here is the problem. If set setMovementMethod to LinkMovementMethod.getInstance() , the edittext's cursor will be gone. I don't know why

Answer 3

following the miaohua1982's answer above, it is clear that cursor is getting disabled after setting the setmovementmethod to LinkMovementmethod. I have faced similar problem in textview where action mode(which will appear on LongPress of textview) is cancelled and im not getting any action items.I have solved this problem by extending the LinkMovementMethod and overriding a method as below. I hope even in editext it solves the problem.

class MyMovementMethod extends LinkMovementMethod{

 @Override
  public boolean canSelectArbitrarily() {
       return true;
    }    

}

Answer 4

First, make the area clickable from the properties.
Next, add OnClickListner for the same.

Do your custom action onclick method.

Answer 5

You might want to check out using ClickableSpan and attach the TextView to a LinkMovementMethod and override its onTouchEvent etc....

Hope that helps