Can I increase the number of buttons on the click area programmatically?

Question

Sometimes I have a button in the user interface that is so small that it's hard to click. My solution so far has been to add a transparent border around the button in Photoshop. Just increasing the fill on the button does not work, as it also stretches the image. Since it's just vanity to open Photoshop every time I want to change the surface that I can click on, is there a way to do this programmatically? I tried to place the frame in the queue behind the button and make it clickable, but then the button will not change the appearance of the touch, as it should. Of course, I could also add an ontouchlistener to the framelayout, which changes the look of the buttons, but then this is pretty some code if I have several of these buttons.

Greetings

Answer 1

I just found a neat way to solve this problem.

• Surround the button using the word LinearLayout, which has a registration around the button.
• Add the same onclick to LinearLayout as the button.

• In the button, set duplicateParentState to true to highlight the button when you click the button 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> 

Answer 2

I personally, I would use TouchDelegate. This allows you to deal with a touch target, and visual visibility is limited in two different ways. Very comfortably...

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

Answer 3

This is a very late "me too", but, coming to this and other issues that were looking for a solution, I found a simple, elegant solution.

Another question complained that the transparent background of their image is not clickable. If this is a problem, it seems to work around this too.

Here is 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 corresponding lines are the last two. "@drawable/arrow_up" are several button states in * .png files defined in a * .xml file with the ability to cut:

 <?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 main button. Nothing special. And "@drawable/clear_button_background" is only:

 <?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 area that can be clicked, resize if necessary. You can use it as many times as needed in one view, unlike the absurdly detailed TouchDelegate. No additional listeners. It does not add any views or groups to your hierarchy, and you will not be busy with the filling and fields all day.

Simple Elegant.

Answer 4

I think your solution is the best available at the moment, if you do not want to delve into some Android things and intercept all motionEvent and TouchEvents yourself, and then you will also need to call pressed, etc.

Just create nine patch images with a stretchable transparent border. This way you can resize the image without having to resize the image itself, and your button will grow or shrink without changing the actual background displayed.

Answer 5

The idea is to make a new transparent image and place an icon on it so that the touch area is larger and the design looks perfect. Check image

Thank.

Answer 6

Just add padding to your layout instead 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 7

Perhaps you could do this by looking at the X and Y coordinates of the MotionEvent passed to the onTouchEvent ?