Using Custom Array Adapter on Android List View

List View is an element that displays a collection of items in single column direction. It has an internal vertical scroll bar that enable user to scroll if it’s height bigger than display height. The type of single item in the list is any of java object.

ListView needs an adapter to works. This adapter behaves as a data resources for the list. The adapter also defines how each items in the list is displayed. The adapter is attached to the list via setAdapter method on the ListView object. There are two commons used adapters:

  • Array Adapter: An adapter that is designed to work with arrays data resources.
  • Cursor Adapter: An adapter that is designed to handle database related data.

This tutorial will focuses on array adapter.

Simple Array Adapter

A simple array adapter is an array adapter that is built using array of string as items. The array of string is passed to the constructor of ArrayAdapter object.

List<String> apps = new ArrayList<String>();
apps.add("Twitter");
apps.add("Whatsapp");
apps.add("Facebook");
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, apps);

The constructor of array adapter have 3 arguments:

  1. context: this is the application context
  2. layout resource id: the layout resource id for item view
  3. array items: this is array object for items

We will attach the created adapter into the list by using setAdapter method on ListView object.

List Activity

ListActivity is a subclass of Activity that will make our work with ListView easier. ListActivity has internal implementation method that is related to ListView. You must have list view object with id is android:id/list in the layout file to use List Activity.

<ListView
   android:id="@android:id/list"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" >
</ListView>

Now we will create a sample list view application using simple array adapter. Open your Eclipse IDE and create new android project by selecting menu: File -> New -> Android Application Project. Fill out required fields.

  1. Create new xml file: activity_main.xml
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <ListView
            android:id="@android:id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>
    
    </LinearLayout>
    
  2. Create new activity class: MainActivity.java
    package com.sj.customlistview;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    
    public class MainActivity extends ListActivity{    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);        
            setContentView(R.layout.activity_main);        
            initView();   
        }
    
        private void initView() {
            List<String> apps = new ArrayList<String>();
            apps.add("Twitter");
            apps.add("Whatsapp");
            apps.add("Facebook");
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, apps);
            setListAdapter(adapter);
        }
    }
    
  3. Put your activity in AndroidManifest.xml file
  4. <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.sj.customlistview"
        android:versionCode="1"
        android:versionName="1.0" >
    
        <uses-sdk
            android:minSdkVersion="8"
            android:targetSdkVersion="17" />
    
        <application
            android:allowBackup="true"
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            <activity
                android:name="com.sj.customlistview.MainActivity"
                android:label="@string/app_name" >
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>
    

Run your project, your list view will be displayed like image below:

Simple Android List View

Simple Android List View





Customize Array Adapter

