Android Xamarin: Add Programmatic Radio Buttons with Color

Issue

I am trying to build something like this:

My app gets a question-answer array. For each answer, I need to programmatically create a RadioButton (in the picture, for example, there are 4 radio buttons).

So my first question is, would you work with RadioButtons or do you think another approach would do the job better?

And my second question: is it possible to change the color of each radio button, or how can I give each RadioButton a little View, where I can set the background color (one that has the button, then a little square with the color, and then the text of the radio button)?

Maybe you can help me :)

Solution

So my first question is, would you work with RadioButtons or do you think another workaround would do the job better?

Yes, a RadioButton here fit this job.

is it possible to change the color for each radio button

Yes, it is possible. Just set the drawable resource for android:button of a RadioButton. For example:

<RadioGroup android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="5dp">
  <RadioButton android:id="@+id/ware1"
               android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:text="@string/Ware1"
               android:button="@drawable/gradient"
               android:paddingLeft="8dp" />
  <RadioButton android:id="@+id/ware2"
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           android:text="@string/Ware2" />
  <RadioButton android:id="@+id/ware3"
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           android:text="@string/Ware3" />
  <RadioButton android:id="@+id/ware4"
           android:layout_height="wrap_content"
           android:layout_width="wrap_content"
           android:text="@string/Ware4" />
</RadioGroup>

I only created a selector for the first RadioButton, the background color of this button is gradient, you can take this as an example and create yours:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="false">
    <layer-list>
      <item android:height="25dp" android:width="25dp">
        <shape android:shape="oval">
          <gradient
              android:startColor="#E0FFCD"
              android:endColor="#42FAA1"
              android:angle="45" />
          <stroke android:width="2dp"
                  android:color="#000000" />
        </shape>
      </item>
    </layer-list>
  </item>
  <item android:state_checked="true">
    <layer-list>
      <item android:height="25dp" android:width="25dp">
        <shape android:shape="oval">
          <gradient
              android:startColor="#E0FFCD"
              android:endColor="#42FAA1"
              android:angle="45" />
          <stroke android:width="2dp"
                  android:color="#2d1717" />
        </shape>
      </item>
      <item android:height="10dp" android:width="10dp"
            android:gravity="center">
        <shape android:shape="rectangle">
          <solid android:color="#000000" />
        </shape>
      </item>
    </layer-list>
  </item>
</selector>

If you find this too trouble to create shapes for each button, you can use image resources to replace them, anyway, you will need to create selectors for each RadioButton, and a selector is for the checked and unchecked state of RadioButton.

Answered By - Grace Feng