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 .

ListView is not used in android Anymore. We use RecyclerView and CardView  in Android

• RecyclerView Demo is available on the following link

http://androidtuts4u.blogspot.in/2017/04/android-recyclerview-example.html

• RecyclerView with Cardview Example is available on the following link

http://androidtuts4u.blogspot.in/2017/09/android-card-view-example.html

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=0BySLpWhqmbbdUXE5aTNhazludjQ&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

                  btnsubmit.setOnClickListener(new OnClickListener() {

   @Override
   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

             

   ContactListItems contactListItems = new ContactListItems();

       contactListItems.setSlno(c1.getString(c1
    .getColumnIndex("slno")))

IV. Object of the bean class(contactListItems) is added to a ArrayList of type ContactListItems(Bean class)

     ArrayList<contactlistitems> contactList = new 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) {.....

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

           

    LayoutInflater inflater = (LayoutInflater) context

                       .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

       convertView = inflater.inflate(R.layout.contact_list_row, null);

The value we passed through ArrayList(contactList) is set to corresponding textView < <

       ContactListItems contactListItems = contactList.get(position);
      TextView tvSlNo = (TextView) convertView.findViewById(R.id.tv_slno);
      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>