Android CheckBox Tutorial
|
|
In earlier tutorial we've learn about radio buttons which allows user to select an option from a set, but what if the user need to select more then one options? Checkboxes solve this problem by allowing the user to select one or more options from a set. Like radio buttons, checkboxes not organized in groups. In simple words checkboxes are 2-state toggles that can be on/off or checked/unchecked.
1. Create a new project by going to File ⇒ New Android Project and fill required details:
Project Name : CheckBoxExample
Package : com.sunil.checkbox
Main Activity : MainActivity.java
Layout : main.xml
Build Target : Android 2.22. Open res/values/strings.xml file, add some user-defined string.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">CheckBoxExample</string>
<string name="chk_c">C</string>
<string name="chk_cpp">C++</string>
<string name="chk_java">Java</string>
<string name="chk_net">.NET</string>
<string name="tv_msg">What is your fav?</string
</resources>
<resources>
<string name="app_name">CheckBoxExample</string>
<string name="chk_c">C</string>
<string name="chk_cpp">C++</string>
<string name="chk_java">Java</string>
<string name="chk_net">.NET</string>
<string name="tv_msg">What is your fav?</string
</resources>
2. Open the res/layout/main.xml file and insert the following code:
<?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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:text="@string/tv_msg" />
<CheckBox
android:id="@+id/chk_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_c" />
<CheckBox
android:id="@+id/chk_cpp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_cpp" />
<CheckBox
android:id="@+id/chk_java"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_java" />
<CheckBox
android:id="@+id/chk_net"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_net" />
<TextView
android:id="@+id/tv_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:text="@string/tv_msg" />
<CheckBox
android:id="@+id/chk_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_c" />
<CheckBox
android:id="@+id/chk_cpp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_cpp" />
<CheckBox
android:id="@+id/chk_java"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_java" />
<CheckBox
android:id="@+id/chk_net"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckBoxClicked"
android:text="@string/chk_net" />
<TextView
android:id="@+id/tv_display"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="" />
</LinearLayout>
As you can see we simply add four checkboxes by using <CheckBox> element.We also define click event handler for individual <CheckBox> element by using android:onClick attribute. We set android:onClick="onCheckBoxClicked" that is we also need to implement the onCheckBoxClicked() method into our activity that host this layout, for example in our case the Activity is MainActivity.java. Finally we add a <TextView> to show that the individual checkbox is on/off.
Note:- You can also make a checkbox is checked by default by adding android:checked="true" inside <CheckBox> element.
Note:- You can also make a checkbox is checked by default by adding android:checked="true" inside <CheckBox> element.
3. Now open the MainActivity.java file and add the following code:
package com.sunil.checkbox;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.TextView;
public class MainActivity extends Activity {
TextView display;
CheckBox c;
CheckBox cpp;
CheckBox java;
CheckBox net;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
display = (TextView) findViewById(R.id.tv_display);
c = (CheckBox) findViewById(R.id.chk_c);
cpp = (CheckBox) findViewById(R.id.chk_cpp);
java = (CheckBox) findViewById(R.id.chk_java);
net = (CheckBox) findViewById(R.id.chk_net);
}
// Custom Method to handle checkbox click events
public void onCheckBoxClicked(View v){
if(v.getId()==R.id.chk_c){
if(c.isChecked())
display.setText(display.getText()+"\nC On");
else
display.setText(display.getText()+"\nC Off");
}
else if(v.getId()==R.id.chk_cpp){
if(cpp.isChecked())
display.setText(display.getText()+"\nC++ On");
else
display.setText(display.getText()+"\nC++ Off");
}
else if(v.getId()==R.id.chk_java){
if(java.isChecked())
display.setText(display.getText()+"\nJava On");
else
display.setText(display.getText()+"\nJava Off");
}
else if(v.getId()==R.id.chk_net){
if(net.isChecked())
display.setText(display.getText()+"\n.NET On");
else
display.setText(display.getText()+"\n.NET Off");
}
}
}
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.TextView;
public class MainActivity extends Activity {
TextView display;
CheckBox c;
CheckBox cpp;
CheckBox java;
CheckBox net;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
display = (TextView) findViewById(R.id.tv_display);
c = (CheckBox) findViewById(R.id.chk_c);
cpp = (CheckBox) findViewById(R.id.chk_cpp);
java = (CheckBox) findViewById(R.id.chk_java);
net = (CheckBox) findViewById(R.id.chk_net);
}
// Custom Method to handle checkbox click events
public void onCheckBoxClicked(View v){
if(v.getId()==R.id.chk_c){
if(c.isChecked())
display.setText(display.getText()+"\nC On");
else
display.setText(display.getText()+"\nC Off");
}
else if(v.getId()==R.id.chk_cpp){
if(cpp.isChecked())
display.setText(display.getText()+"\nC++ On");
else
display.setText(display.getText()+"\nC++ Off");
}
else if(v.getId()==R.id.chk_java){
if(java.isChecked())
display.setText(display.getText()+"\nJava On");
else
display.setText(display.getText()+"\nJava Off");
}
else if(v.getId()==R.id.chk_net){
if(net.isChecked())
display.setText(display.getText()+"\n.NET On");
else
display.setText(display.getText()+"\n.NET Off");
}
}
}
4. Now run your project. (See the screenshots below)
That's it ! You can also download the source code of this tutorial.










Post a Comment