Styling a sectioned RadioGroup

Question

TL;DR

How do I make sectioned RadioGroup and style it like the AlertDialog.SetSingleChoiceItems? More precisely: How do I indent the options in the RadioGroup in the same way content in AlertDialog.SetSingleChoiceItems is indented?

Context

The user is getting a alertDialog, where they need to make a choice through RadioButtons. There are two scenarios, which I need to be similarly styled:

A: No options are recommended

• Options are displayed in a regular AlertDialog.SetSingleChoiceItems

B: Some options are recommended

• Recommended options are displayed in the top. Unrecommended options are displayed below a line

The code

        private void ShowAlert(object sender, EventArgs eventArgs)
        {
            var dialogBuilder = new Android.App.AlertDialog.Builder(this);
            dialogBuilder.SetTitle("My Title");

            string[] recommendedItems = { "Radio button 1", "Radio button 2"};
            string[] unrecommendedItems = { "Radio button 3", "Radio button 4" };

            List<RadioButtonItem> items = new List<RadioButtonItem>() {
                new RadioButtonItem { Label = "Radio button 1", Recommended = true},
                new RadioButtonItem { Label = "Radio button 2", Recommended = false},
                new RadioButtonItem { Label = "Radio button 3", Recommended = false},
                new RadioButtonItem { Label = "Radio button 4", Recommended = true},
            };

            RadioGroup radioGroup = new RadioGroup(this);

            TextView recommendedText = new TextView(this)
            {
                Text = "Recommended"
            };

            radioGroup.AddView(recommendedText);
            addRadioButtons(radioGroup, items, true);

            //Add divider between the recommended/unrecommended options
            LinearLayout divider = new LinearLayout(this);
            var dividerSize = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, 1);
            divider.LayoutParameters = dividerSize;
            divider.SetBackgroundColor(new Color(Color.DimGray));
            radioGroup.AddView(divider);

            addRadioButtons(radioGroup, items, false);


            dialogBuilder.SetView(radioGroup);

            dialogBuilder.SetPositiveButton("OK", delegate { });
            dialogBuilder.Show();
        }

        private void addRadioButtons(RadioGroup radioGroup, List<RadioButtonItem> items, bool recommended)
        {
            for (int i = 0; i < items.Count; i++)
            {
                RadioButtonItem item = items[i];
                RadioButton rb = new RadioButton(this) { Text = item.Label };

                if (item.Recommended == recommended)
                {
                    radioGroup.AddView(rb);
                }

            }
        }

The problem

The problem arise, when I try to style the second scenario like this first. I am unable to indent the options, without making a mess.

• If I indent the entire radioGroup, then the divider line also gets indented.
• If I add padding to the radio buttons, then the text moves, but the circles stay
• I am unable to wrapping the buttons in something, which I can add the padding to, since the buttons need to be a direct child of RadioGroup to function

Answer 1

I ended up solving the issue, by setting clipToPadding to false for the radioGroup. Then I added the indented distance as padding to the radioGroup

RadioGroup radioGroup = new RadioGroup(this);
int indentedDistance = 60;
radioGroup.SetClipToPadding(false);
radioGroup.SetPadding(indentedDistance, 0, 0, 0);

The same distance removed from the divider by adding it as a negative value

var dividerStyle = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, 1);
dividerStyle.SetMargins(-indentedDistance, 0, 0, 0);
divider.LayoutParameters = dividerStyle;

Answer 2

I find the margin_start property of the radiobutton can control the distance of the button and the group. But we can't set it in the code just in xml. So I used a another way which uses a linearlayout to contain two radiogroup and the divier. The code is as follows:

linearlyout.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</LinearLayout>

method code:

private void ShowAlert()
{
    var dialogBuilder = new Android.App.AlertDialog.Builder(this);
    dialogBuilder.SetTitle("My Title");
    string[] recommendedItems = { "Radio button 1", "Radio button 2" };
    string[] unrecommendedItems = { "Radio button 3", "Radio button 4" };
    List<RadioButtonItem> items = new List<RadioButtonItem>() {
            new RadioButtonItem { Label = "Radio button 1", Recommended = true},
            new RadioButtonItem { Label = "Radio button 2", Recommended = false},
            new RadioButtonItem { Label = "Radio button 3", Recommended = false},
            new RadioButtonItem { Label = "Radio button 4", Recommended = true},
        };
LayoutInflater layoutInflater = LayoutInflater.From(this);
LinearLayout linearLayout = (LinearLayout)layoutInflater.Inflate(Resource.Layout.item2, null);
RadioGroup radioGroup1 = new RadioGroup(this);
radioGroup1.SetPadding(100, 0, 0, 0);
RadioGroup radioGroup2 = new RadioGroup(this);
radioGroup2.SetPadding(100, 0, 0, 0);
TextView recommendedText = new TextView(this)
{
    Text = "Recommended"
};
linearLayout.AddView(recommendedText);
addRadioButtons(radioGroup1, items, true);
linearLayout.AddView(radioGroup1);
LinearLayout divider = new LinearLayout(this);
var dividerSize = new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, 1);
divider.LayoutParameters = dividerSize;
divider.SetBackgroundColor(new Color(Color.DimGray));

linearLayout.AddView(divider);

addRadioButtons(radioGroup2, items, false);

linearLayout.AddView(radioGroup2);
dialogBuilder.SetView(linearLayout);

dialogBuilder.SetPositiveButton("OK", delegate { });
dialogBuilder.Show();
}

private void addRadioButtons(RadioGroup radioGroup, List<RadioButtonItem> items, bool recommended)
{

for (int i = 0; i < items.Count; i++)
{
    RadioButtonItem item = items[i];
    RadioButton rb = new RadioButton(this) { Text = item.Label };
    if (item.Recommended == recommended)
    {
        radioGroup.AddView(rb);
    }

}
}