Can I increase a buttons onclick-area programmatically?

This is a very late "me too," but after coming to this and other questions looking for a solution, I found a simple, elegant solution of my own.

Another question complained that the transparent background of their image was not clickable. If that is an issue, this seems to get around that as well.

Here's the button:

<ImageButton
    android:id="@+id/arrowUp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow_up"
    android:background="@drawable/clear_button_background" />

The relevant lines are the last two. "@drawable/arrow_up" is a few button states in *.png files defined in a drawable *.xml file like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item android:state_pressed="true"
       android:drawable="@drawable/tri_up_blue" /> <!-- pressed -->
 <item android:state_selected="true"
       android:drawable="@drawable/tri_up_blue" /> <!-- selected -->
 <item android:state_focused="true"
       android:drawable="@drawable/tri_up_blue" /> <!-- focused -->
 <item android:drawable="@drawable/tri_up_green" /> <!-- default -->
</selector>

Just your basic button. Nothing special. And "@drawable/clear_button_background" is just this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">
   <solid android:color="@android:color/transparent"/>
   <size android:width="20dp" android:height="30dp" />
</shape>

The height and width here are the clickable area, resize as needed. You can reuse this for as many buttons as you need in a single view, unlike the absurdly detailed TouchDelegate. No additional listeners. It doesn't add any views or groups to your hierarchy and you won't be messing around with padding and margins all day.

Simple. Elegant.


Me personally, I'd use a TouchDelegate. This lets you deal with the touch target, and the visual view bounds as two different things. Very handy...

http://developer.android.com/reference/android/view/TouchDelegate.html


I have just found a neat way to solve this problem.

  1. Surround the button with a say a LinearLayout that has the padding round the button.
  2. Add the same onclick to the LinearLayout as the Button.
  3. In the Button set the duplicateParentState to true which make the button highlight when you click outside the button but inside the LinearLayout.

    <LinearLayout
        android:layout_height="fill_parent"
        android:onClick="searchButtonClicked" 
        android:layout_centerVertical="true" 
        android:orientation="horizontal" 
        android:layout_width="wrap_content" 
        android:paddingRight="10dp" 
        android:paddingLeft="30dp">
        <Button 
            android:id="@+id/search_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_button_selector"
            android:textColor="#fff"
            android:text="Search"
            android:focusable="true"
            android:textStyle="bold"
            android:onClick="searchButtonClicked" 
            android:layout_gravity="center_vertical" 
            android:duplicateParentState="true"/>
    </LinearLayout>
    

Tags:

Android

Button