Customized Listview in Android

Posted By : Ravi Sharma | 09-Oct-2013

android

ListView In Android

The ListView control supplied by the Android SDK is by default simple, plain.The default look and feel of the Android ListView is not very appealing as it only renders a simple string in every ListView row using the internal TextView control.

For most applications, you want to create an interface like listview that is more graphically rich and visually pleasing to the user. This blog does exactly the same.

This the main layout file

	<?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:id="@+id/text"

	        android:layout_width="match_parent"

	        android:layout_height="wrap_content"

	        android:gravity="center"

	        android:text="Customized List"

	        android:textSize="30dp" >

	    </TextView>

	

	    <ListView

	        android:id="@+id/list"

	        android:layout_width="match_parent"

	        android:layout_height="wrap_content"

	        

	        />

	

	</LinearLayout>

Here is the custom list items xml file, which contains image , text (unlike normal list)

		<?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:paddingLeft="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:paddingLeft="10dp"

		        android:textColor="#CC0033"

		        android:textSize="16dp" />

		 

		    <TextView

		        android:id="@+id/desc"

		        android:layout_width="wrap_content"

		        android:layout_height="wrap_content"

		        android:layout_below="@+id/title"

		        android:layout_toRightOf="@+id/icon"

		        android:paddingLeft="10dp"

		        android:textColor="#3399FF"

		        android:textSize="14dp" />

		</RelativeLayout>

Here is Pojo class to save each ListView row data.

		package com.example.listwithimageandtext;

		

		

		public class PojoClass {

		private String name = "";

		private String description = "";

		private int image ;

		

		public void setName(String name) {

		        this.name = name;

		    }

		

		    public String getName() {

		        return name;

		    }

		

		    public void setDescription(String description) {

		        this.description = description;

		    }

		

		    public String getDescription() {

		        return description;

		    }

		

		    public void setImage(int imageId) {

		        this.image = imageId;

		    }

		

		    public int getImage() {

		        return image;

		    }

		

		}

Create Custom adapter. Pass Arraylist to adapter. Adapter called recursively for each listview row and get data from Model(Pojo Class) inside ArrayList.

		package com.example.listwithimageandtext;

		

		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 CustomListAdapter extends BaseAdapter {

		private static ArrayList<PojoClass> searchArrayList;

		

		private LayoutInflater mInflater;

		

		public CustomListAdapter(Context context,
		ArrayList<PojoClass> 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.listitem,

		                    null);

		        

		            

		        }

		        

		            holder = new ViewHolder();

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

		            holder.description = (TextView) convertView

		                    .findViewById(R.id.desc);

		            

		            holder.image = (ImageView) convertView

		                    .findViewById(R.id.icon);

		            convertView.setTag(holder);

		        

		

		        holder.title.setText(searchArrayList.get(position).getName());

		        holder.description.setText(searchArrayList.get(position)

		                .getDescription());

		        holder.image.setImageResource(searchArrayList.get(position)

		                .getImage());

		

		        return convertView;

		    }

		

		    static class ViewHolder {

		        TextView title;

		        TextView description;

		        ImageView image;

		

		    }

		}

This is Main Activity class, Inside this activity Set Adapter to ListView.

	package com.example.listwithimageandtext;

	

	import java.util.ArrayList;

	

	

	

	import android.os.Bundle;

	import android.app.Activity;

	import android.view.View;

	import android.view.Window;

	import android.widget.AdapterView;

	import android.widget.ListView;

	import android.widget.Toast;

	import android.widget.AdapterView.OnItemClickListener;

	

	public class MainActivity extends Activity {

	

	@Override

	protected void onCreate(Bundle savedInstanceState) {

	super.onCreate(savedInstanceState);

	this.requestWindowFeature(Window.FEATURE_NO_TITLE);

	setContentView(R.layout.activity_main);
	}@Override

	protected void onResume() {
	super.onResume();

	

	ArrayList<PojoClass> searchResults = GetSearchResults();

	

	        final ListView lv = (ListView) findViewById(R.id.list);

	        lv.setAdapter(new CustomListAdapter(this, searchResults));

	        lv.setSelector(R.drawable.listitembg);

	        

	        lv.setOnItemClickListener(new OnItemClickListener() {

	            @Override

	            public void onItemClick(AdapterView<?> a, View v, int position,

	                    long id) {

	                Object o = lv.getItemAtPosition(position);

	                PojoClass fullObject = (PojoClass) o;

	                Toast.makeText(MainActivity.this,

	                        "You have chosen: " + " " + fullObject.getName(),

	                        Toast.LENGTH_LONG).show();

	            }

	        });

	    }

	

	    private ArrayList<PojoClass> GetSearchResults() {

	        ArrayList<PojoClass> results = new ArrayList<PojoClass>();

	

	        PojoClass sr = new PojoClass();

	        sr.setName("Batman Begins");

	        sr.setDescription("Released in 2006");

	        sr.setImage(R.drawable.movie1);

	

	        results.add(sr);

	

	        sr = new PojoClass();

	        sr.setName("Paul");

	        sr.setDescription("Released in 2011");

	        sr.setImage(R.drawable.movie2);

	        results.add(sr);

	

	        sr = new PojoClass();

	        sr.setName("Sapphires");

	        sr.setDescription("Released in 2012");

	        sr.setImage(R.drawable.movie3);

	        results.add(sr);

	

	        sr = new PojoClass();

	        sr.setName("Olympus");

	        sr.setDescription("Released in 2012");

	        sr.setImage(R.drawable.movie4);

	        results.add(sr);

	        

	        sr = new PojoClass();

	        sr.setName("The Croods");

	        sr.setDescription("Released in 2012");

	        sr.setImage(R.drawable.movie5);

	        results.add(sr);

	        

	

	        return results;

	    }

	

	}

Here is the output