Why aren't the radio buttons displayed when I use MaterialAlertDialogBuilder? - android-studio

Question

The Code A is based the article.
And I get Image A when I run Code A, it seems that all the radio buttons aren't displayed .
What's wrong with my code?
Code A
val singleItems = arrayOf("Item 1", "Item 2", "Item 3")
val checkedItem = 1
val context = LocalContext.current
MaterialAlertDialogBuilder(context)
.setTitle("Title")
.setNeutralButton("Cancel") { dialog, which ->
}
.setPositiveButton("OK") { dialog, which ->
}
.setSingleChoiceItems(singleItems, checkedItem) { dialog, which ->
}
.show()
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.SoundMeter" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
</style>
<style name="Theme.SoundMeter.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.SoundMeter.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.SoundMeter.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Image A

Answer 1

Tried with the MaterialAlertDialogBuilder still the same issue.
So I created the dialog using the Dialog Composable
#Composable
fun CustomDialog(
title: String = "Title",
onDismiss: (() -> Unit)? = {},
radioItems: List<String> = listOf("Item 1", "Item 2", "Item 3"),
positiveAction: () -> Unit = {},
negativeAction: () -> Unit = {},
positiveText: String = "Ok",
cancelledText: String = "Cancel",
selectedIndex: MutableState<Int> = mutableStateOf(1),
changeIndex: (Int) -> Unit = { index -> selectedIndex.value = index }
) {
Dialog(onDismissRequest = { onDismiss?.invoke() }) {
Column(modifier = Modifier.background(Color.White)) {
Text(
text = title,
modifier = Modifier.padding(top = 16.dp, start = 16.dp, bottom = 16.dp),
fontWeight = FontWeight.Bold
)
radioItems.forEachIndexed { index, radioText ->
Row(
modifier = Modifier.fillMaxWidth().clickable { changeIndex(index) },
verticalAlignment = Alignment.CenterVertically
) {
RadioButton(
selected = index == selectedIndex.value,
colors = RadioButtonDefaults.colors(selectedColor = Color.Blue),
onClick = { changeIndex(index) }
)
Text(text = radioText, modifier = Modifier.padding(start = 16.dp))
}
}
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
OutlinedButton(
onClick = {
negativeAction()
onDismiss?.invoke()
},
border = BorderStroke(0.dp, Color.Transparent),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
) { Text(text = cancelledText, color = Color.Red) }
OutlinedButton(
onClick = {
positiveAction()
onDismiss?.invoke()
},
border = BorderStroke(0.dp, Color.Transparent),
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent)
) { Text(text = positiveText, color = Color.Blue) }
}
}
}
}
Screenshot