Style Radio Button and Text inside AlertDialog

Question

I want to show a radio list inside an AlertDialog with custom styling, something like .

So I created a custom theme and provided that as an argument to AlertDialog.Builder's constructor.

Here's the code for showing the dialog :

private void showSortDialog() {
final CharSequence[] options = new String[] {"Relevance", "Newest"};
    AlertDialog.Builder builder = new AlertDialog.Builder(getActivityReference(),
                                                          R.style.RadioDialogTheme);
    builder.setTitle("Sort by");
    builder.setSingleChoiceItems(options, -1, new DialogInterface.OnClickListener() {
    . . . . 
    builder.create().show();
}

Here's the style :

<style name="RadioDialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="android:textColorAlertDialogListItem">@drawable/radiobutton_textcolor_selector
    </item>
    <item name="android:listChoiceIndicatorSingle">@drawable/apptheme_btn_radio_holo_light
    </item>
</style>

I was able to find a couple of attributes which I added in my style to change the color of the radio button / text based on their state. But I'm not able to customize the text appearance (I want to change the size, provide padding etc).

I'm sure there is some attribute using which I can style the text but I'm not able to find it. Can anyone please help me with this? Thanks.

Answer 1

I guess it's almost you need:

fun showSortDialog(context: Activity) {
    val options = arrayOf(
        "Relevance",
        "Price - Low to High",
        "Price - High to Low",
        "Newest"
    )
    val builder = AlertDialog.Builder(context, R.style.MultiChoiceAlertDialog)
    val view = context.layoutInflater.inflate(R.layout.dialog_custom, null, false)
    val radioGroup = view.findViewById<RadioGroup>(R.id.radiogroup)

    val purpleColor = ContextCompat.getColor(context, R.color.purple)
    val radioStyle = ContextThemeWrapper(radioGroup.context, R.style.MyRadioButton)
    for (option in options) {
        val radioButton = RadioButton(radioStyle)
        radioButton.setText(option)
        radioGroup.addView(radioButton)
    }
    radioGroup.setOnCheckedChangeListener { group, checkedId ->
        for (child in radioGroup.children) {
            child as RadioButton
            if (child.id == checkedId) {
                child.setTextColor(purpleColor)
            } else {
                child.setTextColor(Color.BLACK)
            }
        }
    }
    builder.setView(view)
    builder.show()
}

styles:

 <style name="YourAlertDialog.Button" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:textColor">@color/colorPrimary</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:gravity">left</item>
    <item name="android:letterSpacing">0</item>
</style>
<style name="MultiChoiceAlertDialog" parent="Theme.MaterialComponents.Light.Dialog.Alert">
    <item name="buttonBarPositiveButtonStyle">@style/YourAlertDialog.Button</item>
    <item name="buttonBarNegativeButtonStyle">@style/YourAlertDialog.Button</item>
    <item name="buttonBarNeutralButtonStyle">@style/YourAlertDialog.Button</item>
    <item name="android:background">#fff</item>
    <item name="android:textColorPrimary">#000</item>
    <item name="android:textColor">@drawable/selector_custom</item>
    <item name="android:colorActivatedHighlight">#0f0</item>
    <item name="android:colorControlActivated">#00f</item>
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/purple</item>
    <item name="dialogCornerRadius">8dp</item>
</style>

<style name="MyRadioButton" parent="Theme.AppCompat.Light">
    <item name="colorControlNormal">@color/gray</item>
    <item name="colorControlActivated">@color/purple</item>
</style>

and the custom layout(dialog_custom.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:text="Sort by"
    android:textColor="#000"
    android:textSize="20sp" />
<RadioGroup
    android:id="@+id/radiogroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</RadioGroup>