Increasing size of clickable area of RadioButton

Question

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>

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>

Answer 1

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

Answer 2

Possibly add the radio button inside of a linearlayout, center it and then put the onclicklistener on to the linear layout, and then when you click toggle the visuals for the radio button.

Answer 3

To increase the size of clickable area, you can set padding to RadioButton.

Answer 4

The simplest way to increase clickable size is to use padding

<RadioButton
        android:id="@+id/someId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="40dp"
        />

Here is the image