Can I increase a buttons onclick-area programmatic

Question

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,

Answer 1

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.

Answer 2

I think your solution is the best one available at the moment, if you don't want to go deep into some android stuff and intercept all the motionEvent and TouchEvents yourself and then you also would need to trigger the pressed view of the button yourself etc.

Just create a nine patch image with a stretchable transparent border. In that way you can change the size of the image without the need to change the image itself and your button will grow or shrink without the actual displayed background changing.

Answer 3

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

Answer 4

Simply provide padding to the layout in place of Margin

    <ImageView
    android:id="@+id/back_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="25dip"
    android:src="@drawable/back_btn" />

Answer 5

Anothe idea is to make the new transparent image and put icon on it so the touch area will be more and design look perfect. Check out the image

Thank you.

Answer 6

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>