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 :






3 comments:

  1. Thanks for the information.

    SyonIndia is a Software Development, Website development and SEO company in Bhubaneswar. We offer professional software development services in Bhubaneswar India. Our developers are highly skilled, advance and expert to execute things up to the mark and are efficient enough to cope up with new platforms. We are the leading software development company in Bhubaneswar.
    http://syonindia.com

    ReplyDelete