Tuesday, December 28, 2010

Demonstration for Android Custom List Model For ListView

This is a yet another but a very useful and powerful Sample for Android's ListView.

Following are the Screen Shorts for the application:



Platforms used in the Example are as follows:

Ubuntu 10.10
Android SDK 2.2
Eclipse 3.5 (Galileo)

Start With creating a new Android Project in Eclipse & Replace the two Layout Files and the Activity Source Code.

For this example we need to define two layout files,

One is the basic layout i.e. which contains the ListView
Other Layout File Represents the instance of the Textview which will represent the Each Text Item in the Displayed List.
I have also defined the Height and the Width for the ListView, Its only for the customization purpose, you can use "fill_parent" or "wrap_content" properties according to your requirements.

In the main Activity Class, We create an inner class i.e. CustomListAdapter which extends android.widget.BaseAdapter which defines the content properties to be loded for the ListView.
Also We have defined an OnItemClickListener which will give a Toast Popup for the Selected List Item.

Following is the Codes For the two different Layout files:

main.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView 
android:id="@+id/TextView01" 
android:layout_height="wrap_content" 
android:text="Click On The Fruit Which You Love To Have" 
android:textStyle="normal|bold" 
android:gravity="center_vertical|center_horizontal" 
android:layout_width="fill_parent">
</TextView>
 <ListView 
  android:id="@+id/lstFruits" 
  android:layout_height="200dp" 
    android:layout_width="100dp">
 </ListView>
</LinearLayout> 


listitemprops.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content" 
android:gravity="left|center"
  android:layout_width="wrap_content" 
  android:paddingBottom="5px"
android:paddingTop="5px" 
android:paddingLeft="5px"> 
 <TextView  
  android:id="@+id/txtFruits" 
  android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   android:textColor="#190707"
  >
 </TextView>    
</LinearLayout>
Following is the Activty Code,



package com.mayuri.customlistmodel;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;


public class CustomListModel extends Activity {
    /** Called when the activity is first created. */
private class CustomListAdapter extends BaseAdapter {
 private LayoutInflater inflater;  
 public CustomListAdapter(Context context) {  
 inflater = LayoutInflater.from(context);  
 }  
 public int getCount(){
  return arrFruits.length;
 }
 public Object getItem(int position) {
 return position;
 }
 public long getItemId(int position) {
 return position;
 }  
 TextView txtFruits;
 public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
  convertView = inflater.inflate(R.layout.listitemprops, null);  
  txtFruits = (TextView) convertView.findViewById(R.id.txtFruits);  
convertView.setTag(txtFruits);
convertView.setBackgroundColor((position & 1) == 1 ? Color.WHITE : Color.LTGRAY);
 } else {
 convertView.getTag();
 }
txtFruits.setText(arrFruits[position]);
 return convertView;

    }
ListView lstFruits;  
private String arrFruits[]={"Mango","Orange","Apple","Lemon","Banana","Custad Apple","Water Melon","Sugare Cane"};
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);     
        lstFruits=(ListView)findViewById(R.id.lstFruits);
        lstFruits.setAdapter(new CustomListAdapter(this));
        lstFruits.setOnItemClickListener(new OnItemClickListener() {        
         @Override        
         public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {       
         Toast.makeText(getBaseContext(), "You Love To Have:  " +arrFruits[arg2], Toast.LENGTH_LONG).show();
        
       });
}
}


Hope this example proves to be useful, Comments and suggestions are always awaited.

~Mayuri

3 comments:

eqb9cnu1 said...

There must be an error on the two getters...

Mayuri Ruparel said...

Where exactly? Please specify

Geetha Devi said...

Interesting Approach to custom list model for list view..Android Training