Checkbox

In Android, Checkbox is use to select multiple options from number of choice. For the better user interference this is very important to customize the checkbox according to need of theme. In this tutorial i am covering some steps of customization.

Download Demo  

<CheckBox

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title" />

Steps to use Checkbox in your project.

1. Crate a project in android studio.
    
2. Open your main_activity.xml and update it-

    <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:orientation="vertical"
       tools:context="com.pankaj.checkbox.MainActivity">
   
       <!--_____________________________________________________-->
       <!--                                                     -->
       <!--                create simple checkbox               -->
       <!--_____________________________________________________-->
   
       <CheckBox
           android:id="@+id/checkbox1Simple"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="checkbox1Simple" />
   
       <CheckBox
           android:id="@+id/checkbox2Simple"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="checkbox2Simple" />
   
       <!--_____________________________________________________-->
       <!--                                                     -->
       <!--                create custom checkbox               -->
       <!--_____________________________________________________-->
   
       <CheckBox
           android:id="@+id/checkbox3Custom"
           style="@style/custom_check_box"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="checkbox3Custom" />
   
       <CheckBox
           android:id="@+id/checkbox4Custom"
           style="@style/custom_check_box"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="checkbox4Custom" />
   
   </LinearLayout>
   
   

     
   
3. In the above main_activity.xml, i am using two types of checkbox. First two checkbox have default theme. Last two checkbox have custom theme which is defined in style.xml. So open the style.xml and add new style to it.
   
   

    <!--check box styles-->
       <style name="custom_check_box" parent="android:Widget.CompoundButton.CheckBox">
           <item name="android:button">@drawable/selector_check_box</item>
           <item name="android:textColor">@color/colorPrimary</item>
           <item name="android:textSize">15sp</item>
           <item name="android:titleMargin">5dp</item>
           <item name="android:paddingLeft">5dp</item>
           <item name="android:layout_width">wrap_content</item>
           <item name="android:layout_height">wrap_content</item>
       </style>
   

   
   
4. Now your style.xml should be like this-
   
   

   <resources>
       <!-- Base application theme. -->
       <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
           <!-- Customize your theme here. -->
           <item name="colorPrimary">@color/colorPrimary</item>
           <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
           <item name="colorAccent">@color/colorAccent</item>
       </style>
   
       <!--check box styles-->
       <style name="custom_check_box" parent="android:Widget.CompoundButton.CheckBox">
           <item name="android:button">@drawable/selector_check_box</item>
           <item name="android:textColor">@color/colorPrimary</item>
           <item name="android:textSize">15sp</item>
           <item name="android:titleMargin">5dp</item>
           <item name="android:paddingLeft">5dp</item>
           <item name="android:layout_width">wrap_content</item>
           <item name="android:layout_height">wrap_content</item>
       </style>
   </resources>
   

   
    
5. Now see in your style, there are a custom drawable is used
    

   <item name="android:button">@drawable/selector_check_box</item> 

6. So go to your resource directory and select your drawable directory and create new drawable resource file(drawable/selector_check_box.xml).
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_window_focused="false"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true" android:state_window_focused="false"/>
       <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_pressed="true"/>
       <item android:drawable="@drawable/check" android:state_checked="false" android:state_enabled="true" android:state_pressed="true"/>
       <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_focused="true"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true" android:state_focused="true"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true"/>
       <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true"/>
   
       <!-- Disabled states -->
       <item android:drawable="@drawable/uncheck" android:state_checked="true" android:state_enabled="false" android:state_window_focused="false"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="false" android:state_window_focused="false"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="true" android:state_enabled="false" android:state_focused="true"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="false" android:state_focused="true"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="false"/>
       <item android:drawable="@drawable/uncheck" android:state_checked="true"/>
   </selector>
   

    
7. Open your MainActivity.JAVA class and update it for change text at run time-
   
   

   package com.pankaj.checkbox;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.widget.CheckBox;
   import android.widget.CompoundButton;
   import android.widget.Toast;
   
   public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
   
       //create checkbox object
       private CheckBox checkbox1Simple, checkbox2Simple, checkbox3Custom, checkbox4Custom;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           //initialize objects
           checkbox1Simple = (CheckBox) findViewById(R.id.checkbox1Simple);
           checkbox2Simple = (CheckBox) findViewById(R.id.checkbox2Simple);
           checkbox3Custom = (CheckBox) findViewById(R.id.checkbox3Custom);
           checkbox4Custom = (CheckBox) findViewById(R.id.checkbox4Custom);
   
           //add listener
           checkbox1Simple.setOnCheckedChangeListener(this);
           checkbox2Simple.setOnCheckedChangeListener(this);
           checkbox3Custom.setOnCheckedChangeListener(this);
           checkbox4Custom.setOnCheckedChangeListener(this);
       }
   
       @Override
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
          
           //A meesage will be show on every selected/unselected condition
           Toast.makeText(this, compoundButton.getText() + " : " + (b ? "Selected" : "Unselected"), Toast.LENGTH_SHORT).show();
       }
   }
   

   
   
8. Now all the development process for Checkbox has completed, Please run the application.
   
   
   
   
   
   
9. Now select any checkbox from first two checkboxes and see the result on screen-
    
    
   
   
10. Now select any checkbox from last two checkboxes and see the result on screen-
    
     
    
    
    
11.  Good bye, Thanks to read this blog.

Download Demo