Custom RadioButtons with different color

Question

I am new to android and try to create a simple color picker.

The idea is to have a few filled circles showing a color and the selected one should have an circle around it.

That didn't sound too hard. I draw the circles with <shape>, create two resources, one with only a filled circle, one with the filled circle and an transparent circle with a solid stroke. Then I created a <selector> and set this as the background of my <RadioButton>.

This worked fine for one color, however now I'd like to have the same styles, but with a different color for each <RadioButton>.

The only solotution I could come up with is to create this triplet of xml-files for each color. This would certainly work, but it strikes me as extremely inelegant.

I tried to access the background of the buttons, but it seems I can only access the <selector>, not it's children.

I also tried to create a FrameLayout that would parent the RadioButton and an ImageView so the RadioButton only needs to display the border. This didn't fully work. I could select a RadioButton, but it wouldn't get deselected upon selecting another one.

I guess the best solution is to have a background that can change itself according to the state of the button, just like <selector> does, but with a more comprehensive way of determining which drawable to use, at least with access to the tag-Property of the RadioButton, but I cannot see how to do this.

The title says CheckBoxes, while in text you talk about RadioButtons.. which one is a typo? — Kuba Spatny, Feb 13 '14 at 00:12
Well I implemented something like that using said "triplet of xml-files", it seemed to me that it was cleaner than setting the resources in the code. Althought thinking of it now, better solution might be creating a custom RadioButton that could have property for color. — Kuba Spatny, Feb 13 '14 at 00:22
I have implemented it this way, too. I'm just wondering if there is a nicer way. It's fine if you have just a very small set of colors, but it doesn't scale. Just imagine having to do this for 30 colors ;D — Mene, Feb 13 '14 at 00:24
I was thinking absolutely the same, but I needed only 8 colors, so I settled for this not so nice but fast solution. — Kuba Spatny, Feb 13 '14 at 00:26
But seriously try doing a custom RadioButton extending RadioButton class. Have 2 shapes (selected, unselected) and in your custom class set the background to unselected shape and edit the shape color dynamically based on added color property in your class as discussed here: http://stackoverflow.com/questions/7164630/how-to-change-shape-color-dynamically. Also note, you will have to change the background based on checked-unchecked state. — Kuba Spatny, Feb 13 '14 at 00:36

score 2 · Accepted Answer · answered May 25 '18 at 10:49

check this github repo

https://github.com/VishalJogiya/CustomRadioAndShapes xml layout code

<customradio.vj.com.library.CustomRadio
      android:id="@+id/radio9"
      android:layout_width="@dimen/thirty_two_dp"
      android:layout_height="@dimen/thirty_two_dp"
      android:layout_marginBottom="@dimen/eight_dp"
      android:layout_marginLeft="@dimen/sixteen_dp"
      android:layout_marginRight="@dimen/sixteen_dp"
      android:layout_marginTop="@dimen/eight_dp"
      custom:radioColor="#AA00FF"
      custom:radioShape="simple_circle2" />

Custom RadioButtons with different color

1 Answers1