Custom ListView With Image And Text

ListView is one of the frequently used component in Android app development. Today we are going to learn how to implement custom ListView with image and text. ListView is an composite control which groups multiple items and display them in vertical scrollable list. There are two approach to implementing ListView in Android.

Android Default ListView
Custom ListView

Here we are learn how to customizing the ListView and display multiple items such as images and text.

1. Project Overview

In this tutorial we are customizing ListView with image. In each list row we are displaying one image and it’s name. For the simplicity we have added some images in drawable folder under resources directory of the project, so please download some sample images and add the images inside the drawable. This demo contains single activity which display the custom ListView looks like following screen shot.

Now let’s start by creating new project in Android Studio.

2. Create / Setup Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from the templates.

2. Open build.gradle under app directory. Add Support design and appcompact library. This both library provides the wide range of classes related user interface widgets.

dependencies {
//..
       implementation 'com.android.support:appcompat-v7:27.1.1'
       implementation 'com.android.support:design:27.1.1'
..//
}

dependencies {

//..

implementation 'com.android.support:appcompat-v7:27.1.1'

implementation 'com.android.support:design:27.1.1'

..//

}

Note : Make sure that implementation is new keyword to add library dependency when you use Android Studio version 3.0 or above.

3. Add following code into colors.xml and styles.xml files.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBlack">#000000</color>
    <color name="colorDarkGray">#90000000</color>
    
</resources>

<?xml version="1.0" encoding="utf-8"?>

</resources>

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

3. Create XML Files

4. Now open the activity_main.xml and add the listview inside the file. Check the following lines of code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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"
    tools:context="demo.androidfive.customlistview.ui.MainActivity">

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

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout

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"

tools:context="demo.androidfive.customlistview.ui.MainActivity">

<ListView

android:id="@+id/list"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</android.support.constraint.ConstraintLayout>

5. Next step is to create the list row file. This layout file holds single items in list.. So create new file under layout named row_list_item.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/listItem"
    android:orientation="horizontal">


    <ImageView
        android:id="@+id/listImage"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:adjustViewBounds="true"
        android:padding="5dp"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder" />

    <TextView
        android:id="@+id/txtImageName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:ellipsize="end"
        android:maxLength="25"
        android:maxLines="1"
        android:padding="10dp"
        android:singleLine="true"
        android:text="Album Name"
        android:textColor="@color/colorBlack"
        android:textSize="16sp" />


</LinearLayout>

<?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/listItem"

android:orientation="horizontal">

<ImageView

android:id="@+id/listImage"

android:layout_width="65dp"

android:layout_height="65dp"

android:adjustViewBounds="true"

android:padding="5dp"

android:scaleType="centerCrop"

android:src="@drawable/placeholder" />

<TextView

android:id="@+id/txtImageName"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:ellipsize="end"

android:maxLength="25"

android:maxLines="1"

android:padding="10dp"

android:singleLine="true"

android:text="Album Name"

android:textColor="@color/colorBlack"

android:textSize="16sp" />

</LinearLayout>

Above code contains ImageView, TextView which display image and it’s name side by side.

4. Create Custom ListView Adapter

6. The above code is designing part now we need some java classes to handle custom listview. Each row of the listview contains Image and Image Name so first create one model class named Image.java under model package. Add the following code into Image.java class.

package demo.androidfive.customlistview.model;

public class Image {
    int image;
    String name;

    public Image(int image, String name) {
        this.image = image;
        this.name = name;
    }

    public int getImage() {
        return image;
    }

    public String getName() {
        return name;
    }

}

package demo.androidfive.customlistview.model;

public class Image {

int image;

String name;

public Image(int image, String name) {

this.image = image;

this.name = name;

}

public int getImage() {

return image;

}

public String getName() {

return name;

}

7. The next step is to create list adapter update the data into listview. So create the new class named ImageListAdapter.java under adapter package and add following lines of code.

package demo.androidfive.customlistview.adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.Snackbar;
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;

import java.util.List;

import demo.androidfive.customlistview.R;
import demo.androidfive.customlistview.model.Image;


public class ImageListAdapter extends ArrayAdapter<Image> {

    List<Image> imageList;
    Context mContext;
    int resource;

    public ImageListAdapter(Context mContext, int resource, List<Image> imageList) {
        super(mContext, resource, imageList);
        this.mContext = mContext;
        this.resource = resource;
        this.imageList = imageList;
    }

    @NonNull
    @Override
    public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        LayoutInflater layoutInflater = LayoutInflater.from(mContext);

        View view = layoutInflater.inflate(resource, null, false);

        LinearLayout listItem = view.findViewById(R.id.listItem);
        ImageView listImage = view.findViewById(R.id.listImage);
        TextView listImageName = view.findViewById(R.id.txtImageName);

        final Image image = imageList.get(position);
        listItem.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Click On " + image.getName(), Snackbar.LENGTH_LONG)
                        .setAction("No action", null).show();
            }
        });

        listImage.setImageDrawable(mContext.getResources().getDrawable(image.getImage()));
        listImageName.setText(image.getName());
        return view;
    }

}

