Custom RadioGroup with different custom RadioButtons on Android | by Manuel Mato | Byte Tech

Working in an expert setting, it’s common for the consumer to entrust us with a design of RadioButtons that aren’t those now we have by default in Android, which means designing customized RadioButtons and having the conduct of this native widget, growing the event time.

I’ll clarify what strategy I adopted to attain the next outcome and the way it works with the intention to implement this practice RadioGroup with customized RadioButtons in your mission:

The concept that was transmitted to me on the time has been to undergo the views which might be contained in the identical container, on this case a ConstraintLayout, and examine one after the other if that view is a customized RadioButton and, if that’s the case, paint and take away relying on whether or not the view is chosen or not.

The issue is that in the identical query now we have completely different RadioButton designs for the solutions, which implies one class for every design, so checking one after the other the category of the view isn’t a great resolution, since you must keep in mind that if the consumer presents us with a brand new design, we don’t need to contact the category that paints and unselects the views, as a result of the conduct has not modified. For this I resorted to Java inheritance, on this means all the customized RadioButtons prolong from a base class, so all of the customized RadioButtons are of the bottom sort, that’s, the daddy. This additionally avoids duplicating code within the creation of the identical, along with following the identical model in all these courses daughters.

The customized RadioButtons created should be of the ultimate sort to keep away from undesirable inheritances.

And I selected the inheritance in entrance of the composition as a result of on this case, all of the buttons are ConstraintLayout.

The customized RadioGroup is a category that extends ConstraintLayout and is the container for the query with its completely different responses whose conduct is to paint the views by making use of the types relying on whether or not they’re chosen or unselected views.

It’s essential to overwrite the addView technique. This technique begins in the mean time through which the customized RadioGroup is instantiated, exhibiting the model that by default now we have established in the principle XML and it has been overwritten to detect any click on of the chosen view that may be a customized RadioButton and to have the ability to paint the completely different buttons. The strategy is the next:

What does this technique do?

  1. Examine that the chosen view is a customized RadioButton
  2. Caste sight to father sort
  3. Paint all customized RadioButtons with the model of buttons not chosen
  4. Paint the chosen button together with your model
  5. Lastly, the callback is initialized to seize the press on the principle exercise

The strategies of factors 3 and 4 should be custom-made with the design you must carry out dynamically, and within the XML in a static means.

Why is it filtered by the bottom occasion?

As a result of a container can comprise different views which might be excluded from the conduct of radio buttons. For instance, the query is a TextView that may be in the identical container and make an embrace in the principle design, however it doesn’t apply the conduct that the solutions should have: standing of chosen and never chosen.

How is the customized RadioGroup carried out within the XML?

To implement the customized RadioGroup within the XML, it’s the similar as to implement a ConstraintLayout as a container:

This tradition RadioGroup comprises a TextView that’s the query and two solutions which might be the customized RadioButtons with a single centered textual content.

At this level, we will run the app and see that the views are painted and unpainted as we choose one or the opposite however it’s essential to know which view is chosen to have the ability to make the suitable logic.

Needless to say these views have been instantiated when the onCreate () technique of the exercise was executed, so it’s essential to initialize the callback of the customized RadioGroup class of an already instantiated object. For this, I’ve determined to create a static technique to set the worth of the callback.

To take action, I attempted to be as devoted as doable to the native Java kind by calling the setOnClickListener technique by the view and passing it the brand new worth as a parameter:

CustomRadioGroup.setOnClickListener(new OnCustomRadioButtonListener() 
public void onClick(View view)


The outcome within the code altering the tactic by a lambda expression, capturing the press and exhibiting a Toast with the worth of the button, is the next:

You will need to create a category that returns the data of every button as a substitute of assigning the values straight within the exercise, taking accountability away from it. On this means, if at any time the content material of the buttons adjustments, you simply should go to the Mapper class to alter the outcomes with out having to do it within the exercise, in addition to that the code will likely be decreased in it and it will likely be simpler to learn.

The mapper isn’t greater than a category to which the id of the chosen button is handed and, on this case, it returns a String with the suitable worth.

To this point now we have seen that we want a base class for all customized RadioButtons, a customized RadioGroup class that dynamically paints and unpacks views, a callback interface that communicates the customized RadioGroup with the button exercise and mapper.

However how will we reuse this practice RadioGroup within the mission?

Within the picture above now we have two packages in the principle root:



Inside commons now we have the radiobutton bundle with the categories folder, the BaseCustomRadioButton, the CustomRadioGroup and the OnCustomRadioButtonListener interface.

So as to add the widget to your mission it’s only essential to copy the radiobutton folder. It’s essential to add in your individual customized RadioButtons sorts that reach from the BaseCustomRadioButton and at last copy the mapper in your ui bundle, including the id of the buttons with the worth to return.

I hope this tutorial saves you time when you might have to create customized RadioButtons and a customized RadioGroup on Android and, when you have any questions, I hope your feedback !!!

Custom RadioGroup with different custom RadioButtons on Android | by Manuel Mato