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>

score 1 · Answer 1 · answered Dec 20 '18 at 14:14

1

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.

answered Dec 20 '18 at 14:14

Joshua Best

246
1
14

score 1 · Answer 2 · answered Dec 20 '18 at 14:36

1

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

answered Dec 20 '18 at 14:36

Erdem

187
1
9

I have added padding but the button is now outside the clickable area. Please see my edit in the question. – machinery Dec 23 '18 at 16:44

score 1 · Answer 3 · answered Dec 20 '18 at 15:13

1

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

answered Dec 20 '18 at 15:13

Lekr0

653
1
8
17

I have added padding but the button is now outside the clickable area. Please see my edit in the question. – machinery Dec 23 '18 at 16:44
Remove __android:layout_marginLeft__ – Lekr0 Dec 24 '18 at 18:31

score 1 · Accepted Answer · answered Dec 20 '18 at 17:32

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

answered Dec 20 '18 at 17:32

Jigar Rangani

26
4

I have tried it but unfortunately it does not move the hit rectangle of the radio button at all. I don't know why. – machinery Dec 26 '18 at 15:18

Increasing size of clickable area of RadioButton

4 Answers4