package demo.androidfive.customlistview.adapter;

import android.content.Context;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.support.design.widget.Snackbar;

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;

import java.util.List;

import demo.androidfive.customlistview.R;

import demo.androidfive.customlistview.model.Image;

public class ImageListAdapter extends ArrayAdapter<Image> {

List<Image> imageList;

Context mContext;

int resource;

public ImageListAdapter(Context mContext, int resource, List<Image> imageList) {

super(mContext, resource, imageList);

this.mContext = mContext;

this.resource = resource;

this.imageList = imageList;

}

@NonNull

@Override

public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent) {

LayoutInflater layoutInflater = LayoutInflater.from(mContext);

View view = layoutInflater.inflate(resource, null, false);

LinearLayout listItem = view.findViewById(R.id.listItem);

ImageView listImage = view.findViewById(R.id.listImage);

TextView listImageName = view.findViewById(R.id.txtImageName);

final Image image = imageList.get(position);

listItem.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Click On " + image.getName(), Snackbar.LENGTH_LONG)

.setAction("No action", null).show();

}

});

listImage.setImageDrawable(mContext.getResources().getDrawable(image.getImage()));

listImageName.setText(image.getName());

return view;

}

5. Setup ListView Activity

8. Now open you MainActivity.java and add the following lines of code. In following code there are four steps to configure listview.

Initialize List-View And Image Array-List Objects.
Prepare Image array0list with some static data. [In this tutorial we have fetched images from the drawable, So add some sample image into drawable]
Create ImageListAdapter Object and pass context, list row files and image list as a parameter.
The final step is to set adapter into ListView.

package demo.androidfive.customlistview.ui;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

import demo.androidfive.customlistview.R;
import demo.androidfive.customlistview.adapter.ImageListAdapter;
import demo.androidfive.customlistview.model.Image;

public class MainActivity extends AppCompatActivity {

    // ListView Object
    ListView listView;

    // Image ArrayList
    List<Image> imageList;

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

        // 1. Initializing ListView And Image ArrayList
        imageList = new ArrayList<>();
        listView = (ListView) findViewById(R.id.list);

        // 2. Prepare Image ArrayList [Add Some Static Data Into Array]

        imageList.add(new Image(R.drawable.bg_1_img, "Cloud"));
        imageList.add(new Image(R.drawable.bg_2_img, "Sea"));
        imageList.add(new Image(R.drawable.bg_3_img, "Nature"));
        imageList.add(new Image(R.drawable.bg_4_img, "Mandalay"));
        imageList.add(new Image(R.drawable.bg_5_img, "Palace"));
        imageList.add(new Image(R.drawable.bg_6_img, "Red And Dark"));
        imageList.add(new Image(R.drawable.bg_7_img, "River"));
        imageList.add(new Image(R.drawable.bg_8_img, "Hill"));
        imageList.add(new Image(R.drawable.bg_9_img, "Sea"));
        imageList.add(new Image(R.drawable.bg_10_img, "Dark"));

        // 3. Create ImageListAdapter Object
        ImageListAdapter adapter = new ImageListAdapter(this, R.layout.row_list_item, imageList);

        // 4. Set Adapter Into ListView
        listView.setAdapter(adapter);
    }
}

package demo.androidfive.customlistview.ui;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.widget.ListView;

import java.util.ArrayList;

import java.util.List;

import demo.androidfive.customlistview.R;

import demo.androidfive.customlistview.adapter.ImageListAdapter;

import demo.androidfive.customlistview.model.Image;

public class MainActivity extends AppCompatActivity {

// ListView Object

ListView listView;

// Image ArrayList

List<Image> imageList;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 1. Initializing ListView And Image ArrayList

imageList = new ArrayList<>();

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

// 2. Prepare Image ArrayList [Add Some Static Data Into Array]

imageList.add(new Image(R.drawable.bg_1_img, "Cloud"));

imageList.add(new Image(R.drawable.bg_2_img, "Sea"));

imageList.add(new Image(R.drawable.bg_3_img, "Nature"));

imageList.add(new Image(R.drawable.bg_4_img, "Mandalay"));

imageList.add(new Image(R.drawable.bg_5_img, "Palace"));

imageList.add(new Image(R.drawable.bg_6_img, "Red And Dark"));

imageList.add(new Image(R.drawable.bg_7_img, "River"));

imageList.add(new Image(R.drawable.bg_8_img, "Hill"));

imageList.add(new Image(R.drawable.bg_9_img, "Sea"));

imageList.add(new Image(R.drawable.bg_10_img, "Dark"));

// 3. Create ImageListAdapter Object

ImageListAdapter adapter = new ImageListAdapter(this, R.layout.row_list_item, imageList);

// 4. Set Adapter Into ListView

listView.setAdapter(adapter);

}

I hope you like this article. If you have followed this tutorial carefully then application run without any issue. Write us if there is any issue to implement Custom ListView In Android.

Happy Coding