How to increase the range of an Android button without scaling the background?

Question

I have a button with a custom feature.

<Button android:layout_width="22dip" android:layout_height="23dip" android:background="@drawable/triangle" /> 

Selectable triangle with a transparent background.

 |\ | \ |__\ 

I find this button hard pressed. Firstly, it is relatively small. Secondly, transparent pixels cannot be displayed. I would like to keep the popped same size, but make the hit area a square shape twice the size of the triangle.

 _____________ | | | |\ | | | \ | | |__\ | |____________| 

Answer 1

you can use the TouchDelegate API.

 final View parent = (View) button.getParent(); // button: the view you want to enlarge hit area parent.post( new Runnable() { public void run() { final Rect rect = new Rect(); button.getHitRect(rect); rect.top -= 100; // increase top hit area rect.left -= 100; // increase left hit area rect.bottom += 100; // increase bottom hit area rect.right += 100; // increase right hit area parent.setTouchDelegate( new TouchDelegate( rect , button)); } }); 

Answer 2

You want a "fill". It places the space inside the view. The margin will remove the space outside, which will not increase the area of ​​impact.

  <Button android:layout_width="22dip" android:layout_height="23dip" android:background="@drawable/triangle" android:padding="10dp" /> 

Answer 3

You need to use TouchDelegate , which is defined in the API documents as a “helper class” to handle situations where you want the view to have a larger touch area than its actual borders of the views. "

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

Answer 4

I prefer this solution:

Just add positive indentation and negative margin inside the layout resource file:

 <some.View .. android:padding="12dp" android:margin="-12dp" .. /> 

This is a very small change compared to using TouchDelegates. I also don't want to run Runnable to add a clickable area inside my Java code.

One thing you might consider if the presentation should be perfect for a pixel: padding may not always equal margin. The gasket must always be exactly as specified. The margin depends on the surrounding views and will be compensated by the values ​​of the fields of other species.

Answer 5

just adding an addition to the button

  <Button android:layout_width="wrap_contant" android:layout_height="wrap_contant" android:background="@drawable/triangle" android:padding="20dp" /> 

Thus, having done this, your button will accept the height and width of the triangle image and add a 20dp addition to the button without stretching the image itself. and if you want a minimum width or some height heights, you can use the minWidth and minHeight

Answer 6

