21.8 C
Sunday, September 26, 2021

Android Custom ListView with Images




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 release by Android officials.

Coming back to the topic, here we will study about Custom listview with images. You need to have few images, please save all images name 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 file will be available already with default name MainActivity.java 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="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: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 beginner then no need of changing layout. In 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 list, for each content in the list we have to create a new layout.

See Also  QR-Code & Barcode Reader Android App

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="http://schemas.android.com/apk/res/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 package folder and click right mouse button which will populate option,s elect to create a new java file. If you are copying our code then please use CustomList.java name of the java file.

package apps.buzzmycode.com;

import android.app.Activity;
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(R.id.textViewName);
        TextView textViewDesc = (TextView) listViewItem.findViewById(R.id.textViewDesc);
        ImageView image = (ImageView) listViewItem.findViewById(R.id.imageView);

        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 that images and on drawable folder paste them all.

See Also  How to perform Mathematical Operations using different ways in Kotlin

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

package apps.buzzmycode.com;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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(R.id.listView);

        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(R.menu.menu_main, 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 == R.id.action_settings) {
            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.

See Also  Working with Strings in Kotlin & Building It
See Also  Working with Strings in Kotlin & Building It

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.

About the author

SyncSaS Technologies is specialized in creating and designing customized software. We have our own team that will be in charge of developing your softwares.

Add a comment

Related posts