Android List View using Custom Adapter and SQLite

following is a simple applicaton to create ListView

using Custom adapter.screenshot of the application is
like this .

The ListView below the submit button is populated using

Custom Adapter.Data is stored and retrieved using SQLite
databsase.

you can download the source code of this project

from google
drive https://drive.google.com/folderview?id=0BySLp
WhqmbbdUXE5aTNhazludjQ&usp=sharing
click on the above link ->sign into your google
account ->add this to your google drive -> open it in
google drive and download it.

To create a simple application like this

1. Create a class which extends SQLiteOpenHelper , this class

is used to create SQLite database, The class is given below

package com.arun.democustomadapter;

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteDatabase.CursorFactory;
import android.database.sqlite.SQLiteOpenHelper;

public class SqlDbHelper extends SQLiteOpenHelper {

public static final String DATABASE_TABLE = "PHONE_CONTACTS";

public static final String COLUMN1 = "slno";

public static final String COLUMN2 = "name";
public static final String COLUMN3 = "phone";
private static final String SCRIPT_CREATE_DATABASE = "create table "
+ DATABASE_TABLE + " (" + COLUMN1
+ " integer primary key autoincrement, " + COLUMN2
+ " text not null, " + COLUMN3 + " text not null);";

public SqlDbHelper(Context context, String name, CursorFactory

factory,
int version) {
super(context, name, factory, version);
// TODO Auto-generated constructor stub

@Override
public void onCreate(SQLiteDatabase db) {
// TODO Auto-generated method stub
db.execSQL(SCRIPT_CREATE_DATABASE);

@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion)
{
// TODO Auto-generated method stub
db.execSQL("DROP TABLE IF EXISTS " + DATABASE_TABLE);
onCreate(db);
}

2. After creating the database we need another class

which is used as handler to insert,update,delete,update
operation on our database . Handler class is given below

package com.arun.democustomadapter;

import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;

public class SqlHandler {

public static final String DATABASE_NAME = "MY_DATABASE";

public static final int DATABASE_VERSION = 1;
Context context;
SQLiteDatabase sqlDatabase;
SqlDbHelper dbHelper;

public SqlHandler(Context context) {

dbHelper = new SqlDbHelper(context, DATABASE_NAME, null,

DATABASE_VERSION);
sqlDatabase = dbHelper.getWritableDatabase();
}

public void executeQuery(String query) {

try {

if (sqlDatabase.isOpen()) {
sqlDatabase.close();
}

sqlDatabase = dbHelper.getWritableDatabase();
sqlDatabase.execSQL(query);

} catch (Exception e) {

System.out.println("DATABASE ERROR " + e);

}

public Cursor selectQuery(String query) {

Cursor c1 = null;
try {

if (sqlDatabase.isOpen()) {
sqlDatabase.close();

}
sqlDatabase = dbHelper.getWritableDatabase();
c1 = sqlDatabase.rawQuery(query, null);

} catch (Exception e) {
 System.out.println("DATABASE ERROR " + e);

}
return c1;

3. Now we created basic classes for all database

operation .Now we need to design our main XML
page,Main.xml is given below

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/LinearLayout1"

android:layout_width="match_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >
 <TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/name" />

<EditText

android:id="@+id/et_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10" >

</EditText>

</TableRow>

<TableRow

android:id="@+id/tableRow2"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/phone" />
 <EditText

android:id="@+id/et_phone"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ems="10" >

</EditText>

</TableRow>

</TableLayout>

<LinearLayout

android:id="@+id/LinearLayout2"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

<Button

android:id="@+id/btn_submit"

android:layout_width="80dp"

android:layout_height="40dp"

android:layout_marginLeft="40dp"

android:text="@string/submit" />

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp" >

<TextView

android:id="@+id/tv_slno"

android:layout_width="50dp"

android:layout_height="wrap_content"

android:text="slno"

android:textColor="#000" />

<TextView

android:id="@+id/tv_name"

android:layout_width="100dp"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:text="@string/name"

android:textColor="#000" />

<TextView

android:id="@+id/tv_phone"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:text="@string/phone"

android:textColor="#000" />
 </LinearLayout>

<ListView

android:id="@+id/lv_custom_list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp" >

</ListView>

</LinearLayout>
4. After designing Main.xml next is to create the
MainActivity, the class is given below

package com.arun.democustomadapter;

import java.util.ArrayList;

import android.app.Activity;
import android.database.Cursor;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity {

SqlHandler sqlHandler;
ListView lvCustomList;
EditText etName, etPhone;
Button btnsubmit;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
 lvCustomList = (ListView) findViewById(R.id.lv_custom_list);
etName = (EditText) findViewById(R.id.et_name);
etPhone = (EditText) findViewById(R.id.et_phone);
btnsubmit = (Button) findViewById(R.id.btn_submit);
sqlHandler = new SqlHandler(this);
showList();
btnsubmit.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {

String name = etName.getText().toString();

String phoneNo = etPhone.getText().toString();

String query = "INSERT INTO PHONE_CONTACTS(name,phone) values ('"

+ name + "','" + phoneNo + "')";
sqlHandler.executeQuery(query);
showList();
etName.setText("");
etPhone.setText("");

}
});

private void showList() {

ArrayList<contactlistitems> contactList = new

ArrayList<contactlistitems>();
contactList.clear();
String query = "SELECT * FROM PHONE_CONTACTS ";
Cursor c1 = sqlHandler.selectQuery(query);
if (c1 != null &amp;&amp; c1.getCount() != 0) {
if (c1.moveToFirst()) {
do {
ContactListItems contactListItems = new ContactListItems();

contactListItems.setSlno(c1.getString(c1
.getColumnIndex("slno")));
contactListItems.setName(c1.getString(c1
.getColumnIndex("name")));
contactListItems.setPhone(c1.getString(c1
.getColumnIndex("phone")));
contactList.add(contactListItems);

} while (c1.moveToNext());
}
}
c1.close();

ContactListAdapter contactListAdapter = new ContactListAdapter(

MainActivity.this, contactList);
 lvCustomList.setAdapter(contactListAdapter);

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
How code works>>>when the submit button is clicked
values in EditTextfields are inserted into database that is
written inside
1 btnsubmit.setOnClickListener(new OnClickListener() {
2
3 @Override
4 public void onClick(View v) {.....

then showList( ) function is called which will populate

value to listView . To populate values we need to do the
following

I. select data from the database

String query = "SELECT * FROM PHONE_CONTACTS ";

II . Create a bean class for setting and getting values

(ContactListItems)
III. Values selected from the databse is set to the object of
the bean class

1 ContactListItems contactListItems = new ContactListItems();

2
3 contactListItems.setSlno(c1.getString(c1
4 .getColumnIndex("slno")))

IV. Object of the bean class(contactListItems) is added to

a ArrayList of type ContactListItems(Bean class)

ArrayList<contactlistitems> contactList = new

1 ArrayList<contactlistitems>(); contactList.add(contactListItems);
V. The Created ArrayList and context of the class is
passed to CustomAdapter which will do the rest
ContactListAdapter contactListAdapter = new ContactListAdapter(
MainActivity.this, contactList);

5. The bean class is given below

package com.arun.democustomadapter;

public class ContactListItems {

String slno;
String name;
String phone;

public String getSlno() {

return slno;
}

public void setSlno(String slno) {

this.slno = slno;
}

public String getName() {

return name;
}

public void setName(String name) {

this.name = name;
}

public String getPhone() {

return phone;
}

public void setPhone(String phone) {

this.phone = phone;
}

}
6. Then create a Custom Adapter class by extending
BaseAdapter , class is given below
package com.arun.democustomadapter;
import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ContactListAdapter extends BaseAdapter {

Context context;
ArrayList<ContactListItems> contactList;

public ContactListAdapter(Context context, ArrayList<ContactListItems>

list) {

this.context = context;
contactList = list;
}

@Override
public int getCount() {

return contactList.size();
}

@Override
public Object getItem(int position) {

return contactList.get(position);
}

@Override
public long getItemId(int position) {

return position;
}

@Override
public View getView(int position, View convertView, ViewGroup arg2) {
ContactListItems contactListItems = contactList.get(position);

if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.contact_list_row, null);

}
TextView tvSlNo = (TextView) convertView.findViewById(R.id.tv_slno);
tvSlNo.setText(contactListItems.getSlno());
TextView tvName = (TextView) convertView.findViewById(R.id.tv_name);
 tvName.setText(contactListItems.getName());
TextView tvPhone = (TextView) convertView.findViewById(R.id.tv_phone);
tvPhone.setText(contactListItems.getPhone());

return convertView;
}

}
how custom Adapter works >>>> the main part of custom
Adapter is
public View getView(int position, View convertView, ViewGroup arg2)
1 {.....
to customize the listview we need to create an
xml(contact_list_row.xml).This xml layout is the row of our
listView.This layout is inflated using inflater service

1 LayoutInflater inflater = (LayoutInflater) context

2
3 .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
4
5 convertView = inflater.inflate(R.layout.contact_list_row, null);

The value we passed through ArrayList(contactList) is set

to corresponding textView < <
1 ContactListItems contactListItems = contactList.get(position);
TextView tvSlNo = (TextView)
2 convertView.findViewById(R.id.tv_slno);
3 tvSlNo.setText(contactListItems.getSlno());
6.The contact_list_row.xml is given below
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<TextView
android:id="@+id/tv_slno"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="slno"
android:textColor="#000" />

<TextView
android:id="@+id/tv_name"
android:layout_width="100dp"
android:layout_height="wrap_content"
 android:layout_marginLeft="10dp"
android:text="TextView"
android:textColor="#000" />

<TextView
android:id="@+id/tv_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="TextView"
android:textColor="#000" />

</LinearLayout>
Posted by arun krishna at 11:25