Android Custom Listview with Images and Text – Source Code

In this tutorial we are going to show you how to implement custom ListView in Android with Images and Text for each list item. In order to display a series of data you can use ListView.

Creating Layout:

The Main layout for our project is “activity_main” which has a ListView to display the array with images.

activity_main.xml


<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <ListView
       android:id="@+id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ListView>
</RelativeLayout>

Next step is to create a layout for the list item that is to be displayed in ListView. Create the layout as list_single.xml which has a TextView to display to the Array and a ImageView to display set of images in each list item. Here I have created the layout as TableLayout with ImageView and TextView in a Row.

list_single.xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow>
        <ImageView
            android:id="@+id/img"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="50dp" />
</TableRow>
</TableLayout>

Creating Activity:

Before Creating the MainActivity we must create a CustomList class for our custom ListView.

CustomList.java


package learn2crack.customlistview;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
public class CustomList extends ArrayAdapter<String>{
private final Activity context;
private final String[] web;
private final Integer[] imageId;
public CustomList(Activity context,
String[] web, Integer[] imageId) {
super(context, R.layout.list_single, web);
this.context = context;
this.web = web;
this.imageId = imageId;
}
@Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.list_single, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
txtTitle.setText(web[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}
}

Next step is to create MainActivity. Here we are defining the array “web” which is displayed as text in ListView. Next we define a array imageId to store the Image Id. The images should be placed in the location /res/drawable/. Next custom list adapter is displayed. When a list item is clicked it shows a Toast that it is clicked.

MainActivity.java


package learn2crack.customlistview;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.app.Activity;
public class MainActivity extends Activity {
  ListView list;
  String[] web = {
    "Google",
      "Going",
      "Files",
      "Docs",
      "Itunes",
      "Plugin",
      "Amzing"
  } ;
  Integer[] imageId = {
      R.drawable.image1,
      R.drawable.image2,
      R.drawable.image3,
      R.drawable.image4,
      R.drawable.image5,
      R.drawable.image6,
      R.drawable.image7
  };
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    CustomList adapter = new
        CustomList(MainActivity.this, web, imageId);
    list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);
        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view,
                                        int position, long id) {
                    Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();
                }
            });
  }
}

Creating Manifest:

No other special Permissions are required for our project.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="learn2crack.customlistview"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:targetSdkVersion="17" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="learn2crack.customlistview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Finally run the project in the Emulator.