android – how to reduce the gap for radioButton in radioGroup with Theme.MaterialComponents.Light-ThrowExceptions

Exception or error:

after change from Theme.AppCompat.Light to Theme.MaterialComponents.Light

<style name="myRadioButtonTheme" parent="Theme.MaterialComponents.Light"> <!-- Theme.AppCompat.Light -->
        <item name="colorControlNormal">@color/radio_bt_color</item>
        <item name="colorControlActivated">@color/radio_bt_selected_color</item>
    </style>

the radioGroup shows radioButton item list with bigger gap

<RadioGroup
                android:id="@+id/fragment_radio_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:theme="@style/myRadioButtonTheme">


                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp"
                    android:text="item 1"
                    android:textColor="@color/txt_color" />

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="0dp"
                    android:text="item 2"
                    android:textColor="@color/txt_color" />

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="item3"
                    android:checked="true"
                    android:text="Choose Fantasy Sports News"
                    android:textColor="@color/txt_color" />

comparing the one using Theme.AppCompat.Light and Theme.MaterialComponents.Light

enter image description here

how to reduce the gap between the radio button?

How to solve:

The default style used by RadioButton with a Material Components Theme is:

  <style name="Widget.MaterialComponents.CompoundButton.RadioButton" parent="Widget.AppCompat.CompoundButton.RadioButton">
    <item name="enforceMaterialTheme">true</item>
    <item name="useMaterialThemeColors">true</item>
    <item name="android:minWidth">?attr/minTouchTargetSize</item>
    <item name="android:minHeight">?attr/minTouchTargetSize</item>
  </style>

The default value for the minTouchTargetSize attribute is 48dp.

You can use a custom style for your RadioButton or you can use the android:minHeight="xx" in the layout.

Leave a Reply

Your email address will not be published. Required fields are marked *