Saturday 8 December 2012

Android ListView with image and text (using BaseAdapter)

This tutorial is about creating a ListView which contains image and text as listitem .Here we create a custom listview item  by extend BaseAdapter class.

Following are the steps  to create a project.

Step 1:
Create a project with the following details:
ProjectName     :               CustomListView
PackageName    :               sat.tuts4mobile.customlistview
ActivityName     :               ListViewActivity  

Step 2:
Paste the following code in main.xml .
This is a main xml layout file which contains a listview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

              <ListView
                android:id="@+id/listView1"
                android:layout_width="fill_parent"
                android:layout_height="match_parent" >
            </ListView>
      
       </LinearLayout>

Step 3:
Create a new xml file name listlayout.xml which is used for create a listitem layout .
Paste this code in this file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
      
       <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dip"
        android:background="#336699" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:src="@drawable/ic_launcher" />
             
              <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginTop="8dip"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </LinearLayout>

</LinearLayout>

Step 4:
Create a new class name ListItemDetails which is used as a setter or getter .
Paste this code in this file:

package sat.tuts4mobile.customlistview;
public class ListItemDetails {
      
       private String name;
       private int image;
      
       public String getName()
              {
              return name;
              }
       public void setName(String name)
              {
              this.name = name;
              }
       public int getImage()
              {
              return image;
              }
       public void setImage(int image)
              {
              this.image = image;
              }
}

Step 5:
Create a new class name CustomListAdapter extends BaseAdapter to bind data to listview item .
Paste this code in this file:

package sat.tuts4mobile.customlistview;
import java.util.ArrayList;
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 CustomListAdapter extends BaseAdapter {
               
                private static ArrayList<ListItemDetails> itemDetailsrrayList;
               
                LayoutInflater layoutInflator;
                String[] countryName;
                int[] countryFlag;
                Context context;
               
public CustomListAdapter(ArrayList<ListItemDetails> result , Context c) {
                                // TODO Auto-generated constructor stub
                                itemDetailsrrayList = result;
                                context = c;
                }

                public int getCount() {
                                // TODO Auto-generated method stub
                                return itemDetailsrrayList .size();
                }

                public Object getItem(int arg0) {
                                // TODO Auto-generated method stub
                                return itemDetailsrrayList .get(arg0);
                }

                public long getItemId(int position) {
                                // TODO Auto-generated method stub
                                return position;
                }

                public View getView(int position, View convertView, ViewGroup parent) {
                                // TODO Auto-generated method stub
                               
        layoutInflator  =    
        LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);                               
        View row = layoutInflator.inflate(R.layout.listlayout, parent,false);
                               
        TextView textview = (TextView) row.findViewById(R.id.textView1);
        ImageView imageview = (ImageView) row.findViewById(R.id.imageView1);

        textview.setText(itemDetailsrrayList .get(position).getName());
        imageview.setImageResource(itemDetailsrrayList .get(position).getImage());

        return (row);
                }
 }

Step 6: 
At last paste this code in ListViewActitivty.java :

package sat.tuts4mobile.customlistview;
import java.util.ArrayList;
import android.app.Activity;
import android.database.DataSetObserver;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListAdapter;
import android.widget.ListView;

public class ListViewActivity extends Activity {
               
                String[] text = { "Afghanistan", "Algeria", "Australia", "Bermuda", "Bhutan", "Canada", "China","India","Japan","Kuwait", "Malaysia", "Mexico" };

                int[] image = { R.drawable.afghanistan, R.drawable.algeria, R.drawable.australia,
            R.drawable.bermuda, R.drawable.bhutan, R.drawable.canada, R.drawable.china,
            R.drawable.india, R.drawable.japan, R.drawable.kuwait, R.drawable.malaysia, R.drawable.mexico };

                ListItemDetails item_details;
                /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        ArrayList<ListItemDetails> result = GetSearchResults();
        ListView lv = (ListView)findViewById(R.id.listView1);
        lv.setAdapter(new CustomListAdapter(result,getApplicationContext()));
       
    }
                private ArrayList<ListItemDetails> GetSearchResults() {
                                // TODO Auto-generated method stub
                                ArrayList<ListItemDetails> results = new ArrayList<ListItemDetails>();
                                 
                                for(int i=0;i<text.length;i++)
                                {
                                                item_detailsnew ListItemDetails();
                                                item_details.setName(text[i]);
                                                item_details.setImage(image[i]);
                                                results.add(item_details);
                                }
                               
                                return results;
                }
}

When you run the project it looks like :