Material Design Check Box in Android App

Material Design CheckBox in Android App

In this tutorial, we will learn about how to create a Radio Button in Android App.

Official Documentation of CheckBox

Material Design Check Box with indeterminate in Android

Use Material design library in app-level build.gradle

  implementation 'com.google.android.material:material:1.5.0'  

style.xml (App theme)

 <style name="AppTheme" parent="Theme.MaterialComponents.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>  

Create a XML file to create some checkboxes.

Parent and Child Check Boxes are same, we will change the layout and show the behaviour like parent and child check box and we will change parent check box icon. There is no change in checkbox in XML layout. It's the layout who differs the parent and child checkbox.

We will create 6 Checkboxes, One parent checkbox and  5 child checkboxes.

XML

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   tools:context=".MaterialDesign.Material_CheckBox">  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Hobbies"  
     android:layout_margin="10dp"  
     android:id="@+id/hobby_checkbox"/>  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_marginTop="10dp"  
     android:text="Running"  
     android:enabled="false"  
     android:id="@+id/running_checkbox"/>  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_marginTop="10dp"  
     android:text="Dancing"  
     android:enabled="false"  
     android:id="@+id/dancing_checkbox"/>  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_marginTop="10dp"  
     android:text="Hiking"  
     android:enabled="false"  
     android:id="@+id/hiking_checkbox"/>  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_marginTop="10dp"  
     android:text="Painting"  
     android:enabled="false"  
     android:id="@+id/painting_checkbox"/>  
   <com.google.android.material.checkbox.MaterialCheckBox  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_marginTop="10dp"  
     android:text="Camping"  
     android:enabled="false"  
     android:id="@+id/camping_checkbox"/>  
 </LinearLayout>  

After that cast all Check Boxes and implement on checked change listener on all checkboxes.

• int total count variable is how much child checkboxes we have.
• int checked count variable is how many child checkboxes have checked.
• Whenever a child checkbox is checked or unchecked we will increment or decrement checked count respectively.
• If Checked Count equal 0 means no child checkbox is checked then set parent checkbox icon to empty outline checkbox icon.
• If Checkedcount equals total count means all child checkboxes are checked, then set parent checkbox icon to checked tick checkbox.
• If no conditions true means some checkboxes are checked then set parent checkbox icon to indeterminate icon.
• Check all counts in on checked change listener of child check boxes.

For icons of CheckBoxes, Click Here or Here

JAVA

 public class Material_CheckBox extends AppCompatActivity {  
   CheckBox hobby;  //parent check box  
   CheckBox running_cb,dancing_cb,painting_cb,hiking_cb,camping_cb;  
   int checked_count = 0;  
   int total_count = 5; //child checkboxes count  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_material__check_box);  
     hobby = findViewById(R.id.hobby_checkbox);  
     running_cb = findViewById(R.id.running_checkbox);  
     dancing_cb = findViewById(R.id.dancing_checkbox);  
     painting_cb = findViewById(R.id.painting_checkbox);  
     hiking_cb = findViewById(R.id.hiking_checkbox);  
     camping_cb = findViewById(R.id.camping_checkbox);  
     hobby.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
         //b is true or false  
         running_cb.setEnabled(b);  
         dancing_cb.setEnabled(b);  
         hiking_cb.setEnabled(b);  
         painting_cb.setEnabled(b);  
         camping_cb.setEnabled(b);  
         running_cb.setChecked(b);  
         dancing_cb.setChecked(b);  
         painting_cb.setChecked(b);  
         hiking_cb.setChecked(b);  
         camping_cb.setChecked(b);  
         if(checked_count == 0)  
         {  
           hobby.setButtonDrawable(R.drawable.check_box_outline_blank_20);  
         }  
         else if(checked_count == total_count)  
         {  
           hobby.setButtonDrawable(R.drawable.check_box_tick_20);  
         }  
         else  
         {  
           hobby.setButtonDrawable(R.drawable.indeterminate_check_box_20);  
         }  
       }  
     });  
     running_cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
           checkmethod(b); //pass true or false value to method  
                   //it checks if button is checked or not  
       }  
     });  
     dancing_cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
           checkmethod(b); //pass true or false value to method  
                   //it checks if button is checked or not  
       }  
     });  
     hiking_cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
           checkmethod(b); //pass true or false value to method  
                   //it checks if button is checked or not  
       }  
     });  
     painting_cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
           checkmethod(b); //pass true or false value to method  
                   //it checks if button is checked or not  
       }  
     });  
     camping_cb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {  
       @Override  
       public void onCheckedChanged(CompoundButton compoundButton, boolean b) {  
           checkmethod(b); //pass true or false value to method  
                   //it checks if button is checked or not  
       }  
     });  
   }  
   public void checkmethod( boolean checked)  
   {  
     if(checked)  
     {  
       checked_count++; // if button checked count++  
     }  
     else  
     {  
       checked_count--; // if button unchecked count--  
     }  
     if(checked_count == 0) //if no button is checked then set outline box  
     {  
       hobby.setButtonDrawable(R.drawable.check_box_outline_blank_20);  
     }  
     else if(checked_count == total_count) // if aLL CHECKED then tick box  
     {  
       hobby.setButtonDrawable(R.drawable.check_box_tick_20);  
     }  
     else // if some checked then indeterminate box  
     {  
       hobby.setButtonDrawable(R.drawable.indeterminate_check_box_20);  
     }  
   }  
 }  

Follow us for more posts like this, 
Subscribe to Harpreet studio on Youtube  
Like Harpreet Studio on Facebook  
Follow me on Instagram