This tutorial demonstrates how to develop custom listview in android app. Almost every application from contacts to WhatsApp and every social networking app uses custom list view. The most common example of custom listview in your android phone is a contact list of WhatsApp chat list.

You can download this project from github. Click here.

You can scroll into that list, by default listviews are scrollable. For creating simple listview, ArrayAdapter class is used. But for custom listview, we use BaseAdapter class and one extra layout for our list items.

custom listview

custom listview

As shown in above image, we are going to implement the same custom listview in this tutorial.

Creating new project

To implement this custom listview, follow the steps which are described below.

Open your android studio, create a new empty project, give it name ListViewDemo.

To create a new project, click File -> New -> New project.

This will create default empty project structure with MainActivity.java class and activity_main.xml file.

 

Adding required images, new class, and layout file.

In this tutorial, you will need one more XML layout file to define the structure of list row item layout and a java class which will be extending BaseAdapter class.

To create layout file, right click on the res->layout folder and create new layout resource file and name it as mylistrow.xml

To create new Java class, click on java folder and right click on the package of MainActivity class. In my case package name is com.coderfolk.listviewdemo. Create new Java class and give it name MyCustomListAdapter.java in your package

You will need images to add in the listview. For this, add some images in the res->drawable folder. I added 5 images in that folder as shown in below image.

Following image shows how I added new files and image in the default project structure.

listviewstructure

listview structure

Implementing Custom ListView

Now our main important work starts here. In our custom list view we are going to add text and image. For this, we need to define String array for text and integer array for the image id’s.

Add the following code in the mylistrow.xml

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

    <ImageView
        android:id="@+id/listimage"
        android:layout_margin="10dp"
        android:layout_width="35dp"
        android:layout_height="35dp"
         />

    <TextView
        android:id="@+id/listtext"
        android:layout_width="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="demo"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:textSize="18dp"
        android:textStyle="bold" />
</LinearLayout>

In above XML layout, we are defining an ImageView and a TextView for image and text respectively. By default, LinearLayout has a horizontal orientation.

I customized it as per my requirement. You can change the properties of the layout component as per your need.

In activity_main.xml file, we will need a ListView element. Add the following code in the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ListView
        android:listSelector="#5698"
        android:id="@+id/mylist"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>

</LinearLayout>

In above layout file, ListView component is added, this component will inflate ListView layout. In this component, we are using a property named as listSelector. This property is used to set the highlight color of the list item after the selection of the list item.

Add the following code below the package declaration statement in your MainActivity.java file

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
public class MainActivity extends AppCompatActivity {

    ListView mylist;
    String text[] = new String[]{"Hello",
            "This",
            "is",
            "Custom",
            "ListView",
            "This",
            "is",
            "Custom",
            "ListView",
            "This",
            "is",
            "Custom",
            "ListView",
            "This"};
    int image[] = new int[]{R.drawable.about,
            R.drawable.boost,
            R.drawable.send,
            R.drawable.settings,
            R.drawable.share,
            R.drawable.boost,
            R.drawable.send,
            R.drawable.settings,
            R.drawable.share,
            R.drawable.share,
            R.drawable.boost,
            R.drawable.send,
            R.drawable.settings,
            R.drawable.share};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mylist = (ListView) findViewById(R.id.mylist);
        MyCustomListAdapter myadapter = new MyCustomListAdapter(getApplicationContext(),image, text);
        mylist.setAdapter(myadapter);

    }
}

 

In this class, we are creating two arrays for image id’s and String which will be added in the listview.

In the body of the onCreate method, we are defining the mylist object.

Following lines create the object of the custom adapter and set that adapter object in the list.

MyCustomListAdapter myadapter = new MyCustomListAdapter(getApplicationContext(),image, text); 
mylist.setAdapter(myadapter);

Defining the Custom Adapter for the ListView

For implementing custom listview in Android we need to define a class which extends BaseAdapter class. This class will allow us to inflate the custom mylistrow.xml layout in the ListView component in the activity_main.xml layout. Add the following code in the class MyCustomListAdapter.java .

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

class MyCustomListAdapter extends BaseAdapter {
    Context context;
    int image[];
    String text[];

    public MyCustomListAdapter(Context applicationContext, int[] image, String[] text){
        this.context=applicationContext;
        this.image=image;
        this.text=text;
    }
    @Override
    public int getCount() {
        return text.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        LayoutInflater inflater=LayoutInflater.from(context);
        View listrow=inflater.inflate(R.layout.mylistrow,null);
        ImageView imageView=(ImageView)listrow.findViewById(R.id.listimage);
        imageView.setBackgroundResource(image[position]);
        TextView textView = (TextView) listrow.findViewById(R.id.listtext);
        textView.setText(text[position]);
        return listrow;
    }
}

In the above file, we are implementing the getView method.

LayoutInflater class is used to take control over the main layout context. We get the reference of the list row by the following statements.

LayoutInflater inflater=LayoutInflater.from(context); 
View listrow=inflater.inflate(R.layout.mylistrow,null);

Build the project and execute it on the device or the emulator. You will get the output as shown in the following image.

custom listview

custom listview

Conclusion:- Thus we have implemented the custom list view in the Android app using the BaseAdapter class.

Github project link here.

Also read : How to create simple calculator Android app for beginners.

Leave a Reply

Your email address will not be published. Required fields are marked *