CODEWITHSUNDEEP
androidradio-buttonradio-groupandroid-gui
machinery
machinery

Reputation: 6290

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

Upvotes: 1

Views: 1401

Answers (4)

Jigar Rangani
Jigar Rangani

Reputation: 386

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

Upvotes: 1

Lekr0
Lekr0

Reputation: 733

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

enter image description here

Upvotes: 1

Erdem
Erdem

Reputation: 197

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

Upvotes: 1

Joshua Best
Joshua Best

Reputation: 246

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.

Upvotes: 1

Related Questions