Implement onClick only for a TextView compound drawable

Question

I need to have some text with a drawable on the left and I want to execute some code when the user clicks/touches the image (only the image, not the text), so I used a LinearLayout with a TextView and an ImageView which is clickable and launches an onClick event. The XML parser suggests me to replace this with a TextView with a compound drawable, which would draw the same thing with far less lines of XML.. My question is "can I specify I want to handle an onClick event only on the drawable of the TextView and not on the TextView itself? I've seen some solutions which involves writing your own extension of TextView, but I'm only interested in being able to do it within the layout resource, if possible, otherwise I'll keep the following XML code:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:paddingTop="10dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="@string/home_feedback_title"
            android:textColor="@android:color/primary_text_dark"
            android:textStyle="bold" 
            android:paddingBottom="4dp"/>


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/action_feedback" 
            android:clickable="true"
            android:onClick="onClickFeedback"
            android:contentDescription="@string/action_feedback_description"/>
</LinearLayout>

score 51 · Answer 1 · answered Mar 23 '15 at 15:23

Its very simple. Lets say you have a drawable on left side of your TextView 'txtview'. Following will do the trick.

TextView txtview = (TextView) findViewById(R.id.txtview);
txtview.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_UP) {
            if(event.getRawX() <= txtview.getTotalPaddingLeft()) {
                // your action for drawable click event

             return true;
            }
        }
        return true;
    }
});

If you want for right drawable change the if statement to:

if(event.getRawX() >= txtview.getRight() - txtview.getTotalPaddingRight())

Similarly, you can do it for all compound drawables.

txtview.getTotalPaddingTop();
txtview.getTotalPaddingBottom();

This method call returns all the padding on that side including any drawables. You can use this even for TextView, Button etc.

Click here for reference from android developer site.

score 9 · Accepted Answer · edited May 23 '17 at 11:46

You can go either way. Using the compound drawable is faster though because it was intended to be an optimization. It uses less ram because you reduce 3 views into 1 and it's faster layout because you lose 1 depth.

If I were you I'd consider stepping back to see if both the text and the image intercepting the touch to do whatever action is possibly a good thing. In general having a larger touch region makes it easier to press. Some users may actually be inclined to touch the text instead of the image.

Lastly if you go that route of merging the 2 you might want to consider using a Button instead of a TextView. You can style the button to not have the rectangle around it. They call it a borderless button. It's nice because you get visual feedback that you clicked on a actionable item where as an ImageView or TextView normally aren't actionable.

How to Create Borderless Buttons in Android

score 8 · Answer 3 · edited Jan 29 '20 at 11:21

@Vishnuvathsan's answer is almost perfect, but getRaw() returns an absolute x position of the touch point. If the textview is located not on the left edge of the view, you should compare with the absolute position of the textview by using getLocationOnScreen. Code below is an example to check both left drawable tap and right drawable tap.

textView.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            int[] textLocation = new int[2];
            textView.getLocationOnScreen(textLocation);

            if (event.getRawX() <=  textLocation[0] + textView.getTotalPaddingLeft()) {

                // Left drawable was tapped

                return true;
            }


            if (event.getRawX() >= textLocation[0] + textView.getWidth() - textView.getTotalPaddingRight()){

                // Right drawable was tapped

                return true;
            }
        }
        return true;
    }
});

score 0 · Answer 4 · answered Jul 04 '19 at 12:57

final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_DOWN = 3;

This click listener is getting in on touch listener

 if (event.getAction() == MotionEvent.ACTION_DOWN) 
if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (event.getX() >= (tvFollow.getTop() - tvFollow.getCompoundDrawables()[DRAWABLE_TOP].getBounds().width())) {
                   // your action here
                return true; } }

score 0 · Answer 5 · answered Dec 16 '21 at 19:32

Since getRaw() and getRight() both returns in regards with the entire screen coordinates, this will not work if your views are not on the left edge of the screen. The below solution can be used anywhere regardless of layout position. This is for right side drawable touch.

  textView.setOnTouchListener(OnTouchListener { _, event ->
                if (event.action == MotionEvent.ACTION_UP)
                {
                    if (event.x >= textView.width - textView.totalPaddingEnd)
                    {
                        <!---DO YOUR ACTIONS HERE--->
                        return@OnTouchListener true
                    }
                }
                true
            })

PS: Kotlin code

Implement onClick only for a TextView compound drawable

5 Answers5

Linked