Search code examples
androidxamarincolorsradio-button

Android Xamarin: Add Programmatic Radio Buttons with Color


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)?


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.