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;