Android ListView using Custom Layout Design

Android ListView using Custom Layout Design – With Android ListView control, we can display a simple list in our application. ListView is view group that displays a list of scrollable items which are insterted in list using Adapter that pulls data from array or database. Android listview control can be made with custom design using draw-able and layout files. This can be achieved with custom adapter such as ArrayAdapter or SimpleCursorAdapter as its data source.

The code is simple :

 SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
 R.layout.list_template, c, DaysOfWeek, id, 0);
 listView.setAdapter(adapter);

We are using SimpleCursorAdapter here. R.layout.list_template is our layout file for the list view, c is cursor, DaysOfWeek is String[] and id is int[] resources.

To make a listview with custom design layout follow this steps :

Step 1: Create layout file.

Make a listview control in activity_main.xml file as below :

res > layout > activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" 
 android:background="#fff">

<ListView
 android:id="@+id/lstView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:clickable="true"
 android:divider="#000"
 android:dividerHeight="1dp"
 android:listSelector="#006cd9" >
 </ListView>

</LinearLayout>

Make another file in layout folder with name list_template.xml and edit it as below :

res > layout >list_template.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#fff"
 android:orientation="horizontal"
 android:padding="5dp" >

<ImageView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/calendar" />

<TextView
 android:id="@+id/txtListElement"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Hello"
 android:textColor="#000" />

</LinearLayout>

 

Make a new class file with name DBController.java and edit it as following :

DBController.java :

package parallelcodes.simplewidget;

import java.util.ArrayList;
import java.util.HashMap;

import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;

public class DBController extends SQLiteOpenHelper {
 private static final String LOGCAT = null;

public DBController(Context applicationcontext) {
 super(applicationcontext, "WeekDaysData.db", null, 1);
 Log.d(LOGCAT, "Created");
 }

@Override
 public void onCreate(SQLiteDatabase database) {
 String query;
 query = "CREATE TABLE IF NOT EXISTS tblWeekDays ( _id INTEGER PRIMARY KEY, DayOfWeek TEXT)";
 database.execSQL(query);

query = "insert into tblWeekDays (DayOfWeek) values ('Sunday')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Monday')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Tuesdayy')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Wednesday')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Thursday')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Friday')";
 database.execSQL(query);
 
 query = "insert into tblWeekDays (DayOfWeek) values ('Saturday')";
 database.execSQL(query);
 }

@Override
 public void onUpgrade(SQLiteDatabase database, int version_old,
 int current_version) {
 String query;
 query = "DROP TABLE IF EXISTS tblWeekDays";
 database.execSQL(query);
 onCreate(database);
 }
 public Cursor getDaysOfWeek() {
 
 String selectQuery = "SELECT * FROM tblWeekDays";
 SQLiteDatabase database = this.getWritableDatabase();
 Cursor cursor = database.rawQuery(selectQuery, null);
 
 
 return cursor;
 }

}

 

And in MainActivity.java file, write this code :

package parallelcodes.simplewidget;

import android.app.Activity;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.support.v4.widget.SimpleCursorAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
 ListView listView;

SQLiteDatabase sqlDb;
 DBController dbController;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 listView = (ListView) findViewById(R.id.lstView);
 int[] id = { R.id.txtListElement };
 String[] DaysOfWeek = new String[] { "DayOfWeek" };
 dbController = new DBController(this);
 sqlDb = dbController.getReadableDatabase();
 Cursor c = dbController.getDaysOfWeek();

SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
 R.layout.list_template, c, DaysOfWeek, id, 0);
 listView.setAdapter(adapter);

}

}

Android ListView using Custom Layout

This is make following design :

Furthermore, Android ListView control can be filled using design file via String-array, using arrayAdapter, using SimpleCursorAdapter, with custom layout file,  can be used with Images.

Please also see : Android Beginners Tutorial.