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_details= new 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 :

 Click here to download Source Code