how to make a customized list view with images and text

1) Create a new Android project go to
    file-> new Android application->
    Type the Application name as:- ListView
    package name as:-com.example.listview
    then click next

2) Then follow these steps:-

     click next

3) 

click next

4)

 

5) click next and change the Activity name according to your need in my case i am using the default 

name as MainActivity

and click finish

6) The layout file will open  

    click to activity_main.xml next to graphical layout tab

    and write this code

    

    <?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/list"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

     />

    </LinearLayout>

7)  Create one more Xml file by right clicking on layout folder->New->Others

     ->Android Xml file  name it as list_item  and write this code

      

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

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

         android:layout_width="fill_parent"

         android:layout_height="fill_parent" >

     <ImageView

        android:id="@+id/icon"

        android:layout_width="80dp"

        android:layout_height="80dp"

        android:contentDescription="@string/image"

        android:paddingLeft="10dp"

        android:paddingRight="10dp" />

    <TextView

        android:id="@+id/title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_toRightOf="@+id/icon"

        android:paddingBottom="10dp"

        android:textColor="#CC0033"

        android:textSize="16sp" />

    </RelativeLayout>

8)  Now click on source folder (src folder) go to the package open MainActivity.java

     and write the following code.

      

    package com.example.listview;

    import java.util.ArrayList;

    import java.util.List;

    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 implements OnItemClickListener{

public static final String[] itemTitles = new String[] { "Twitter",

"Facebook","Linkedin" ,"ImportContact", "Google","Hello Android"};

        

        //  Create the drawable folder in the res folder and put all these images in that particular folder

public static final Integer[] itemImages = { R.drawable.twitter_icon,

R.drawable.fb_icon, R.drawable.linkedin_logo,  

                R.drawable.contact_icon,R.drawable.ic_launcher,R.drawable.ic_launcher };

      

ListView listView;

List<Item> listItems;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

listItems = new ArrayList<Item>();

for (int i = 0; i < itemTitles.length; i++) {

Item item = new Item(itemImages[i], itemTitles[i]);

listItems.add(item);

}

listView = (ListView) findViewById(R.id.list);

CustomArrayAdapter adapter = new CustomArrayAdapter(this,

R.layout.list_item, listItems);

listView.setAdapter(adapter);

listView.setOnItemClickListener(this);

}

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

// TODO Auto-generated method stub

Toast.makeText(this,"Clicked:-"+itemTitles[arg2],Toast.LENGTH_SHORT).show();

 }

   }

9) Create Other class in the same package name it as Item.java

     and write this code

     

    package com.example.listview;

    public class Item {

   

int imageIds;

String title;

public Item(int imageIds, String title) {

super();

this.imageIds = imageIds;

this.title = title;

}

public int getImageIds() {

return imageIds;

}

public void setImageIds(int imageIds) {

this.imageIds = imageIds;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

@Override

public String toString() {

return "Item [title=" + title + "]";

}

   }

 

10) Create Other class in the same package name it as CustomArrayAdapter.java

     and write this code

     

     package com.example.listview;

     import java.util.List;

     import android.app.Activity;

     import android.content.Context;

     import android.view.LayoutInflater;

     import android.view.View;

     import android.view.ViewGroup;

     import android.widget.ArrayAdapter;

     import android.widget.ImageView;

     import android.widget.TextView;

    public class CustomArrayAdapter extends ArrayAdapter<Item> {

    

    Context context;

 

    public CustomArrayAdapter(Context context, int resourceId,

            List<Item> items) {

        super(context, resourceId, items);

        this.context = context;

    }

     

    /*private view holder class*/

    private class ViewHolder {

        ImageView imageView;

        TextView txtTitle;       

    }

     

    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;

        Item itemList = getItem(position);

         

        LayoutInflater mInflater = (LayoutInflater) context

                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) 

      // Checking the convert view against null helps in reusing the resources instead of creating them every time

       {    

            convertView = mInflater.inflate(R.layout.list_item, null);

            holder = new ViewHolder();

            holder.txtTitle = (TextView) convertView.findViewById(R.id.title);

            holder.imageView = (ImageView) convertView.findViewById(R.id.icon);

            convertView.setTag(holder);

        } else

            holder = (ViewHolder) convertView.getTag();                 

     

        holder.txtTitle.setText(itemList.getTitle());

        holder.imageView.setImageResource(itemList.getImageIds());

         

        return convertView;

      }

    }

    

11) Your done now Compile the code run it on emulator and check the results.