Place the text of the radio button inside of it

Question

How to place the text of a radio button inside of it?

Motivation:

I created the menu below "hard coding" it, handling all required situations manually, such as when one button is selected, all the other buttons must be unselected.

However, it was a lot of code, and this functionality is exactly what radio groups and radio buttons already provide, except for the matter of this question: the text of the radio button is placed outside of the button.

Making some tests I ended up with the code below:

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RadioButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:button="@drawable/group_button"
  android:text="@string/char_A"
  />

Width the property button I managed to change the style of the radio button, and along with the text property I achieve this result already:

But the final task that I thought would be the simplest, I couldn't achieve yet.

I tried to hack the source of the RadioButton on Android, to find some method I could override to replace this behavior, but I ended up in a class with 13K lines of code, and I don't think I will be able to discover how it works so soon.

Answer 1

You can use a ChipGroup to achieve the desired effect:

<com.google.android.material.chip.ChipGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:selectionRequired="true"
    app:checkedChip="@+id/default_chip"
    app:singleSelection="true">
    <com.google.android.material.chip.Chip
        android:id="@+id/default_chip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:checkedIconVisible="false"
        android:checkable="true"
        android:text="A"/>
    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:checkedIconVisible="false"
        android:checkable="true"
        android:text="B"/>
    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:checkedIconVisible="false"
        android:checkable="true"
        android:text="C"/>
</com.google.android.material.chip.ChipGroup>

See also the reference for ChipGroup as well as the material design pages for Chips

Answer 2

Just set the radiobutton background to these alphabets image or text and then handle those events in the radiobutton onClick().

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:textSize="17sp"
                    android:onClick="onRadioClick"
                    android:textAppearance="@style/RobotoTextViewStyle"
                    android:background="@color/amber"/>

Instead of color add your alphabet drawable image.