Interface: Custom CheckBox and RadioButton

This article look at how you can customize the controls such as CheckBox and RadioButton. Differences from the usual buttons in the fact that they have two states: check and uncheck.

What is used

For our purposes are used widgets CheckBox and RadioButton. The main property in xml to customize when creating these widgets to change the look:

• android:button – button image element.

To customize the behavior of the elements necessary to use selector. This xml-file that specifies which image to use for the different states of the element.

For example, use the following elements

• for CheckBox (download):

•  for RadioButton (download):

 Our selector will look like this (drawable/custom_checkbox_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/checkbox_on"

android:state_checked="true" android:state_enabled="true"/>

    <item android:drawable="@drawable/checkbox_off"

android:state_checked="false" android:state_enabled="true"/>

    <item android:drawable="@drawable/checkbox_on_disable"

android:state_checked="true" android:state_enabled="false"/>

    <item android:drawable="@drawable/checkbox_off_disable"

android:state_checked="false" android:state_enabled="false"/>

    <item android:drawable="@drawable/checkbox_off"/>

</selector>

- android:state_checked ="true|false" indicates the status of the element: check or uncheck;

The other attributes are described in this article.

Selector for RadioButton will be next (drawable/custom_radio_selector.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/radio_button_on_disable"

android:state_checked="true" android:state_enabled="false"/>

    <item android:drawable="@drawable/radio_button_off_disable"

android:state_checked="false" android:state_enabled="false"/>

    <item android:drawable="@drawable/radio_button_on"

android:state_checked="true" android:state_enabled="true"/>

    <item android:drawable="@drawable/radio_button_off"

android:state_checked="false" android:state_enabled="true"/>

</selector>

Practice

Now we need to create our interface. We will modify the file main.xml. To add an element selector, you must use the following construction:

android:button="@drawable/custom_checkbox_selector"

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <CheckBox

        android:id="@+id/checkbox_1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:button="@drawable/custom_checkbox_selector"

        android:checked="false"

        android:text="@string/check_1" />

    <CheckBox

        android:id="@+id/checkbox_2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:button="@drawable/custom_checkbox_selector"

        android:checked="false"

        android:enabled="false"

        android:text="@string/check_2" />

    <RadioGroup

        android:id="@+id/radioGroup"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content" >

        <RadioButton

            android:id="@+id/radio_1"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="true"

            android:text="@string/radio_1" />

        <RadioButton

            android:id="@+id/radio_2"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="false"

            android:text="@string/radio_2" />

        <RadioButton

            android:id="@+id/radio_3"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:button="@drawable/custom_radio_selector"

            android:checked="false"

            android:enabled="false"

            android:text="@string/radio_3" />

    </RadioGroup>

</LinearLayout>

Now we need to add a behavior to each button in the program. This example creates the following items: 2 CheckBox, 1 RadioGroup, which contains 3 RadioButton.

 
public class CustomCheckExampleActivity extends Activity implements RadioGroup.OnCheckedChangeListener,
View.OnClickListener{
    
 private CheckBox check_1, check_2;
 private RadioGroup radioGroup;
 private Context context;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        this.context = this;
        
        this.check_1 = (CheckBox)findViewById(R.id.checkbox_1);
        this.check_2 = (CheckBox)findViewById(R.id.checkbox_2);
        this.radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
        
        this.check_1.setOnCheckedChangeListener(new OnCheckedChangeListener() {
   
   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    check_2.setEnabled(isChecked);    
   }
  });
        this.check_2.setOnCheckedChangeListener(new OnCheckedChangeListener() {
   
   @Override
   public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    RadioButton btn = (RadioButton)radioGroup.getChildAt(radioGroup.getChildCount() - 1);
    btn.setEnabled(isChecked);    
   }
  });
    }
 @Override
 public void onClick(View arg0) {
  radioGroup.clearCheck();
  
 }
 @Override
 public void onCheckedChanged(RadioGroup group, int checkedId) {
  Toast.makeText(context, "" + group.getCheckedRadioButtonId(), Toast.LENGTH_SHORT).show();
 }
}

Links

• The source codes of this project can be downloaded here: zip