Android ListView with Image and Text

https://www.viralandroid.com/2016/02/android-listview-with-image-and-text.html



n this tutorial you will learn to create a custom listview android application with images and text in each list item. To display image, topic, and description in ListView we have to create a new XML file in res/layout folder and add ImageView and TextView.

To implement ListView in android, you have to work more in java activity file. ListView is a common component/layout in android application. It is difficult to make some awesome application without using listview like news app, tutorial app, social app, etc.

Related:
Simple Android ListView Example
Android ListView Example
Android User Interface (UI) Design Tutorial

Android Example: How to Implement Custom ListView with Image and Text

Let’s start by creating new android project with following information.
Application name: Custom Android ListView ImageAndText Example
Company Domain: viralandroid.com
Package name: com.viralandroid.customandroidlistviewtutorialeample
Minimum SDK: Android 3.2 (API 10)

Adding ListView in XML Layout File

Open your XML layout file and add a listview. XML layout file will looks like following.

res/layout/ activity_listview_with_image_and_text.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout 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:orientation="vertical"
	tools:context="viralandroid.com.androidlistviewwithimageandtext.ListViewWithImageAndText">
	<ListView
	android:id="@+id/list_view"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content" />
	</LinearLayout>

view rawactivity_listview_with_image_and_text.xml hosted with ❤ by GitHub

 
Custom ListView XML File

To add image and text in listview first you have to create a new XML layout file in res/layout/ folder. In this file I have added an ImageView two TextView with LinearLayout. Following is the complete content this file.

res/ listview_activity.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/android_list_view_tutorial_with_example"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal"
	android:padding="7dp">
	<ImageView
	android:id="@+id/listview_image"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:contentDescription="@string/app_name"
	android:padding="10dp" />
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	android:padding="7dp">
	<TextView
	android:id="@+id/listview_item_title"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:textSize="15sp"
	android:textStyle="bold" />
	<TextView
	android:id="@+id/listview_item_short_description"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:paddingTop="5dp"
	android:textSize="12sp" />
	</LinearLayout>
	</LinearLayout>

view rawlistview_activity.xml hosted with ❤ by GitHub

Java Activity File

Following is the complete java activity file where we control all thing about listview.

src/ ListViewWithImageAndText.java

	// Android Custom ListView with Image and Text Tutorial with Example and Source Code
	package viralandroid.com.androidlistviewwithimageandtext;
	import android.os.Bundle;
	import android.support.v7.app.AppCompatActivity;
	import android.widget.ListView;
	import android.widget.SimpleAdapter;
	import java.util.ArrayList;
	import java.util.HashMap;
	import java.util.List;
	public class ListViewWithImageAndText extends AppCompatActivity {
	// Array of strings for ListView Title
	String[] listviewTitle = new String[]{
	"ListView Title 1", "ListView Title 2", "ListView Title 3", "ListView Title 4",
	"ListView Title 5", "ListView Title 6", "ListView Title 7", "ListView Title 8",
	};
	int[] listviewImage = new int[]{
	R.drawable.profile_pc, R.drawable.profile_pc, R.drawable.profile_pc, R.drawable.profile_pc,
	R.drawable.profile_pc, R.drawable.profile_pc, R.drawable.profile_pc, R.drawable.profile_pc,
	};
	String[] listviewShortDescription = new String[]{
	"Android ListView Short Description", "Android ListView Short Description", "Android ListView Short Description", "Android ListView Short Description",
	"Android ListView Short Description", "Android ListView Short Description", "Android ListView Short Description", "Android ListView Short Description",
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_listview_with_image_and_text);
	List<HashMap<String, String>> aList = new ArrayList<HashMap<String, String>>();
	for (int i = 0; i < 8; i++) {
	HashMap<String, String> hm = new HashMap<String, String>();
	hm.put("listview_title", listviewTitle[i]);
	hm.put("listview_discription", listviewShortDescription[i]);
	hm.put("listview_image", Integer.toString(listviewImage[i]));
	aList.add(hm);
	}
	String[] from = {"listview_image", "listview_title", "listview_discription"};
	int[] to = {R.id.listview_image, R.id.listview_item_title, R.id.listview_item_short_description};
	SimpleAdapter simpleAdapter = new SimpleAdapter(getBaseContext(), aList, R.layout.listview_activity, from, to);
	ListView androidListView = (ListView) findViewById(R.id.list_view);
	androidListView.setAdapter(simpleAdapter);
	}
	}

view rawListViewWithImageAndText.java hosted with ❤ by GitHub

Strings.xml File

res/values/strings.xml

	<resources>
	<string name="app_name">Android ListView With Image And Text</string>
	</resources>

view rawstrings.xml hosted with ❤ by GitHub

That’s all. Now run your Android ListView with Image and Text application, you will see lists with image, list title and short description which will look like above screenshot.