By default, array adapter displays a TextView for each items and set the text of it by calling toString method of item object. We can customize the default display of array adapter by overriding getView method.
For a demo, we will modify previous project and use custom array adapter:

  1. Create new java class: Application.java.
    This class represents a single object of list item.

    package com.sj.customlistview;
    
    public class Application {
        private String title;
        private long totalDl;
        private int rating;
        private String icon;
        
        public String getTitle() {
            return title;
        }
        public void setTitle(String title) {
            this.title = title;
        }
        public long getTotalDl() {
            return totalDl;
        }
        public void setTotalDl(long totalDl) {
            this.totalDl = totalDl;
        }
        public int getRating() {
            return rating;
        }
        public void setRating(int rating) {
            this.rating = rating;
        }
        public String getIcon() {
            return icon;
        }
        public void setIcon(String icon) {
            this.icon = icon;
        }
    }
    
  2. Create new xml file: app_custom_list.xml
    This file defines a view for list item

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <ImageView
            android:id="@+id/appIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"        
            android:layout_marginLeft="3dp"
            android:layout_marginTop="3dp"
            android:src="@drawable/facebook" />
        <TextView
            android:id="@+id/titleTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/appIcon"
            android:layout_toRightOf="@id/appIcon"
            android:layout_marginLeft="3dp"
            android:text="Application Title"
            android:textSize="22dp"/>
    
        <LinearLayout
            android:id="@+id/ratingCntr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/appIcon"
            android:layout_below="@id/titleTxt"
            android:layout_marginLeft="5dp" >
        </LinearLayout>
    
        <TextView
            android:id="@+id/dlTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/titleTxt"
            android:layout_alignParentRight="true"
            android:layout_marginRight="3dp"
            android:text="0 dl" />    
    </RelativeLayout>
    
  3. Create new java class: AppAdapter.java
    This is our adapter that will inflate app_custom_list.xml and set the data into it.

    package com.sj.customlistview;
    
    import java.text.NumberFormat;
    import java.util.List;
    
    import android.content.Context;
    import android.content.res.Resources;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    public class AppAdapter extends ArrayAdapter<Application>{
        private List<Application> items;
        
        public AppAdapter(Context context, List<Application> items) {
            super(context, R.layout.app_custom_list, items);
            this.items = items;
        }
        
        @Override
        public int getCount() {
            return items.size();
        }
        
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View v = convertView;
            
            if(v == null) {
                LayoutInflater li = LayoutInflater.from(getContext());
                v = li.inflate(R.layout.app_custom_list, null);            
            }
            
            Application app = items.get(position);
            
            if(app != null) {
                ImageView icon = (ImageView)v.findViewById(R.id.appIcon);
                TextView titleText = (TextView)v.findViewById(R.id.titleTxt);
                LinearLayout ratingCntr = (LinearLayout)v.findViewById(R.id.ratingCntr);
                TextView dlText = (TextView)v.findViewById(R.id.dlTxt);
                
                if(icon != null) {
                    Resources res = getContext().getResources();
                    String sIcon = "com.sj.customlistview:drawable/" + app.getIcon();
                    icon.setImageDrawable(res.getDrawable(res.getIdentifier(sIcon, null, null)));
                }
                
                if(titleText != null) titleText.setText(app.getTitle());
                
                if(dlText != null) {
                    NumberFormat nf = NumberFormat.getNumberInstance();
                    dlText.setText(nf.format(app.getTotalDl())+" dl");            
                }
                
                if(ratingCntr != null && ratingCntr.getChildCount() == 0) {        
                    /*
                     * max rating: 5
                     */
                    for(int i=1; i<=5; i++) {
                        ImageView iv = new ImageView(getContext());
                        
                        if(i <= app.getRating()) {
                            iv.setImageDrawable(getContext().getResources().getDrawable(R.drawable.start_checked));
                        }
                        else {                
                            iv.setImageDrawable(getContext().getResources().getDrawable(R.drawable.start_unchecked));
                        }
                        
                        ratingCntr.addView(iv);
                    }
                }
            }
            
            return v;
        }
    }
    
  4. Open your MainActivity.java and modify several lines.
    package com.sj.customlistview;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import android.app.ListActivity;
    import android.os.Bundle;
    
    public class MainActivity extends ListActivity{    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);        
            setContentView(R.layout.activity_main);        
            initView();   
        }
    
        private void initView() {
            List<Application> apps = populateSampleApplication();
            AppAdapter adapter = new AppAdapter(this, apps);
            setListAdapter(adapter);        
        }
        
        private List<Application> populateSampleApplication(){        
            String[] apps = new String[] {                
                "Twitter,450000,5,twitter",
                "Skype,300002,2,skype",
                "Facebook,500560,4,facebook"
            };
            
            List<Application> list = new ArrayList<Application>();
            
            for(String app:apps) {
                String[] rApp = app.split(","); 
                Application ap = new Application();
                ap.setTitle(rApp[0]);
                ap.setTotalDl(Integer.parseInt(rApp[1]));
                ap.setRating(Integer.parseInt(rApp[2]));
                ap.setIcon(rApp[3]);
                list.add(ap);
            }
            
            return list;
        }
    }
    

I’ve used some social icons in this project. You can download the icons here: social icons
Now run your project, it will display list view below:

Custom Array Adapter

Custom Array Adapter

Related Posts:

Android