Create listView with image inside at left side with textview implement in each row.

Android custom listview with image and text is most commonly used list view for all android apps. Because with the help of this view app developer can make simple scrollable list view with image icon inside it that makes it more attractive and easy to understand per list item. App developer can add as many items as they want using string array variable & Integer image path variable array. So here is the complete step by step project for Android custom listview with imageview and textview using ArrayAdapter String.

Main Points and files description about this project please read them to more easily understand the whole project:

1. There are 4 different types of file i am using in this project. Files name as follows :

• MainActivity.java .
• ListAdapter.java .
• activity_main.xml .
• list_items.xml .

2. There are seven type of sample icon images i am using in this whole project which is displaying inside listview, you can download them from below and put inside into drawable-hdpi folder.

3. Copy images into drawable-hdpi folder.

Android custom listview with imageview and textview using ArrayAdapter <String>.

Code for MainActivity.java file.

 package com.imageviewintolistview_android_examples.com;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import com.imageviewintolistview_android_examples.com.ListAdapter;

public class MainActivity extends Activity {

 String ListItemsName[] = new String[]{
 "ONE",
 "TWO",
 "THREE",
 "FOUR",
 "FIVE",
 "SIX",
 "SEVEN"
 };
 Integer ImageName[] = {
 R.drawable.one,
 R.drawable.two,
 R.drawable.three,
 R.drawable.four,
 R.drawable.five,
 R.drawable.six,
 R.drawable.seven
 };
 ListView listView;
 ListAdapter listAdapter;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 listView = (ListView)findViewById(R.id.listView1);
 
 listAdapter = new ListAdapter(MainActivity.this , ListItemsName, ImageName);
 
 listView.setAdapter(listAdapter);
 
 listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
 Toast.makeText(getApplicationContext(), ListItemsName[position], Toast.LENGTH_LONG).show();
 }
 });
 
 }
}

Code for activity_main.xml layout file.

<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="com.imageviewintolistview_android_examples.com.MainActivity" >

 <ListView
 android:id="@+id/listView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true" >
 </ListView>

</RelativeLayout>

Code for ListAdapter.java file.

package com.imageviewintolistview_android_examples.com;

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;
import com.imageviewintolistview_android_examples.com.MainActivity;

public class ListAdapter extends ArrayAdapter<String> {

 private final Activity Context;
 private final String[] ListItemsName;
 private final Integer[] ImageName;
 
 public ListAdapter(Activity context, String[] content,
 Integer[] ImageName) {

 super(context, R.layout.list_items, content);
 // TODO Auto-generated constructor stub
 
 this.Context = context;
 this.ListItemsName = content;
 this.ImageName = ImageName;
 }
 public View getView(int position, View view, ViewGroup parent) {
 LayoutInflater inflater = Context.getLayoutInflater();
 View ListViewSingle = inflater.inflate(R.layout.list_items, null, true);
 
 TextView ListViewItems = (TextView) ListViewSingle.findViewById(R.id.textView1);
 ImageView ListViewImage = (ImageView) ListViewSingle.findViewById(R.id.imageView1);
 
 ListViewItems.setText(ListItemsName[position]);
 ListViewImage.setImageResource(ImageName[position]);
 return ListViewSingle;
 
 };
 
 }

<?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:orientation="vertical" >

 <ImageView
 android:id="@+id/imageView1"
 android:layout_width="70dp"
 android:layout_height="70dp"
 android:src="@drawable/abc_btn_check_material"
 android:layout_alignParentTop="true" />

 <TextView
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="70dp"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:layout_marginTop="22dp"
 android:text="Large Text"
 android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>