Android Custom ListView with Image and Text Example

Posted on: October 12, 2017 at 3:30 pm by Sanket Mhaddalkar - 2 Comments

 

In this article will see how to create custom ListView in android. By creating a custom ListView you can design how a single row will look like in the view. ListView is the basic component to view the data in a list.

 

Steps and Source Code for Creating Custom ListView with image and text –

 

– First Create a new Project CustomListViewExample.

 

– Create an empty activity i.e MainActivity

 

– Add all images to res > drawable folder that are to be displayed in our ListView.

 

– Now add ListView to your Activity layout file

 

activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="com.sanktips.customlistviewexample.MainActivity">

<ListView
android:id="@+id/androidList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

</RelativeLayout>

 

– Next step is to create a custom layout file to format how a single row will look in our ListView.

 

– Right click on the layout folder, New and then click on Layout resource file and name it to single_list_item.xml

 

single_list_item.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">

<ImageView
android:id="@+id/appIconIV"
android:src="@drawable/alpha"
android:layout_width="60dp"
android:layout_height="60dp" />

<TextView
android:id="@+id/aNametxt"
android:text="Android Name"
android:textSize="20sp"
android:layout_marginTop="8dp"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/appIconIV"
android:layout_toEndOf="@+id/appIconIV"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp" />

<TextView
android:id="@+id/aVersiontxt"
android:text="Android Version"
android:textSize="14sp"
android:maxLines="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/aNametxt"
android:layout_alignLeft="@+id/aNametxt"
android:layout_alignStart="@+id/aNametxt" />

 

</RelativeLayout>

 

– Now we need an adapter to populate the ListView.

 

– Right click on package folder i.e in my case com.sanktips.customlistviewexample, New and then click on java class.

 

– Name the class as ListAdapter and extend it with BaseAdapter.

 

– Now create a constructor for the class and all overriding methods as given below.

 

ListAdapter.java file:

package com.sanktips.customlistviewexample;

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;

import java.util.ArrayList;


public class ListAdapter extends BaseAdapter {

    Context context;
    private final String [] values;
    private final String [] numbers;
    private final int [] images;

    public ListAdapter(Context context, String [] values, String [] numbers, int [] images){
        //super(context, R.layout.single_list_app_item, utilsArrayList);
        this.context = context;
        this.values = values;
        this.numbers = numbers;
        this.images = images;
    }

    @Override
    public int getCount() {
        return values.length;
    }

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

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

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


        ViewHolder viewHolder;

        final View result;

        if (convertView == null) {

            viewHolder = new ViewHolder();
            LayoutInflater inflater = LayoutInflater.from(context);
            convertView = inflater.inflate(R.layout.single_list_item, parent, false);
            viewHolder.txtName = (TextView) convertView.findViewById(R.id.aNametxt);
            viewHolder.txtVersion = (TextView) convertView.findViewById(R.id.aVersiontxt);
            viewHolder.icon = (ImageView) convertView.findViewById(R.id.appIconIV);

            result=convertView;

            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
            result=convertView;
        }

        viewHolder.txtName.setText(values[position]);
        viewHolder.txtVersion.setText("Version: "+numbers[position]);
        viewHolder.icon.setImageResource(images[position]);

        return convertView;
    }

    private static class ViewHolder {

        TextView txtName;
        TextView txtVersion;
        ImageView icon;

    }

}

 

– Final step is to create array for Images and Text to be populated into ListView. Also connect the ListView component in layout file and setup the adapter in our MainActivity.

 

MainActivity.java file:

package com.sanktips.customlistviewexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    int[] images = {R.drawable.alpha, R.drawable.beta, R.drawable.cupcake, R.drawable.donut, R.drawable.eclair, R.drawable.froyo, R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.icecreamsandwich, R.drawable.jellybean, R.drawable.kitkat, R.drawable.lollipop, R.drawable.marshmallow, R.drawable.nougat};

    String[] version = {"Android Alpha", "Android Beta", "Android Cupcake", "Android Donut", "Android Eclair", "Android Froyo", "Android Gingerbread", "Android Honeycomb", "Android Ice Cream Sandwich", "Android JellyBean", "Android Kitkat", "Android Lollipop", "Android Marshmallow", "Android Nougat"};

    String[] versionNumber = {"1.0", "1.1", "1.5", "1.6", "2.0", "2.2", "2.3", "3.0", "4.0", "4.1", "4.4", "5.0", "6.0", "7.0"};

    ListView lView;

    ListAdapter lAdapter;

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

        lView = (ListView) findViewById(R.id.androidList);

        lAdapter = new ListAdapter(MainActivity.this, version, versionNumber, images);

        lView.setAdapter(lAdapter);

        lView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                
                Toast.makeText(MainActivity.this, version[i]+" "+versionNumber[i], Toast.LENGTH_SHORT).show();

            }
        });

    }
}

 

– Run the code to see the results.

 

Hope you find this article helpful. Join us on Facebook, Twitter and Google+ to get more updates on Android Development Tutorials.

 

---

---

---

---

---

---