Custom ListView in Android

Introduction

 

ListView is a control for presenting components in the form of a list. We can insert a TextBox (EditText), TextView (label), Button or other types of components into a ListView.

 

Today we will create a ListView like the following,

 

 

Now we will move to the coding part of this project.

 

In this project, we will use two layouts. The first is activity_main.xml and the second is list_single.xml.

 

activity_main.xml

 

In the activity_main.xml layout, we will use a ListView. Initially, this ListView is empty. We will insert the ImageView and TextView dynamically into the ListView through coding.

 

XML code of this activity is the following:

<RelativeLayout
    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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
    <ListView>
android:id="@+id/list"
android:layout_width="wrap_content"
android:layout_height="wrap_content" ></ListView>
</RelativeLayout>

After using the preceding XML code, our activity will be like the following:

 

 

Now we move to the list_single activity.

 

lsit_single.xml

 

In this activity, we use a TextView and an ImageView. In the TextView, we will show the name of the ListView item and in the ImageView, we will show the image of the ListView item.

 

The XML code of this activity is,

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffbbcc">
    <TableRow>
        <ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"/>
        <TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="50dp" />
    </TableRow>
</TableLayout>

After using the preceding XML code, the list_single activity will look like the following,

 

 

This activity is looking empty because we don't provide an image resource to the ImageView and the text to the TextView. We will do all that dynamically.

 

In the res (resource) folder of this project, we will provide a number of images.

 

 

We will use all these Images in the ListView.

 

Source code (Java code) of this project.

 

In this project, we will use the main activity (MainActivity.java) and will also use a class (CustomList.java).

 

Now I will explain each of the source files. First of all we will explain the CustomList.java class.

 

The source code of the CustomeList.java class is,

package learn2crack.customlistview;
import android.app.Activity;
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 CustomList extends ArrayAdapter < String > {

    private final Activity context;
    private final String[] web;
    private final Integer[] imageId;

    public CustomList(Activity context, String[] web, Integer[] imageId)
    {
        super(context, R.layout.list_single, web);
        this.context = context;
        this.web = web;
        this.imageId = imageId;

    }@Override
    public View getView(int position, View view, ViewGroup parent)
    {

        LayoutInflater inflater = context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.list_single, null, true);

        TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
        txtTitle.setText(web[position]);

        imageView.setImageResource(imageId[position]);
        return rowView;

    }
}

Explanation of Code

 

Code Section 1

 

In the preceding class, we inherit the ArrayAdapter class using CustomList extends ArrayAdapter<String> statement. Here the extend method is used for inheriting a class. Adapter to use is called an ArrayAdapter because the adapter converts an ArrayList of objects into View items loaded into the ListView container.

 

Code Section 2

public CustomList(Activity context, String[] web, Integer[] imageId)
{
    super(context, R.layout.list_single, web);
    this.context = context;
    this.web = web;
    this.imageId = imageId;
}

In the preceding code, we created a constructor of the CustomList class. This constructor takes 3 parameters. The first one is the name of the activity that invoked this constructor. The second parameter is a string array object. The third parameter is an Integer array object. We used a super method in the constructor. The super keyword in Java is a reference variable that is used to refer to the immediate parent class object. Whenever we create the instance of a subclass, an instance of the parent class is created implicitly, in other words referred to by the super reference variable.

 

Code Section 3

public View getView(int position, View view, ViewGroup parent)
{
    LayoutInflater inflater = context.getLayoutInflater();
    View rowView = inflater.inflate(R.layout.list_single, null, true);
    TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
    txtTitle.setText(web[position]);
    imageView.setImageResource(imageId[position]);
    return rowView;
}

This is an important part of this project. This method is responsible for inserting a view into the ListView control. This method is invoked implicitly by the system. In this method, we pass three parameters. The first parameter contains the position of a view in the ListView. The second parameter is an instance of the view and the third parameter is a ViewGroup. A ViewGroup is a special view that can contain other views (called children). The view group is the base class for layouts and view containers.

 

In this method, we use a LayoutInflater object. LayoutInflater is used to dynamically add and remove views using Java code. This class is used to instantiate a layout XML file into its corresponding View objects.

 

We use an inflate method (View rowView= inflater.inflate(R.layout.list_single, null, true)) in the preceding code. Inflating means to read the XML file that describes a layout (or GUI element) and to create the actual objects that correspond to it and thus make the object visible within an Android app.

 

Finally we create a TextView and a ImageView . We provide the text to the textview using a web array (txtTitle.setText(web[position])) and provide the source of the image to the Imageview using an imageid array (imageView.setImageResource(imageId[position])).

 

Now we move to the source code of the MainActivity.java class.

 

The following is the source code of this MainActivity.java,

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.app.Activity;

public class MainActivity extends Activity
{
    ListView list;
    String[] web =
    {
        "Google Plus",
            "Twitter",
            "Windows",
            "Bing",
            "Itunes",
            "Wordpress",
            "Drupal"
    };
    Integer[] imageId =
    {
        R.drawable.image1,
        R.drawable.image2,
        R.drawable.image3,
        R.drawable.image4,
        R.drawable.image5,
        R.drawable.image6,
        R.drawable.image7


    };
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        CustomList adapter = new CustomList(MainActivity.this, web, imageId);

        list = (ListView) findViewById(R.id.list);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override

            public void onItemClick(AdapterView <? > parent, View view,
            int position, long id)
            {
                Toast.makeText(MainActivity.this, "You Clicked at " + web[+position], Toast.LENGTH_SHORT).show();

            }
        });
    }
}

Explanation of Code

 

Code Section 4

String[] web =
{
    "Google Plus",
        "Twitter",
        "Windows",
        "Bing",
        "Itunes",
        "Wordpress",
        "Drupal"
};
Integer[] imageId =
{
    R.drawable.image1,
    R.drawable.image2,
    R.drawable.image3,
    R.drawable.image4,
    R.drawable.image5,
    R.drawable.image6,
    R.drawable.image7
};

In the preceding code section we create two arrays. One is a string type (String[] web) and another is an Integer type (Integer[] imageId). In the String type array, we provide the values for TextView and in the Integer type array, we provide the image id for the ImageView.

 

Code Section 5

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomList adapter = new CustomList(MainActivity.this, web, imageId);
list = (ListView) findViewById(R.id.list);
list.setAdapter(adapter);

In the preceding code section first, we create an object of the CustomList class. We pass three parameters to the CustomList constructor. The first parameter is the current context name, the second parameter is a String array object and the third is an Integer array object.

 

In the preceding code, we use the setAdapter method for the ListView. The setAdapter method is used in the databinding for a ListView. In our code, we bind the data returned by the CustomList class.

 

Code Section 6

list.setOnItemClickListener(new AdapterView.OnItemClickListener()
{@Override
    public void onItemClick(AdapterView <? > parent, View view,
    int position, long id)
    {
        Toast.makeText(MainActivity.this, "You Clicked at " + web[+position], Toast.LENGTH_SHORT).show();

    }
});

In the preceding code, we set an OnItemClick event for the ListView. This event will be invoked when someone clicks on an item of a ListView. On the response of the Click event, we show the name of the ListView Item using the Toast.makeText() method.

 

Let us see an example.

 

Assume we click on the Google Plus option then the output will be the following,

 

 

If we click on the Windows option, then the output will be the following,