Custom Listview With Item Click Listener

In this tutorial we will learn how to make custom ListView with image , title , description , and handle item clicks. I'm displaying Toast on item clicks you can do your own functionality such as going to some activity etc.

Step 1: Create a new project OR Open your project

Step 2: Add some images in res>drawable folder

Step 3: Create a new "Android Resource File" in res>layout and name it as row.xml

Step 4: Code

row.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:padding="4dp"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:padding="5dp"android:id="@+id/logo"android:src="@mipmap/ic_launcher"/><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="2dp"android:textColor="#33CC33"android:id="@+id/text1"android:layout_marginTop="5dp"android:layout_marginLeft="10dp"android:text="Medium Text"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/text2"android:layout_marginLeft="10dp"android:text="TextView" /></LinearLayout></LinearLayout>

activity_main.xml

<?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"><ListViewandroid:id="@+id/cus_list_view"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>

MainActivity.java

package com.blogspot.devofandroid.myapplication;import android.content.Context;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {ListView list;String titles[] = {"Item 1" , "Item 2" , "Item 3" , "Item 4" , "Item 5"};String description[] = {"The Description 1" , "The Description 2" , "The Description 3" , "The Description 4" , "The Description 5"};int imgs[]={R.drawable.home ,R.drawable.contacts ,R.drawable.messages ,R.drawable.search , R.drawable.movies};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);list = (ListView) findViewById(R.id.cus_list_view);MyAdapter adapter = new MyAdapter(this ,titles ,imgs ,description);list.setAdapter(adapter);//click to go to another activitylist.setOnItemClickListener(new AdapterView.OnItemClickListener() {public void onItemClick(AdapterView<?> parent , View view , int position , long id) {if (position == 0) {Toast.makeText(MainActivity.this , "Item 1 clicked" , Toast.LENGTH_SHORT).show();}else if (position == 1) {Toast.makeText(MainActivity.this , "Item 2 clicked" , Toast.LENGTH_SHORT).show();}else if (position == 2) {Toast.makeText(MainActivity.this , "Item 3 clicked" , Toast.LENGTH_SHORT).show();}else if (position == 3) {Toast.makeText(MainActivity.this , "Item 4 clicked" , Toast.LENGTH_SHORT).show();}else if (position == 4) {Toast.makeText(MainActivity.this , "Item 5 clicked" , Toast.LENGTH_SHORT).show();}}});}class MyAdapter extends ArrayAdapter<String> {Context context;String myTitles[];String myDescription[];int[] imgs;MyAdapter(Context c , String[] titles , int[] imgs , String[] description) {super(c ,R.layout.row ,R.id.text1 ,titles);this.context=c;this.imgs=imgs;this.myTitles=titles;this.myDescription=description;}@Overridepublic View getView(int position , View convertView , ViewGroup parent){LayoutInflater layoutInflater = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);View row = layoutInflater.inflate(R.layout.row , parent , false);ImageView images = (ImageView) row.findViewById(R.id.logo);TextView myTitle = (TextView) row.findViewById(R.id.text1);TextView myDescription = (TextView) row.findViewById(R.id.text2);images.setImageResource(imgs[position]);myTitle.setText(titles[position]);myDescription.setText(description[position]);return row;}}}

Step 5: Output