Custom ListView in Android

Custom ListView in Android/Listview with image and text/ custom list tutorial/Listview using custom adapter

For real-world commercial mobile applications, the default look and feel of the Android ListView is not very attractive. It only renders a simple String in every ListView row using the internal TextView control. For most applications, you want to create an interface that is more graphically rich and visually pleasing to the user. Luckily, ListView is very powerful control and with the help of custom item layouts, it can be customized to suit your needs easily. In this tutorial, I will show you how you can create custom ListView items with icons, custom header layout and how you can use custom ArrayAdapter to glue everything together. I will also show you some performance improvement tips you can use to optimize the memory usage of your ListView control


main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     > <ListView  android:layout_height="wrap_content" android:id="@+id/listView1"  android:layout_width="match_parent"> </ListView> </LinearLayout>

listviewitems.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:background="#63B8FF">     <LinearLayout      android:layout_width="match_parent"      android:id="@+id/linearLayout1"      android:layout_height="70dip">         <TextView          android:text="TextView"          android:id="@+id/textView1"          android:layout_width="250dip"          android:textColor="#000000"         android:layout_height="wrap_content">         </TextView>         <ImageView          android:layout_width="wrap_content"          android:id="@+id/imageView2"          android:layout_height="wrap_content"          android:src="@drawable/icon"         >         </ImageView>     </LinearLayout>      </LinearLayout>

CustomListviewActivity.java

package custom.listview; import java.util.List; import java.util.Vector; import android.app.Activity; import android.app.ListActivity; import android.content.Context; import android.net.ParseException; import android.os.Bundle; 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 CustomListviewActivity extends ListActivity {         ListView listView;      ArrayList<String> textfield;      ArrayList<Integer> imagefield;      CustomAdapter customadapter;      /** Called when the activity is first created. */         @Override         public void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             setContentView(R.layout.main);             listView=(ListView)findViewById(R.id.listView1);             preparetext();             prepareimage();                   customadapter= new CustomAdapter(this, textfield, imagefield);             listView.setAdapter(customadapter);         }         public void preparetext()         {             textfield=new ArrayList<String>();             textfield.add("Sony Ericson Xperia");             textfield.add("Motorola Droid");             textfield.add("Samsung Galaxy");         }         public void prepareimage()         {             imagefield=new ArrayList<Integer>();             imagefield.add(R.drawable.icon1);             imagefield.add(R.drawable.icon2);             imagefield.add(R.drawable.icon3);                }               private class CustomAdapter extends ArrayAdapter<Object>         {                 Activity activity;                 ArrayList<String> textfield;                 ArrayList<Integer> imagefield;                     public CustomAdapter(Activity context, ArrayList<String> name,ArrayList<Integer> image)              {                               super(context, 0);                  activity=context;                  this.textfield=name;                  this.imagefield=image;         }       @Override       public View getView(int position, View convertView, ViewGroup parent)       {                               ImageView imgViewFlag;                 TextView txtViewTitle;                 LayoutInflater inflator = activity.getLayoutInflater();                 convertView = inflator.inflate(R.layout.listviewitems, null);                 txtViewTitle = (TextView) convertView.findViewById(R.id.textView1);                imgViewFlag = (ImageView) convertView.findViewById(R.id.imageView2);                txtViewTitle.setText(textfield.get(position));                imgViewFlag.setImageResource(imagefield.get(position));                return convertView;       }            @Override         public int getCount() {           // TODO Auto-generated method stub             return textfield.size();         }              @Override         public String getItem(int position) {             // TODO Auto-generated method stub             return textfield.get(position);         }              @Override         public long getItemId(int position) {             // TODO Auto-generated method stub             return 0;         }      } }

Results

See More

GridView

Custom gridview

Spinner

Custom Spinner

Tab layout