In this article we will create an android application with a listview which holds both text and images as listview items.
An extension to this article is available in the article titled “Android ItemClickListener for a ListView with Images and Text“, where an item click event handler is added.
For loading images and text from Internet , see the article titled “Android Lazy Loading images and text in listview from http json data“.
1. Create an Android project namely “ListViewWithImagesAndText”
Figure 1: Create new Android Project
2. Select build target
Figure 2: Select Build Target
3. Enter application details
Figure 3: Application Details
4. Download and extract the zip file containing flag’s images to the directory /res/drawable-ldpi
5. Open and update the file /res/layout/main.xml with the given below code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ListView
android:id="@+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
6. Create a new file namely /res/layout/listview_layout.xml and update the content with the given below code
<?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="match_parent"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/flag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/hello"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
/>
<TextView
android:id="@+id/cur"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10dp"
/>
</LinearLayout>
</LinearLayout>
7. Open and update the file /src/in/wptrafficanalyzer/listviewwithimagesandtext/MainActivity.java with the given below code
package in.wptrafficanalyzer.listviewwithimagesandtext;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class MainActivity extends Activity {
// Array of strings storing country names
String[] countries = new String[] {
"India",
"Pakistan",
"Sri Lanka",
"China",
"Bangladesh",
"Nepal",
"Afghanistan",
"North Korea",
"South Korea",
"Japan"
};
// Array of integers points to images stored in /res/drawable-ldpi/
int[] flags = new int[]{
R.drawable.india,
R.drawable.pakistan,
R.drawable.srilanka,
R.drawable.china,
R.drawable.bangladesh,
R.drawable.nepal,
R.drawable.afghanistan,
R.drawable.nkorea,
R.drawable.skorea,
R.drawable.japan
};
// Array of strings to store currencies
String[] currency = new String[]{
"Indian Rupee",
"Pakistani Rupee",
"Sri Lankan Rupee",
"Renminbi",
"Bangladeshi Taka",
"Nepalese Rupee",
"Afghani",
"North Korean Won",
"South Korean Won",
"Japanese Yen"
};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Each row in the list stores country name, currency and flag
List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();
for(int i=0;i<10;i++){
HashMap<String, String> hm = new HashMap<String,String>();
hm.put("txt", "Country : " + countries[i]);
hm.put("cur","Currency : " + currency[i]);
hm.put("flag", Integer.toString(flags[i]) );
aList.add(hm);
}
// Keys used in Hashmap
String[] from = { "flag","txt","cur" };
// Ids of views in listview_layout
int[] to = { R.id.flag,R.id.txt,R.id.cur};
// Instantiating an adapter to store each items
// R.layout.listview_layout defines the layout of each item
SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.listview_layout, from, to);
// Getting a reference to listview of main.xml layout file
ListView listView = ( ListView ) findViewById(R.id.listview);
// Setting the adapter to the listView
listView.setAdapter(adapter);
}
}
8. Run the application
Figure 4: Application in Execution
9. Download the source code
10. Reference
http://developer.android.com/guide/index.html
I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Ready to test your knowledge in Android? Take this quiz :
Hello, this is a very good example, but how could I do it if the images are not resources in the project?? I mean like a Bitmap or something.
Thanks.
In the following article, we have discussed how to load sdcard images in a list view. Loading ListView with SDCard Thumbnail Images and displaying its Title, Size, Width and Height by merging cursors using MatrixCursor
Hello, and what if I want to show some pictures I have downloaded from internet and are stored in a list?
I’m trying to show some news downloaded from a rss source and every news contains a picture, and I would like to show it, but no results until now, only text is shown.
How could I do it??
Never mind, I got it. ;-P
Hi John, could you let me know how you did it?
Thanks
Wonderful tutorial.
Thanks
very helpfull!
thanks you very much
Great tutorial! By far the easiest one to understand. Thanks!
This is great tutorial, ss there any further enhancement to this utility on when list item click?
Thanks.
Excellent tutorial for beginners
Wow.. Thanks for great tutorial..
I hope u help me.. Thanks@
But how to implement OnClickListener in this code? I tired to try
ItemClickListener is added to the listview and is available in the article Android ItemClickListener for a ListView with Images and Text
great tutorial but how can i display pictures coming from server (located in a folder) and just their id whitch are saved in a database mysql???
I want find out how can i use a web service for creating a table sqlite in android to synchronize with the table mysql and display with her all my pictures!!!!!!
HELP ME PLEASE !!
very helpful…for me
Thank for your tutorial. it realy good example for custom listview. But I have a problem. When I get information from SQLite via Cursor, and send it to arraylist. With “country” and “currency” list, I can do it, but “flag” is can’t. In my roject I custom it like “image Avatar”, “Name”and “type”. Type maybe is: bar, coffee or restaurant. If type is bar, image Avatar will be show “bottle of beer”, and if is coffee, it show “coffee cup”, like this for bar.
So, how I can do it? Please help me.
.
Hieu Nguyen Trung
Thank you George…. It helped for me…
Thanks for this tutorial, it helps a lot.
I thought it wasn’t possible to use a simpleAdapter with images because of the following text in the documentation:
”
constructor parameters:
to [...] These should all be TextViews. [...]
”
Where’s the magic? Is it a mistake in the documentation?
how can we add two or more images in listview???
Great tutorial, Now If want to delete some particular row then how’s that possible??
Great Tutorial helps me lot….Thank You very much….
Very good lesson!!! The large thank.
Hi from Russia.
Really helpfull tutorial. Thank you very much.
First things first: thanks for this great tutorial!
Second: I have adapted the code for my android app, but I am faced with a small problem: text gets cut off, since the text string is variable. Would know how to solve this problem? Or point me in the rigth direction (web content, etc… xD)?
Cheers from Portugal
Ricardo
I forgot to add:
In listview_layout.xml, if i change the orientation i get the following results:
android:orientation=”vertical” image is displayed over the text, but text is presented correctly (without being cut off).
android:orientation=”horizontal” image is displayed to the left of the text, but text is presented incorrectly (cut off).
The goal is to the image to be displayed to the left without getting cut off xD
Thanks, this is a straight forward example.
WOW thank you SOOOO much for the lesson
Best and easiest way to get images and text into listview
Best of luck for your future
T
Best Ever
Hi george i want know how can i show different different text along with country information at bottom of imageview whenever clicked by any user and also i want know i have take imagebutton on right of text view and i want call new activity how can i do plz let me know reply soon…………..
Hey your code worked properly.Next thing I want to know is to how to put the strings below the images,I want to display the list view as an image and the text as up and down.pls reply….
how do you implement selected item like i want to select china. how do u implement that coz i have faile
Hi!.
I was trying to add 2 buttons per row/item in my ListView taking your example as base and I don’t know why I click/tap on the buttons I’ve added and they don’t give me any result (Showing my println ). Any idea?. Here’s my code:
if (convertView == null) {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.list_item, null);
.
.
.
holder.menos = (Button)convertView.findViewById(R.id.buttonmenos);
holder.mas = (Button)convertView.findViewById(R.id.buttonmas);
.
.
.
convertView.setTag(holder);
else{
holder = (ViewHolder) convertView.getTag();
}
}
holder.menos.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println(“inside the buttonlistener1!!”);
}
});
holder.mas.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println(“inside the buttonlistener2!!”);
}
});
class ViewHolder {
Button mas;
Button menos;
int position;
}
class ListItem {
String caption;
Integer images;
}
}
The php code:
$row['countryname'],
‘flag’ => $row['flag'],
‘language’ => $row['language'],
‘capital’ => $row['capital'],
‘currency’ => array(
‘code’ => $row['code'],
‘currencyname’ => $row['currencyname']
)
)
);
}
mysqli_free_result($sql);
header(‘Content-type: application/json’);
echo json_encode($currency);
?>
How good and simple example of ListView with image and text.
Thank you so much for this wonderful example.
Hey Nice Tutorial,
Can you tell me how to add different colors as background for each flag?
Thanks
Very good tutorial. Worked properly. Thank You.
bro i have path of pics ..i want to retrive those pics from sd-card folder …and show them on listview …how to do that ..i dont have pics in drawable ..:( plzplz help bro
The tutorial is good,But if i click the listtextitem in listView,it must highlight permanently and if i click another text item,the previous item which is clicked must be faded and this clicked text item must be highlighted…
Hey your code worked.while I tried to update the values of adapter getting error.can you help me………
i want code for spinner in custom listview plz help me
how to upload image and text via admin app using php then download by custom list view.
could u explain with including php code
Hi, how to add buttons in each listview row?
You can Simply add button in the XML layout.
But Its nothing more then a show.
As we are not able to perform any selection operation neither on Listview, Image, Text nor on Buttons.
So In case you get the solution please let me know.
Hi..do you get the solution yet? im stuck..help me please..
hi..do you get the solution yet? please let me know..im stuck
Wonderful, pretty clear.
how to take different images and different text in one row by adding list view
plzzz help me
in xml i have to design plzzz answer me as soon as.
wonderful. can we load the list view from the my sql by using php!!!!!!!
your tutorial is very helpful to me. if we image and text taken from mysql database using php in list view. how can we implement???? plz help me sir….
can posible add radio button single in this code
how add radio button in this example
Hi,
Thanks for the tutorial.
I need help in fetching the image from te mysql database to andoid.I have stored the image in database with the file name of image like flower_veg.jpg.I am not able to fetch the image.Kindly help me in this.
here is the source code : https://github.com/Oclemy/MySQLGridViewMDetail