Personalizar CheckBox

Dependiendo del tipo de aplicaciones que estamos desarrollando podems tener unas necesidades u otras. Una de ellas, y que vamos a ver en este post puede ser: customizar los checkbox que Android nos ofrece. A continuació presento el código para realizarlo:

Esta clase contiene los textos que se van a mostrar en el checkbox.
res/xml/filters_checkbox.xml

 <filterCheckBox>
    <item
        description=""
        title="CheckBox1">
        <item
            description=""
            title="CheckBox2">
            <item
                description=""
                title="CheckBox3">
                <item
                    description=""
                    title="CheckBox4">
                </item>
            </item>
        </item>
    </item>
</filterCheckBox>

Esta clase contiene el estilo de los checkboxes. Para ello modificamos la imagen de cuando esta seleccionado o no. (El drawable que se añade son imagenes que estan en su res/drawable/).

res/drawable/style_checkboxes.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/checkbox_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/checkbox_unchecked" android:state_checked="false"/>
</selector>

Esta clase contiene el estilo de cada checkbox. Es aqui donde le aplicamos el estilo anterior.

res/layout/filters_multiple_choice_list.xml
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    android:background="#FFFFFF"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:checkMark="@drawable/style_checkboxes"
    android:enabled="true"
    android:checked="true"
    android:gravity="center_vertical"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#FF0000" />

Esta clase es al vista principal. Contiene la lista de checkboxes.
res/layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ListView
        android:id="@+id/listview_filters_checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:cacheColorHint="#000000"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:scrollbars="none" >
    </ListView>
</RelativeLayout>

Esta clase une a todas la anteriores. Es donde se muestran los datos.
src/CustomCheckBoxes.java

import java.io.IOException;
import java.util.ArrayList;
import org.xmlpull.v1.XmlPullParserException;
import android.app.Activity;
import android.content.res.XmlResourceParser;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class CustomCheckBoxes extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        // declare variables
        ListView checkBoxListView;
        String[] checkBoxNameList;
        ArrayList<String> checkBoxList;
        // get data
        checkBoxListView = (ListView) findViewById(R.id.listview_filters_checkbox);
        checkBoxList = PrepareListFromXml();
        checkBoxNameList = (String[]) checkBoxList.toArray(new String[0]);
        // set data to list
        checkBoxListView.setAdapter(new ArrayAdapter<String>(
                CustomCheckBoxes.this, R.layout.filters_multiple_choice_list,
                checkBoxNameList));
        checkBoxListView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    }

    private ArrayList<String> PrepareListFromXml() {
        ArrayList<String> preferenceItems = new ArrayList<String>();
        XmlResourceParser preferencelistXml;
        preferencelistXml = getResources().getXml(R.xml.filters_checkbox);
        int eventType = -1;
        while (eventType != XmlResourceParser.END_DOCUMENT) {
            if (eventType == XmlResourceParser.START_TAG) {

                String strNode = preferencelistXml.getName();
                if (strNode.equals("item")) {
                    preferenceItems.add(preferencelistXml.getAttributeValue(
                            null, "title"));
                }
            }
            try {
                eventType = preferencelistXml.next();
            } catch (XmlPullParserException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return preferenceItems;
    }
}

Si ejecutamos el proyecto se nos mostraría la siguiente imagen:

It works!

Roger Sala,