Android Snippet – Android Custom ListView with CheckBox

Android Snippet – Android Custom ListView with CheckBox

In this android code snippet example tutorial, we are going to learning how to create an android custom ListView with CheckBox. We have written a lot about android ListView is it is among the common used Views in android application development.

If you will like to read more tutorials about android ListView and the different use cases during android application development, kindly follow this link – Android ListView.

Android custom ListView and CheckBox can be used to achieve different features. Imagine if a user wants to select options in a list, the CheckBox can come in handy in achieving this.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCustomListViewWithCheckBox

Package: com.inducesmile.androidcustomlistviewwithcheckbox

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

If we want to customized the look and feel of a ListView in such a way that it will contain CheckBox then we will build our own custom layout and use it to replace the default android layout for ListView items.

What we will do first

1. We are going to add a ListView in our activity_main.xml file. This is our main layout file which is located in the res/layout folder in our application project.

2. We will create a new android layout in res/layout folder and we will call the new layout listview_with_checkbox.xml.

3. In our newly created layout, we will add a TextView and a CheckBox. This View Controls will be used by individual items of the ListView.

To start with the first task, open you activity_main.xml file and paste the following code snippet on it.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />

</RelativeLayout>

Also open your listview_with_checkbox.xml file, copy and paste the code below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="30dp"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginStart="30dp"
android:layout_marginTop="28dp" />

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:focusable="false"
android:id="@+id/checkBox"
android:layout_marginRight="20dp"
android:layout_marginBottom="-5dp"
android:layout_alignBottom="@+id/textView"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />

</RelativeLayout>

Remember to add android:focusable to false in the CheckBox so that the event attached to the ListView can fire.

Lets move on to the MainActivity.java file. This is the main interface file and we are going to do the follow in other to accomplish our task.

1. We will get the instance of our ListView through the findViewById method of the Activity Class

2. we create a List that store ListView item objects. The object has a String parameter that holds the data that will be passed to the TextView. The code snippet for the class is shown below. Note that you can just store a String in the List instead of using an object.

package inducesmile.com.androidcustomlistviewwithcheckbox;

public class ItemObject {

private String name;

public ItemObject(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

3. We attach the ListView item listener to our ListView. When a ListView item is clicked, we used to Toast class to display the position of the item clicked.

Below is the code for MainActivity.java

package inducesmile.com.androidcustomlistviewwithcheckbox;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ListView listViewWithCheckBox = (ListView)findViewById(R.id.listView);

List<ItemObject> listViewItems = new ArrayList<ItemObject>();
listViewItems.add(new ItemObject("Nigeria"));
listViewItems.add(new ItemObject("Ghana"));
listViewItems.add(new ItemObject("Senegal"));
listViewItems.add(new ItemObject("Togo"));

listViewWithCheckBox.setAdapter(new CustomListView(this, listViewItems));
listViewWithCheckBox.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// make Toast when click
Toast.makeText(getApplicationContext(), "Position " + position, Toast.LENGTH_LONG).show();
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Save the file and run your project. If everything works for you, an image like this will appear on your test device.

Android Snippet – Android Custom ListView with CheckBox

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

Add a Comment