Q:

Can I increase a buttons onclick-area programmatically?

Sometimes I have a button in my UI that it is so small that it is difficult to click. My solution so far has been to add a transparent border around the button in photoshop. Just increasing the padding on the button does not work, since this will also stretch the image. Since it is kind of a fuss to open photoshop each time I want to change the clickable surface, is there any way to do this programmatically? I have tried placing a framelayout behind the button and make it clickable, but then the button wont change appearance on touch as it should. Ofcourse I could also add a ontouchlistener on the framelayout which changes the buttons appearance, but then it quite some code if I have several of those buttons.
Cheers,

A:

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

A:

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

Surround the button with a say a LinearLayout that has the padding round the button.
Add the same onclick to the LinearLayout as the Button.
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>

A:

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.

