Android Custom Listview with Image and Text

android The following tutorial assumes that you have already basic knowledge in Android development. In this tutorial we will create an android application with a listview which holds both text and images as listview items. Let’s say we have some sort of search functionality that returns a list of users, along with addresses and phone numbers and profile image. We’re going to display that data in formatted lines for each result, and make it clickable.

First, create your new Android project, and create two layout files. activity_main.xml will probably already be created by default, so paste this in:

<?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" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|center_horizontal"
        android:text="Custom ListView" />
 
    <ListView
        android:id="@+id/srListView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
 
</LinearLayout>

Next, create a layout file called custom_row_view.xml. This layout will be the template for each individual row in the ListView. You can use pretty much any type of layout – Relative, Table, etc., but for this we’ll just use Linear:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="horizontal" >
	<ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
		android:padding="5dp" 
		 />
	
	<LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:padding="2dp"
        android:textColor="#33CC33" />
    <TextView
        android:id="@+id/address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_marginLeft="10dp"/>
    <TextView
        android:id="@+id/phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_marginLeft="10dp"/>
</LinearLayout>


</LinearLayout>

Now, add an object called GetUsers. Paste this code in:

package com.chitta.basicandroid;

public class GetUsers {
    private String name = "";
    private String address = "";
    private String phone = "";
    private Integer icon;

    public void setName(String name) {
     this.name = name;
    }

    public String getName() {
     return name;
    }

    public void setAddress(String address) {
     this.address = address;
    }

    public String getAddress() {
     return address;
    }
    public void setPhone(String phone) {
     this.phone = phone;
    }

    public String getPhone() {
     return phone;
    }
    
    public void setIcon(Integer icon) {
        this.icon = icon;
       }

       public Integer getIcon() {
        return icon;
       }
}

This is the class that we’ll be filling with our data, and loading into an ArrayList.

Next, you’ll need a custom adapter. This one just extends the BaseAdapter, but you could extend the ArrayAdapter if you prefer.

package com.chitta.basicandroid;

import java.util.ArrayList;
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 MyCustomBaseAdapter extends BaseAdapter {
    private static ArrayList<GetUsers> searchArrayList;
  
    private LayoutInflater mInflater;
  
    public MyCustomBaseAdapter(Context context, ArrayList<GetUsers> results) {
        searchArrayList = results;
        mInflater = LayoutInflater.from(context);
    }
  
    public int getCount() {
        return searchArrayList.size();
    }
  
    public Object getItem(int position) {
        return searchArrayList.get(position);
    }
  
    public long getItemId(int position) {
        return position;
    }
  
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.custom_row_view, null);
            holder = new ViewHolder();
            holder.txtName = (TextView) convertView.findViewById(R.id.name);
            holder.txtAddress = (TextView) convertView
                    .findViewById(R.id.address);
            holder.txtPhone = (TextView) convertView.findViewById(R.id.phone);
             
            holder.imageIcon=(ImageView) convertView.findViewById(R.id.icon);
  
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
  
        holder.txtName.setText(searchArrayList.get(position).getName());
        holder.txtAddress.setText(searchArrayList.get(position)
                .getAddress());
        holder.txtPhone.setText(searchArrayList.get(position).getPhone());
         
        holder.imageIcon.setImageResource(searchArrayList.get(position).getIcon());
         
        return convertView;
    }
  
    static class ViewHolder {
        TextView txtName;
        TextView txtAddress;
        TextView txtPhone;
        ImageView imageIcon;
    }
}

Finally, we’ll wire it all up in the main class file:

package com.chitta.basicandroid;

import java.util.ArrayList;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
 
public class CustomListView extends Activity {
        
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.custom_list);
         
        ArrayList<GetUsers> searchResults = GetUsers();
      
        final ListView lv = (ListView) findViewById(R.id.srListView);
        lv.setAdapter(new MyCustomBaseAdapter(this, searchResults));
         
 
        lv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> a, View v, int position, long id) {
                Object o = lv.getItemAtPosition(position);
                GetUsers fullObject = (GetUsers)o;
                Toast.makeText(CustomListView.this, "You have chosen: " + " " + fullObject.getName(), Toast.LENGTH_LONG).show();
            } 
        });
         
    }
    
    
    
    private ArrayList GetUsers(){
    	
    	// Implement here your logic to get users based on user input.  Here I just put some static data for example
        ArrayList results = new ArrayList();
        
        GetUsers sr1 = new GetUsers();
        sr1.setName("John");
        sr1.setAddress("Whitefield, Bangalore");
        sr1.setPhone("214-555-1234");
        sr1.setIcon(R.drawable.artist_icon);
        results.add(sr1);
        
        sr1 = new GetUsers();
        sr1.setName("Shreyashi");
        sr1.setAddress("Atlanta, GA");
        sr1.setPhone("469-555-2587");
        sr1.setIcon(R.drawable.astronaut_icon);
        results.add(sr1);
        
        sr1 = new GetUsers();
        sr1.setName("Amzad");
        sr1.setAddress("Miami, FL");
        sr1.setPhone("305-555-7895");
        sr1.setIcon(R.drawable.chef_icon);
        results.add(sr1);
        
        sr1 = new GetUsers();
        sr1.setName("Priyanka");
        sr1.setAddress("Connaught Place, New Delhi");
        sr1.setPhone("612-555-8214");
        sr1.setIcon(R.drawable.chief_icon);
        results.add(sr1);
        
        sr1 = new GetUsers();
        sr1.setName("Chitta Behera");
        sr1.setAddress("JP Nagar, Bangalore");
        sr1.setPhone("169-555-2589");
        sr1.setIcon(R.drawable.cowboy_icon);
        results.add(sr1);
        
        return results;
       }
}

Notice that we first get an ArrayList of SearchResults objects (normally this would be from an external data source…), pass it to the custom adapter, then set up a click listener. The listener gets the item that was clicked, converts it back to a SearchResults object, and does whatever it needs to do.

Fire it up in the emulator, and you should wind up with something like this:

listview

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s