Learn About Custom List View Using View and Holder in Android

Introduction

This article explains the custom list view using view and holder in Android. Android Studio is used to create the sample.

In a simple ListView only one piece of data can be displayed in a row but what will happen when we need to show data in multiple columns of a ListView? For this we need to create a Custom Adapter to show data in multiple columns of a ListView. In this ListView application I have shown a company name and company id in two columns. For this I have crated three classes, the first is a CustomListview class where the list view is created and that stores the data into it using the CustomAdapter class. Second  I created a List model class that stores data and returns data using methods. In a Custom Adapter class I get the arraylist by the constructor of the CustomAdapter class.

Now after taking an ArrayList i Have created a View class to get the layout and a holder that holds the views of that layout. Get the object of the arraylist into the object of the Listmodel and set the values intp the textview using the setText() method.

Step 1

The following describes how to create the project.

Step 2

Create an XML file with the following in it:

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

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

 

</LinearLayout>

Step 3

Create another XML file with the following in it:
 

<?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="?android:attr/listPreferredItemHeight"

   >

 

     <TextView

        android:id="@+id/text1"

         android:textColor="#0000ff"

        android:layout_width="wrap_content"

        android:layout_height="26dip"

        android:layout_alignParentTop="true"

        android:layout_alignParentLeft="true"

        android:textStyle="bold"

         android:text="text1"/>

 

    <TextView

        android:textColor="#0000ff"

        android:layout_marginLeft="300dp"

        android:text="text2"

        android:id="@+id/text2"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"/>

</RelativeLayout>

Step 4

Create a Java class file with the following in it:
 

package com.listactivtyapplication;

 

import java.util.ArrayList;

 

import android.app.Activity;

import android.app.ListActivity;

import android.content.res.Resources;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

import android.widget.Toast;

 

public class CustomListViewAndroidExample extends Activity {

 

    String[] arrayString = new String[]{"IBM", "TCS", "MCN", "WIPRO", "INFOSYS", "ACCENTURE"};

    CustomListViewAndroidExample customListViewAndroidExample = this;

    Listmodel list;

    ListView listView;

    ArrayList<Listmodel> arrayList = new ArrayList<Listmodel>();

    CustomAdapter adapter;

 

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.customlistviewandroidexample);

        listView = (ListView) findViewById(R.id.listView);

        setData();

        Resources resources = getResources();

        adapter = new CustomAdapter(customListViewAndroidExample, arrayList, resources);

        listView.setAdapter(adapter);

 

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

 

 

                Toast.makeText(getApplicationContext(), list.getCompanyname() + "\n" + list.getid(), Toast.LENGTH_LONG).show();

            }

        });

 

    }

 

    public void setData() {

        for (int i = 0; i <= arrayString.length - 1; i++) {

            list = new Listmodel();

            list.setCompanyName("companyname :" + arrayString[i]);

            list.setName("id :" + i);

            arrayList.add(list);

        }

    }

}

 
Step 5

Create another Java class file with the following in it:
 

package com.listactivtyapplication;

import java.util.ArrayList;

 

import android.app.Activity;

import android.content.Context;

import android.content.res.Resources;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

 

public class CustomAdapter extends BaseAdapter {

 

    Activity activity;

    LayoutInflater inflater;

    ArrayList arrayList;

    Resources resource;

    Listmodel tempValues;

 

    CustomAdapter(Activity activty, ArrayList arrayList, Resources resource) {

        this.activity = activty;

        this.arrayList = arrayList;

        this.resource = resource;

 

        inflater = (LayoutInflater) activity.

                getSystemService(Context.LAYOUT_INFLATER_SERVICE);

 

    }

 

    @Override

    public int getCount() {

 

        if (arrayList.size() <= 0)

            return 1;

        return arrayList.size();

    }

 

    @Override

    public Object getItem(int position) {

        return position;

    }

 

    @Override

    public long getItemId(int position) {

        return position;

    }

 

 

    public static class ViewHolder {

        public TextView text;

        public TextView text1;

        public TextView text2;

 

    }

 

    /**

     * *** Depends upon data size called for each row , Create each ListView row ****

     */

    public View getView(int position, View convertView, ViewGroup parent) {

 

        View vi = convertView;

        ViewHolder holder;

 

        if (convertView == null) {

 

            /****** Inflate tabitem.xml file for each row ( Defined below ) *******/

            vi = inflater.inflate(R.layout.row, null);

 

            /****** View Holder Object to contain tabitem.xml file elements ******/

            holder = new ViewHolder();

            holder.text1 = (TextView) vi.findViewById(R.id.text1);

            holder.text2 = (TextView) vi.findViewById(R.id.text2);

 

            /************  Set holder with LayoutInflater ************/

            vi.setTag(holder);

        } else

            holder = (ViewHolder) vi.getTag();

 

        if (arrayList.size() <= 0) {

            holder.text.setText("No Data");

 

        } else {

            /***** Get each Model object from Arraylist ********/

            tempValues = null;

            tempValues = (Listmodel) arrayList.get(position);

 

            /************  Set Model values in Holder elements ***********/

 

            holder.text1.setText(tempValues.getCompanyname());

            holder.text2.setText(tempValues.getid());

 

            /******** Set Item Click Listner for LayoutInflater for each row *******/

 

        }

        return vi;

    }

}

 

Step 6

Create a Java class file with the following in it:

package com.listactivtyapplication;

  

public class Listmodel

{ 

    private String companyname;

    private String  id;

    private String url;

  

    public void setCompanyName(String companyname) {

        this.companyname = companyname;

    }

 

    public void setName(String id)

    {

        this.id=id;

    }

  public String getCompanyname()

  {

      return companyname;

  }

 

    public String getid()

    {

        return id;

    }

}

 

Step 7

When you run your application: