Android ListView Control – A detailed Overview

Android Listview Control - From String-Array.png

Android ListView Control – 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.
Adapter works as an intermediate between the datasource and the AdapterView layout where Adapter retrieves the data.

Attributes of Android Listview control :

Some important attributes of Android Listview are :

android:choiceMode – Used to define choice mode of listview.
Ex : android:choiceMode=”multipleChoice”

android:clickable – Used to define, if our listview is clickable or not
Ex : android:clickable=”true”

android:divider – Used to define divider color or draw-able of listview control .
Ex : android:divider=”#000″

android:dividerHeight – Used to define height of divider.
Ex : android:dividerHeight=”1dp”

android:entries – Used to define datasource from string arrays.
Ex : android:entries=”@array/DaysOfWeek”

android:listSelector – Used to define color or draw-able of list selector.
Ex : android:listSelector=”#006cd9″

android:longClickable – Used to define if listview control is long clickable or not. Boolean Flag.
Ex : android:longClickable=”true”

 


Now let’s see different ways to fill our listview control.

Different ways to fill our Android Listview control :

1.From String-array :

Android Listview control can be directly filled from design file if you have a static data to be shown on Listview control.

In your activity_main.xml file, make a listview control with following attributes :

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" >

<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:entries="@array/DaysOfWeek"
 android:listSelector="#006cd9" >
 </ListView>

</LinearLayout>

And in your strings.xml file, add following string-array :

res > values > strings.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">ParallelCodes</string>
 <string name="hello_world">Hello world!</string>
 <string name="action_settings">Settings</string>

<string-array name="DaysOfWeek">
 <item name="Sunday">Sunday</item>
 <item name="Sunday">Monday</item>
 <item name="Sunday">Tuesdayy</item>
 <item name="Sunday">Wednesday</item>
 <item name="Sunday">Thursday</item>
 <item name="Sunday">Friday</item>
 <item name="Sunday">Saturday</item>
 </string-array>
</resources>

MainActivity.java file :

package parallelcodes.simplewidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {
 ListView listView;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 listView = (ListView) findViewById(R.id.lstView);
 listView.setOnItemClickListener(new OnItemClickListener() {

@Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {
 Toast.makeText(getApplicationContext(), listView.getItemAtPosition(position).toString(),
 Toast.LENGTH_SHORT).show();
 }
 });
 }

}

 

This will produce following design listview control at runtime :

Android Listview Control - From String-Array.png

Android Listview Control – From String-Array.png


2.From ArrayAdapter-

ArrayAdapter can be used as a datasource to our Android ListView control when our data is simple array.

Ex : 

String[] DaysOfWeek = new String[] { “Sunday”, “Monday”, “Tuesdayy”,
“Wednesday”, “Thursday”, “Friday”, “Saturday” };

Now, let’s use is array in our listview control.

Edit the 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" >

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

And java class MainActivity.java as below :

MainActivity.java:

package parallelcodes.simplewidget;

import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.ArrayAdapter;
 import android.widget.ListView;
 import android.widget.Toast;

public class MainActivity extends Activity {
 ListView listView;
 String[] DaysOfWeek = new String[] { "Sunday", "Monday", "Tuesdayy",
 "Wednesday", "Thursday", "Friday", "Saturday" };

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 listView = (ListView) findViewById(R.id.lstView);
 ArrayAdapter adapter = new ArrayAdapter<String>(this,
 android.R.layout.simple_list_item_1, DaysOfWeek);
 listView.setAdapter(adapter);
 listView.setOnItemClickListener(new OnItemClickListener() {

@Override
 public void onItemClick(AdapterView<?> parent, View view,
 int position, long id) {
 Toast.makeText(getApplicationContext(),
 listView.getItemAtPosition(position).toString(),
 Toast.LENGTH_SHORT).show();
 }
 });
 }

}

This will produce following design listview control at runtime :

Android Listview Control - From ArrayAdapter.png

Android Listview Control – From ArrayAdapter.png


3.From SimpleCursorAdapter :

To use SimpleCursorAdapter as a datasource to our Listview control follow this steps :

Edit the activity_main.xml file as below.

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" >

<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 a new layout file in res > layout folder with name list_template.xml and edit it as below.

res > layout > list_template.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/txtListElement"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:textColor="#fff" >

</TextView>

Create a new class in your project with name DBController.java and edit it as below :

src > 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;
 }

}

This is important. Over here we are creating a new sqlite database with a table in it. And then inserting data in it at the time of creation. Now edit your MainActivity.java file as below :

MainActivity.java:

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);
 
 }

}

This will create a listview with below design :

Android ListView using SimpleCursorAdapter

Android ListView using SimpleCursorAdapter

 

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.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.