Monday, 23 September 2013

Android ListView Example Tutorial

Android Custom ListView Android Custom ListView
  1. Android ListView is most powerful component for displaying vertical scrollable list.
  2. For displaying item inside ListView component uses adapter.
  3. For Simple list used Android default adapter and For Customization use Custom adapter.ListView is also useful when displaying grouped data.For group data need Expandabale ListView.
  4. Here we will show you custom Android ListView.
  1. Create Android projects call AndroidCustomListView.For Custom ListView we need one xml file and some of fruit images.You have alredy one XML file so modify name of xml file main.xml to fruits_list.xml and download fruit images and put it into res/drawable folder and modify your XML file as below.
     <?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="wrap_content"  
       android:padding="5dp" >  
       
       <ImageView  
         android:id="@+id/image"  
         android:layout_width="50px"  
         android:layout_height="50px"  
         android:layout_marginLeft="5px"  
         android:layout_marginRight="20px"  
         android:layout_marginTop="5px"  
         android:src="@drawable/apple" >  
       </ImageView>  
       
       <TextView  
         android:id="@+id/name"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:text="@+id/label"  
         android:textSize="30px" >  
       </TextView>  
       
     </LinearLayout>  
    
  2. Now, Create one FruitsListAdapter.java file and modify as below. FruitsListAdapter extands ArrayAdapter which has getView() it is used to inflate layout as row so in that we have inflate our row file we have create fruits_list.xml So,Modify your FruitsListAdapter.java as below.
     package com.idroid.list.adaptor;  
       
     import com.idroid.listview.R;  
       
     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 FruitsArrayAdapter extends ArrayAdapter<String> {  
          private final Context context;  
          private final String[] values;  
       
          public FruitsArrayAdapter(Context context, String[] values) {  
               super(context, R.layout.fruits_list, values);  
               this.context = context;  
               this.values = values;  
          }  
       
          @Override  
          public View getView(int position, View convertView, ViewGroup parent) {  
               LayoutInflater inflater = (LayoutInflater) context  
                         .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
               View rowView = inflater.inflate(R.layout.fruits_list, parent, false);  
               TextView textView = (TextView) rowView.findViewById(R.id.name);  
               ImageView imageView = (ImageView) rowView.findViewById(R.id.image);  
               textView.setText(values[position]);  
       
               // Change icon based on name  
               String s = values[position];  
       
               System.out.println(s);  
       
               if (s.equals("Apple")) {  
                    imageView.setImageResource(R.drawable.apple);  
               } else if (s.equals("Gosseberry")) {  
                    imageView.setImageResource(R.drawable.gooseberry);  
               } else if (s.equals("Grape")) {  
                    imageView.setImageResource(R.drawable.grape);  
               } else if (s.equals("Nectarine")) {  
                    imageView.setImageResource(R.drawable.nectarine);  
               } else if (s.equals("Watermelon")) {  
                    imageView.setImageResource(R.drawable.watermelon);  
               } else {  
                    imageView.setImageResource(R.drawable.orange);  
               }  
       
               return rowView;  
          }  
     }  
       
    
  3. So now it time to populate ListView for that you need to create FruitsListActivity.java or you already have one Activity you can modify name of that it's fine.Modify FruitsListActivity.java as below.
     package com.idroid.listview;  
     import com.idroid.list.adaptor.FruitsArrayAdapter;  
     import android.app.ListActivity;  
     import android.os.Bundle;  
     import android.widget.ListView;  
     import android.widget.Toast;  
     import android.view.View;  
       
     public class FruitsListActivity extends ListActivity {  
       
          static final String[] FRUITS = new String[] { "Apple", "Gosseberry",  
                    "Grape", "Nectarine", "Watermelon" , "Orange"};  
       
          @Override  
          public void onCreate(Bundle savedInstanceState) {  
               super.onCreate(savedInstanceState);  
               setListAdapter(new FruitsArrayAdapter(this, FRUITS));  
          }  
       
          @Override  
          protected void onListItemClick(ListView l, View v, int position, long id) {  
       
               //get selected items  
               String selectedValue = (String) getListAdapter().getItem(position);  
               Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();  
       
          }  
     }  
    
  4. Now, Build and Run your project on simulator you should see above images like output and also when you click on any of the row you should see toast message.


Download Source Code :AndroidCustomListViewExample.rar