Wednesday, October 5, 2022

Android Custom ListView with Images

- Advertisement -

What will you learn in Android Custom ListView with Images tutorial?

In the last tutorial by Buzzmycode, you had learned about Listview, the basic way of using listview in android. Now in this tutorial, I will explain how to use images and text data in the listview, the data will be static. Here static means the data will not be fetched from the server (MySql /JSON). To know the crude of android listview please refer to the documentation released by Android officials.

- Advertisement -

Coming back to the topic, here we will study Custom listview with images. You need to have a few images, please save all image’s names with small caps letters, as the android studio does not accept images as drawable which are having CAPS letter in their name.

Things Required For Android Custom ListView with Images Project

  • Android Studio
  • Create a project with the name like “CustomImageListvie “.
  • Have some images, further, paste that images in the drawable folder.
  • Use code’s provided by me and run your project.

Android Custom ListView App Layout

Few layout files and java files will be available already with the default name and activity_main.xml. Both of them will be present in their respected folder as Layouts and Java. First, we will edit activity_main.xml:

How to create custom listview in android

<LinearLayout xmlns:android=""
    xmlns:tools="" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
        android:id="@+id/listView" />

You can use RelativeLayout instead of LinearLayout, but if you are a beginner then no need of changing the layout. In the layout I had already included the Listview with id listview, the use of id is to display the data which comes from the java file when it is executed. This Listview will only deal with a list, for each content in the list we have to create a new layout.

Create a new layout with name list_layout.xml you can use any name, but it should be relative to the object of its work.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android=""
    android:layout_height="match_parent" >
        android:layout_column="0" />
        android:text="New Text"
        android:layout_column="1" />
        android:text="New Text"
        android:layout_column="1" />

Working With Java File for Android Custom ListView with Images

To create a java file, navigate to the package folder and click the right mouse button which will populate the option,select to create a new java file. If you are copying our code then please use the name of the java file.


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

 * Created by buzzmycode.
public class CustomList extends ArrayAdapter<String> {
    private String[] names;
    private String[] desc;
    private Integer[] imageid;
    private Activity context;

    public CustomList(Activity context, String[] names, String[] desc, Integer[] imageid) {
        super(context, R.layout.list_layout, names);
        this.context = context;
        this.names = names;
        this.desc = desc;
        this.imageid = imageid;


    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View listViewItem = inflater.inflate(R.layout.list_layout, null, true);
        TextView textViewName = (TextView) listViewItem.findViewById(;
        TextView textViewDesc = (TextView) listViewItem.findViewById(;
        ImageView image = (ImageView) listViewItem.findViewById(;

        return  listViewItem;

Now we need to put images in our project, download images 4 to 5, use small resolution images and name them as I do in coding. And after that copy all those images and on drawable folder paste them all.

Create a new Java file with the name and paste the below code in it.


import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private String names[] = {
            "Java Script",

    private String desc[] = {
            "First Image for Custom Listview",
            "How is Second Image of Listview",
            "We love third Image",
            "Share Images and Project"

    private Integer imageid[] = {

    protected void onCreate(Bundle savedInstanceState) {

        CustomList customList = new CustomList(this, names, desc, imageid);

        listView = (ListView) findViewById(;

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Toast.makeText(getApplicationContext(),"You Clicked "+names[i],Toast.LENGTH_SHORT).show();

    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(, menu);
        return true;

    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == {
            return true;

        return super.onOptionsItemSelected(item);

The coding-end for this project here, now for better result do the Clean project and Build project once before executing the project. Click on Run App and the output will come with text and image.

Android custom listview with images project tutorial is up to here only, if you want to do any modification in it then you can do and please let us know the new features you had added. If you have any doubts or confusion then ask in a comment box, we will reply as early as possible.

Aasim Sheikh
Aasim Sheikh
CTO at SyncSaS Technologies

Stay in Touch

To follow the best weight loss journeys, success stories and inspirational interviews with the industry's top coaches and specialists. Start changing your life today!

Related Articles