Based on the answer, I created a kotlin extension function to help with this.

 /** * Increase the click area of this view */ fun View.increaseHitArea(dp: Float) { // increase the hit area val increasedArea = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().displayMetrics).toInt() val parent = parent as View parent.post { val rect = Rect() getHitRect(rect) rect.top -= increasedArea rect.left -= increasedArea rect.bottom += increasedArea rect.right += increasedArea parent.touchDelegate = TouchDelegate(rect, this) } } 

Answer 7

I don’t know exactly what you mean by "without enlarging the wallpaper." If you mean that you simply do not want your tensile to be stretched, then one option that you have is to take your background png and add an additional transparent border to it. This would increase your impact area, but would not stretch your image.

If, however, you mean that you do not want to modify this drawing at all, I think that your only option is to use large hardcoded values ​​for height and width.

Answer 8

try with this

  <Button android:id="@+id/btn_profile" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:background="@android:color/transparent" android:drawableBottom="@drawable/moreoptionicon" android:onClick="click" android:paddingBottom="15dp" android:visibility="visible" /> 

Answer 9

See Is it possible to programmatically increase the number of buttons on a panel? . This seems like the easiest way for me. It even includes a little animation of only the real object that you can click, allowing the background to receive clicks. I will attach this to my own code soon.

Answer 10

This worked for me:

 public void getHitRect(Rect outRect) { outRect.set(getLeft(), getTop(), getRight(), getBottom() + 30); } 

Although in fact you should convert 30 to dip or make a percentage of the height of the button.

Answer 11

I just needed the same thing: the area with the click is larger than the button image. I wrapped it in a FrameLayout larger than the background, and changed the internal Button tag to TextView. Then I directed a click handler to work with this FrameLayout, not the internal TextView. Everything works well!

Answer 12

You can use a transparent button like this ...

 <Button android:layout_width="50dp" android:layout_height="50dp" android:background="@android:color/transparent" /> 

you can increase or decrease the size of the button as your requirement and use the enter code here ImageView button up the button ....

 <ImageView android:layout_width="22dip" android:layout_height="23dip" android:background="@drawable/triangle" /> 

Answer 13

I created a top level function for this in kotlin:

 fun increaseTouchArea(view: View, increaseBy: Int) { val rect = Rect() view.getHitRect(rect) rect.top -= increaseBy // increase top hit area rect.left -= increaseBy // increase left hit area rect.bottom += increaseBy // increase bottom hit area rect.right += increaseBy // increase right hit area view.touchDelegate = TouchDelegate(rect, view) } 

Answer 14

For this, I used ImageButton. In xml defenition you will see these two attributes:

• Android: Background . Select to use as background.
• android: scr . Sets the ability to draw as the contents of this ImageView.

So, we have two possibilities: background one and source. In your example, the source will be a triagle (drawable / trianlge):

 |\ | \ |__\ 

And the background is square (drawable / square):

 _____________ | | | | | | | | |____________| 

Here is an example ImageButton xml:

 <ImageButton ... android:src="@drawable/triangle" android:background="@drawable/square"> 

Result:

 _____________ | | | |\ | | | \ | | |__\ | |____________| 

In addition, a square drawable can have several different states (pressed, focused). And you can increase the size of the cut backgroud with paddings.

Just in case, here is an example for the background retrieved from the Android Android action bar:

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. --> <item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" /> <item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" /> <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" /> <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" /> <item android:state_focused="true" android:drawable="@drawable/abc_list_focused_holo" /> <item android:drawable="@android:color/transparent" /> </selector> 

Answer 15

You can install an addition to the view, i.e. to your button.

 <Button android:layout_width="50dp" android:layout_height="50dp" android:background="@android:color/transparent" android:padding="15dp" /> 

Hope this works for you.

Answer 16

So the correct answer is, add padding to the touch area, zoom in And change the image from the background to srcCompact .

 <Button android:layout_width="22dip" android:layout_height="23dip" android:padding="6dp" app:srcCompat="@drawable/triangle"/> 

To use app: scrCompat, you need to add xmlns:app="http://schemas.android.com/apk/res-auto" to the main / parent element in xml.

example completed:

 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="@dimen/height_btn_bottom_touch_area" android:background="@color/bg_white" android:clipToPadding="false" android:elevation="7dp"> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:stateListAnimator="@animator/selected_raise" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" > <ImageView android:id="@+id/bottom_button_bg" android:layout_width="0dp" android:layout_height="0dp" android:contentDescription= "@string/service_request_background_contentDescription" android:elevation="1dp" android:padding="6dp" app:srcCompat="@drawable/btn_round_blue" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" > </ImageView> <TextView android:id="@+id/bottom_button_text" android:layout_width="0dp" android:layout_height="0dp" android:elevation="1dp" android:gravity="center" android:text="@string/str_continue_save" android:textColor="@color/text_white" android:textSize="@dimen/size_text_title" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> </android.support.constraint.ConstraintLayout> 

Answer 17

Just adding padding made my flag not center. The following worked for me, however I set a fixed size for the checkbox (according to my UI specification). The idea was to add indentation on the left, not the right. I also added padding at the top and bottom to increase the touch target and keep the checkbox centered.

 <CheckBox android:id="@+id/checkbox" android:layout_width="30dp" android:layout_height="45dp" android:paddingLeft="15dp" android:paddingTop="15dp" android:paddingBottom="15dp" android:button="@drawable/checkbox" android:checked="false" android:gravity="center" /> 

Answer 18

I think the correct answer should use ImageButton instead of Button. Set the drawn triangle as the "src" ImageButton, and set the size (layout_width & layout_height) as you want for easier touch, and set ScaleType to the center to keep the size of the triangle.

Answer 19

Honestly, I think the easiest way is: -

Say your image size is 26dp * 26dp and you want the hit area to be 30dp * 30dp, just add 2dp indent to the ImageButton / Button button and set the size to 30dp * 30dp

---

Original

 <ImageButton android:layout_width="26dp" android:layout_height="26dp" android:src="@drawable/icon"/> 

---

Large impact area

 <ImageButton android:layout_width="30dp" android:layout_height="30dp" android:padding="2dp" android:src="@drawable/icon_transcript"/> 

Answer 20

 <Button android:layout_width="32dp" android:layout_height="36dp" android:layout_margin="5dp" android:background="@drawable/foo" /> 

The background size is still 22x26dp. Just add margin.