How To Create Custom ListView with ImageView and TextView In Android
Custom Listview
Custom ListView. In this tutorial we implement the custom listview using BaseAdapter. In Custom ListView show the ImageView with TextView for each list item.
Create Project As : CustomListView
By Default Main Layout for our project is activity_main.xml which has display the list of android list item with image.
Output :

activity_main.xml
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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" tools:context=".MainActivity"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="60dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:background="@color/colorPrimary" android:gravity="center" android:text="Simple ListView" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="#ffffff" android:textStyle="bold" /> <ListView android:id="@+id/lvList" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/textView" android:dividerHeight="2dp" /> </RelativeLayout> |
Create Custom list item layout by Name :inflate_list_view.xml
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp"> <ImageView android:id="@+id/ivImage" android:layout_width="100dp" android:layout_height="100dp" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/tvContent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:text="Medium Text" android:textAppearance="?android:attr/textAppearanceMedium" /> </LinearLayout> </LinearLayout> |
In MainActivity.java
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
package com.galaxystech.customlistview; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends Activity { // Create ListView Object private ListView lvList; //Create object of custom adapter ListViewAdapter adapter; // Defined Array String values String[] values = new String[]{"Android List View Item 1", "Android List View Item 2", "Android List View Item 3", "Android List View Item 4", "Android List View Item 5", "Android List View Item 6", "Android List View Item 7", "Android List View Item 8", "Android List View Item 9", "Android List View Item 10", "Android List View Item 11", "Android List View Item 12", "Android List View Item 13", "Android List View Item 14", "Android List View Item 15", "Android List View Item 16", "Android List View Item 17", "Android List View Item 18"}; // Defined Array of images id Integer[] imgid = { R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1, R.drawable.pic1 }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Get ListView object from xml lvList = (ListView) findViewById(R.id.lvList); //call list view adapter constructor adapter = new ListViewAdapter(MainActivity.this, values, imgid); //Assign Above Array Adapter to ListView lvList.setAdapter(adapter); //Create ListView Item click listener lvList.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Toast.makeText(getApplicationContext(), values[position], Toast.LENGTH_LONG).show(); } }); } } |
Create ListViewAdapter.java new Class copy & paste the following code.
Java
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
package com.galaxystech.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; /** * Created by admin on 9/8/2015. */ public class ListViewAdapter extends ArrayAdapter<String> { private final Activity context; private final String[] content; private final Integer[] imgid; public ListViewAdapter(Activity context, String[] content, Integer[] imgid) { super(context, R.layout.inflate_list_view, content); // TODO Auto-generated constructor stub this.context = context; this.content = content; this.imgid = imgid; } public View getView(int position, View view, ViewGroup parent) { LayoutInflater inflater = context.getLayoutInflater(); View rowView = inflater.inflate(R.layout.inflate_list_view, null, true); TextView tvContent = (TextView) rowView.findViewById(R.id.tvContent); ImageView ivImage = (ImageView) rowView.findViewById(R.id.ivImage); tvContent.setText(content[position]); ivImage.setImageResource(imgid[position]); return rowView; }; } |
(876)