Search code examples
androidradio-buttonradio-groupandroid-gui

Increasing size of clickable area of RadioButton


I have a RadioGroup with 2 RadioButton in Android (Android 5.1) as shown below. There are two problems. First, the clickable area (depicted in blue in the image at the bottom) is not centered around the button (the circle). Second, I would like to increase the clickable area but keeping the circle (button) the same size.

How can I increase and center the clickable area around the button?

<RadioGroup
    android:id="@+id/group"
    android:layout_width="140dp"
    android:layout_height="50dp"
    android:layout_marginLeft="212dp"
    android:layout_marginTop="8dp"
    android:orientation="horizontal"
    android:visibility="visible"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image"
    tools:ignore="RtlHardcoded">

    <RadioButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:scaleX="2"
        android:scaleY="2" />

    <RadioButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:scaleX="2"
        android:scaleY="2" />

</RadioGroup>

enter image description here

EDIT: I have now updated my layout and incorporated padding. The clickable area is no larger but unfortunately the area is outside the button. I would like to have the clickable area centered around the button. How can this be done?

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="212dp"
    android:layout_marginTop="8dp"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image"
    tools:ignore="RtlHardcoded">

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:padding="30dp"
        android:scaleX="2"
        android:scaleY="2" />

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="55dp"
        android:padding="30dp"
        android:scaleX="2"
        android:scaleY="2" />

</RadioGroup>

enter image description here


Solution

  • final View parent = (View) view.getParent();
    parent.post( new Runnable() {
        public void run() { 
            final Rect rect = new Rect(); 
            button.getHitRect(rect); 
            rect.top -= 100;   
            rect.left -= 100;   
            rect.bottom += 100;          
            rect.right += 100;  
            parent.setTouchDelegate( new TouchDelegate( rect , button)); 
        } 
    }); 

    increase thouch deleget of view