Android MaterialCheckbox Example Tutorial
Checkboxes are a type of #selectioncontrol. Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.
Android CheckBox class is the subclass of the CompoundButton class. It is generally used in a place where users can select one or more choices from a given list of choices
Checkbox Usage
Checkboxes allow the user to select one or more items from a set. You should use a #checkbox when presenting a group of selectable options to users that are not mutually exclusive.
Checkboxes can be used to turn an option on or off. One very common use of CheckBox is as the remember me option in a Login form.
*Important note: In Android each checkbox is independent. On other platforms where Material design is used checkboxes can have a parent-child relationship. That does not apply to Android.Checkbox Attributes
By default checkboxes appear at the left and are followed by their text.
android:text
You can add text to the checkbox in XML or programmatically:
You can add various text attributes to the checkbox in XML:
android:textColor
android:textSize
android:textAppearance
android:textStyle
Further attributes include, padding, gravity and background color.
You can even place the checkbox on the right and have the text at the left using the drawableEnd attribute and setting the button attribute to null. See the "Morning Briefing" checkbox below:
Material Checkbox Example App
In this tutorial we use MaterialCheckboxes as a #selectioncontrol in the settings of a news app. A user can select checkboxes to choose which notifications to receive.
Checkboxes are the best selection control option here, because the choices are nonexclusive - they can choose one option, two options or all three.
Step 1: Create a new Android Studio project with an Empty Activity. Name the project SwitchMaterialExample.
The Save location should be a place that makes sense on your computer. If you click on the open folder you can choose a location.
Choose Java or Kotlin. Pick a minimum SDK of API 21: Android 5.0 (Lollipop). You do not need any legacy android support libraries.
Add the Widgets
Step 2: Add the TextView and the 3 MaterialCheckBoxes using the code below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity"
android:layout_margin="24dp">
<TextView
android:id="@+id/tVNotifications"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="News Notifications"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxBreakingNews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tVNotifications"
android:text="Breaking News"
/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxMorningBriefing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/checkBoxBreakingNews"
android:text="Morning Briefing"/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxEveningBriefing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/checkBoxMorningBriefing"
android:text="Evening Briefing"/>
</androidx.constraintlayout.widget.ConstraintLayout>Find your Checkbox in Code
Step 3: Create a variable for each of the checkboxes in your MainActivity. Connect them to the UI widgets.
Set a Listener
Step 4: Set an onCheckedChangedListener() for each checkbox. As a parameter, type new then control + space to enable the interface.
It is important to note, we can check the current state of a checkbox programmatically by using isChecked() method.
This method returns a Boolean value (true or false). If a checkbox is checked then it returns true, otherwise it returns false.
Include a Toast
Place a Toast inside each onCheckedChangedListener, so that the user receives a message each time they subscribe to a news notification. The toasts are shown in the screenshot above, but for a quick reference here's the news notifications toast:
Toast.makeText(MainActivity.this,
"You are now subscribed to breaking news notifications",
Toast.LENGTH_SHORT).show();Run the app
Now what?
Learn more about UI by checking out more #selectioncontrols such as the #SwitchMaterial or #radioButton.
Source code for activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity"
android:layout_margin="24dp">
<TextView
android:id="@+id/tVNotifications"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="News Notifications"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxBreakingNews"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tVNotifications"
android:text="Breaking News"
/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxMorningBriefing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/checkBoxBreakingNews"
android:text="Morning Briefing"/>
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/checkBoxEveningBriefing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/checkBoxMorningBriefing"
android:text="Evening Briefing"/>
</androidx.constraintlayout.widget.ConstraintLayout>MainActivity.java:
package io.meghandev.checkboxesexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.Toast;
import com.google.android.material.checkbox.MaterialCheckBox;
public class MainActivity extends AppCompatActivity {
MaterialCheckBox checkBoxBreakingNews;
MaterialCheckBox checkBoxMorningBriefing;
MaterialCheckBox checkBoxEveningBriefing;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
checkBoxBreakingNews =
findViewById(R.id.checkBoxBreakingNews);
checkBoxMorningBriefing =
findViewById(R.id.checkBoxMorningBriefing);
checkBoxEveningBriefing =
findViewById(R.id.checkBoxEveningBriefing);
checkBoxBreakingNews.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
Toast.makeText(MainActivity.this,
"You are now subscribed to breaking news
notifications",
Toast.LENGTH_SHORT).show();
}
});
checkBoxMorningBriefing.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
Toast.makeText(MainActivity.this,
"You are now subscribed to morning briefing
notifications",
Toast.LENGTH_SHORT).show();
}
});
checkBoxEveningBriefing.setOnCheckedChangeListener(new
CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
Toast.makeText(MainActivity.this,
"You are now subscribed to evening briefing
notifications",
Toast.LENGTH_SHORT).show();
}
});
}
}