ListView example in android with Image and Text Labels

ListView is core component of android. Its feature of binding data dynamically and efficient loading is awesome. It give us lots of command and make our task easy. If you are not aware from Listview then first read How to create simple Listview

There are three component in Listview Android

• ListView Control Widget
• Base Adapter
• Activity

Base Adapter is used to bind data dynamically inside Listrow. So these are the few basic steps to create a Listview in Android

Step 1). Create Two Layout, one for Listview and activity background Second for ListView Row. Here i have taken ListActivity so ListView layout is not needed.

listrow.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:layout_width="fill_parent" android:background="@drawable/strip"  
   android:layout_height="wrap_content"  
   android:orientation="horizontal" >  
   <ImageView  
     android:id="@+id/iamge"  
     android:layout_width="60dp"  
     android:layout_height="60dp"  
     android:layout_margin="4dp"  
     android:contentDescription="@string/app_name" >  
   </ImageView>  
   <TextView  
     android:id="@+id/text1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_marginLeft="20dp"  
     android:layout_gravity="center_vertical"  
     android:padding="@dimen/padding_medium"  
     android:paddingLeft="10dp"  
     android:text="@string/hello_world"  
     android:textColor="@android:color/black"  
     android:textStyle="bold" />  
 </LinearLayout>  

Step 2) Create one Activity as controller to control and work like a bridge between BaseAdapter and Layout

 package com.simplelistviewwithlistactivity;  
 import android.app.AlertDialog;  
 import android.app.AlertDialog.Builder;  
 import android.app.ListActivity;  
 import android.os.Bundle;  
 import android.view.Menu;  
 import android.view.View;  
 import android.widget.ListView;  
 public class ListActivityS extends ListActivity {  
      int[] img = { R.drawable.r1, R.drawable.r2, R.drawable.skycubemap1,  
                R.drawable.skycubemap1, R.drawable.skycubemap2,  
                R.drawable.skycubemap3, R.drawable.skycubemap4,  
                R.drawable.skycubemap5 };  
      @Override  
      public void onCreate(Bundle savedInstanceState) {  
           super.onCreate(savedInstanceState);  
           getListView().setDividerHeight(2);  
           getListView().setAdapter(new BindDataAdapter(this, img, item));  
      }  
      @Override  
      protected void onListItemClick(ListView l, View v, int position, long id) {  
           super.onListItemClick(l, v, position, id);  
           Builder builder = new AlertDialog.Builder(this);  
           builder.setMessage(item[position] + " is clicked.");  
           builder.setPositiveButton("OK", null);  
           builder.show();  
      }  
      @Override  
      public boolean onCreateOptionsMenu(Menu menu) {  
           getMenuInflater().inflate(R.menu.activity_list, menu);  
           return true;  
      }  
      private String item[] = { "This is list Item1", "This is list Item2",  
                "This is list Item3", "This is list Item4", "This is list Item5",  
                "This is list Item6", "This is list Item8", "This is list Item8" };  
 }  

Step 3) Adapter( or so called BaseAdapter)

 package com.simplelistviewwithlistactivity;  
 import android.app.Activity;  
 import android.content.Context;  
 import android.view.LayoutInflater;  
 import android.view.View;  
 import android.view.ViewGroup;  
 import android.widget.BaseAdapter;  
 import android.widget.ImageView;  
 import android.widget.TextView;  
 public class BindDataAdapter extends BaseAdapter {  
      Activity mLocal;  
      int[] imgArray;  
      String titleA[];  
      LayoutInflater mLayoutInflater;  
      public BindDataAdapter(Activity activity, int[] imageArray, String[] title) {  
           mLocal = activity;  
           imgArray = imageArray;  
           titleA = title;  
           mLayoutInflater = (LayoutInflater) activity  
                     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
      }  
      public int getCount() {  
           return imgArray.length;  
      }  
      public Object getItem(int position) {  
           return null;  
      }  
      public long getItemId(int position) {  
           return 0;  
      }  
      private class Holder {  
           ImageView image;  
           TextView textView;  
      }  
      public View getView(int position, View convertView, ViewGroup parent) {  
           Holder holder = null;  
           if (convertView == null) {  
                convertView = mLayoutInflater.inflate(R.layout.activity_list, null);  
                holder = new Holder();  
                holder.image = (ImageView) convertView.findViewById(R.id.iamge);  
                holder.textView = (TextView) convertView.findViewById(R.id.text1);  
                convertView.setTag(holder);  
           } else {  
                holder = (Holder) convertView.getTag();  
           }  
           holder.image.setBackgroundResource(imgArray[position]);  
           holder.textView.setText(titleA[position]);  
           return convertView;  
      }  
 }  

You can download source code and play with it. This code output will be like that

ListView With Image

Biggest advantage of using BaseAdapter and ListView, is its efficient loading capacity. BaseAdapter bind view to ListView when every row created first time then it keeps all already created row in memory and load them from memory. This make ListView damn fast

In my code i have Holder class that make sure that we will inflate a row layout only when row is created first time

                                                                      

                                                          Download Source Code