Android: How to change the Size of the RadioButton
-
26-09-2019 - |
Question
I have many RadioButton
s in my app. The RadioButtons are too big for me. Is there any way to make them smaller?
Solution
Can't be done, the radio button is a built-in control component and as such its size is fixed.
OTHER TIPS
One quick hacky solution is to scale the button down:
<RadioButton
android:scaleX="0.5"
android:scaleY="0.5" />
This works great for going smaller.
For going larger, this tends to cause some clipping from the container View, so you'll likely have to hardcode the height/width of the RadioGroup to fit the scaled buttons. The button drawable can also get noticeably pixelated the larger you go, so it's not really great if you want something 3x larger...
It can be done but is not as simple as setting the Layout_Width and Layout_height as with EditTexts, Buttons etc. To modify the size/looks of a view like a checkbox/radio button use the "Background" and "Button" properties to specify your own drawables.
This is an older page, and the locations are different now, but this'll give you an idea : http://www.anddev.org/tutorial_change_look_of_checkbox-t4553.html
you can use scalex and scaley properties , then use translationX and translationY to put it in the radiobutton windows.
<RadioButton
android:id="@+id/rbtnfkilo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleX="1.4"
android:scaleY="1.4"
android:text="Kilogram"
android:textColor="#fff"
android:textSize="18sp"
android:translationX="24dp" />
I relpaced RadioButton
with ToggleButton
and applied same style. I did override background and button.
<ToggleButton
android:id="@+id/btnToggle1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_weight="1"
android:checked="true"
style="@style/ToggleButtonStyle"
android:button="@null"
android:textOn="@string/btnTitle"
android:textOff="@string/btnTitle"/>
and style:
<style name="ToggleButtonStyle">
<item name="android:background">@drawable/background_radiobutton</item>
<item name="android:textColor">@color/selector_text_radiobutton</item>
<item name="android:textAppearance">@null</item>
</style>
Works for me - looks the same, but with custom height.
If your RadioButton is in the RadioGroup, you will need to customize listener, check Android: How to get a radiogroup with togglebuttons?
<RadioGroup android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:checkedButton="@+id/first">
<RadioButton android:id="@+id/first"
android:width="50dp"
android:height="50dp"
android:button="@drawable/button_radio"/>
<RadioButton android:id="@+id/second"
android:width="50dp"
android:height="50dp"
android:button="@drawable/button_radio"/>
<RadioButton android:id="@+id/third"
android:width="50dp"
android:height="50dp"
android:button="@drawable/button_radio"/>
<RadioButton android:id="@+id/fourth"
android:width="50dp"
android:height="50dp"
android:button="@drawable/button_radio"/>
</RadioGroup>
I've done this by adjusting the TextSize of RadioButton itself
Like so
android:textSize="20sp"
then apply to my code;
<RadioGroup
android:id="@+id/checkboxRadioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb1"
style="@android:style/Widget.CompoundButton.CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/checkBoxMargin"
android:text="YES"
android:textSize="20sp" />
...
Hope this help to someone