7

I have a ToggleButton. I want to have more place for click on this button. If I add layout_width, layout_height etc. the image looks bad. I also tried using android:padding but it did not help me.

It is needed for the convenience of users.

enter image description here

midhunhk
  • 5,560
  • 7
  • 52
  • 83
Tim
  • 1,606
  • 2
  • 20
  • 32
  • 1
    what is the problem if you are using padding? – Syn3sthete Oct 17 '12 at 07:20
  • Try TouchDelegate, here is an example how to use it http://stackoverflow.com/questions/1343222/is-there-an-example-of-how-to-use-a-touchdelegate-in-android-to-increase-the-siz/1343796#1343796 – ammar26 Oct 17 '12 at 07:34

7 Answers7

3

Use TouchDelegate for your ToggleButton as ammar26 have commented you.

Or

Try this:

Make one parent layout like LinearLayout or RelativeLayout that cover the ToggleButton. And now put margin to that Parent layout.

Now, on click of that Parent layout do action for the toggle button.

Hope it will help you to increase touch area for your view.

Happy Coding.

Vasily Kabunov
  • 6,511
  • 13
  • 49
  • 53
Shreyash Mahajan
  • 23,386
  • 35
  • 116
  • 188
  • Your second approach is more or less how TouchDelegate works. The parent of the ToggleButton will listen for touch events: if one is within the specified boundaries the click will be forwarded to the ToggleButton by TouchDelegate – Gil Vegliach Jun 25 '14 at 07:56
3

Easy solution : If you have image for the button, then create transparent area around it (i.e. for touch area).

The grey area can be transparent to increase the touch area.

enter image description here

Or use TouchDelegate

Community
  • 1
  • 1
Vinayak Bevinakatti
  • 40,205
  • 25
  • 108
  • 139
3

You can also increase touch area by setting touch delegates Android Developer Training Blog Post

public class MainActivity extends Activity {

    @Override 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Get the parent view 
        View parentView = findViewById(R.id.parent_layout);

        parentView.post(new Runnable() {
            // Post in the parent's message queue to make sure the parent 
            // lays out its children before you call getHitRect() 
            @Override 
            public void run() { 
                // The bounds for the delegate view (an ImageButton 
                // in this example) 
                Rect delegateArea = new Rect();
                ImageButton myButton = (ImageButton) findViewById(R.id.button);
                myButton.setEnabled(true);
                myButton.setOnClickListener(new View.OnClickListener() {
                    @Override 
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, 
                                "Touch occurred within ImageButton touch region.",  
                                Toast.LENGTH_SHORT).show();
                    } 
                }); 

                // The hit rectangle for the ImageButton 
                myButton.getHitRect(delegateArea);

                // Extend the touch area of the ImageButton beyond its bounds 
                // on the right and bottom. 
                delegateArea.right += 100;
                delegateArea.bottom += 100;

                // Instantiate a TouchDelegate. 
                // "delegateArea" is the bounds in local coordinates of  
                // the containing view to be mapped to the delegate view. 
                // "myButton" is the child view that should receive motion 
                // events. 
                TouchDelegate touchDelegate = new TouchDelegate(delegateArea, 
                        myButton);

                // Sets the TouchDelegate on the parent view, such that touches  
                // within the touch delegate bounds are routed to the child. 
                if (View.class.isInstance(myButton.getParent())) {
                    ((View) myButton.getParent()).setTouchDelegate(touchDelegate);
                } 
            } 
        }); 
    } 
}
AZ_
  • 21,688
  • 25
  • 143
  • 191
2

Instead of putting the touch event in button put it in the layout containg the only the button..and fix the size of the layout as ur wish

mainu
  • 448
  • 2
  • 11
2

increase the values of android:padding:

<SeekBar android:id="@+id/seek" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_weight="1" 
android:paddingTop="5dp" android:paddingBottom="5dp"
android:progressDrawable="@drawable/green_scrubber_progress_horizontal_holo_ligh‌​t"
android:thumb="@drawable/thumb" />
Stephen Ostermiller
  • 23,933
  • 14
  • 88
  • 109
Sujith S Manjavana
  • 1,417
  • 6
  • 33
  • 60
0

Take the margin (place of padding) of your Button from its parent layout and then perform opration on your Layout 

mLayout.setonTouchListener(View.onTouchListener{
     // here your working code 
});
Jeetu
  • 686
  • 2
  • 10
  • 20
0

You can increase touch area using touch delegates.

Write a common function like this:

fun View.increaseHitAreaForViews(vararg viewsAndDetail: Pair<View, Int>) {
            val touchDelegateComposite = TouchDelegateComposite(this)
            post {
                viewsAndDetail.forEach { pair ->
                    val rect = Rect()
                    val view = pair.first
                    view.getHitRect(rect)
                    rect.top -= pair.second
                    rect.left -= pair.second
                    rect.bottom += view.measuredHeight + pair.second
                    rect.right += view.measuredWidth + pair.second
                    touchDelegateComposite.addDelegate(TouchDelegate(rect, view))
                }
                touchDelegate = touchDelegateComposite
            }
        }

and call it wherever you want to increase the hit area.

view.increaseHitAreaForViews(
  Pair(btn, 40)
)

where view is the parent layout and btn is the control that you want to increase touch area. You can also adjust the value 40 as per you need.

Aishwarya
  • 151
  • 1
  • 5