Introduction
In this post I will show you how to use a ListView widget to display
both images and text. This is a common pattern used by many apps. If you
are not familiar with ListView and would like a basic tutorial then
please visit
this link.
For this tutorial, we will build an app which displays a bunch of
items along with an image. I will walk you through the process which
will involve creating custom layouts for each item in ListView and
creating a custom adapter.
Here is a screenshot of what we will build.
Project structure
First we will create an Android Application Module in IntelliJ or an Android application if you are using Eclipse. I use
IntelliJ Community Edition for my Android development and I suggest that you should also have a look.
I will name the package com.debugrelease.android.listviewwithimagesandtext
Other than the name of package and activity name I have not made any changes.
Items
We need some items which we will display in the ListView. As we are
also displaying images along with text, we will need some images. A good
place to get some icons is
www.androidicons.com.
They also have some icons available for free and those will be enough
for this tutorial. Of course you can also use any other images you like.
We will copy these images into the assets folder. You can also find the images in the
Github repository. The project is located in ListViewWithImagesAndText folder.
Model
We will create a new class which will act as the model for our list items. Let’s call this class Item. Here is the code.
package com.debugrelease.android.listviewwithimagesandtext;
public class Item {
public int Id;
public String IconFile;
public String Name;
public Item(int id, String iconFile, String name) {
Id = id;
IconFile = iconFile;
Name = name;
}
}
We will also create a Model class which will provide us with an
ArrayList of our items. Model class also has a method GetById which is
used by the adapter. Here is the code for Model class.
package com.debugrelease.android.listviewwithimagesandtext;
import java.util.ArrayList;
public class Model {
public static ArrayList<Item> Items;
public static void LoadModel() {
Items = new ArrayList<Item>();
Items.add(new Item(1, "ic_action_alarm_2.png", "Alarm"));
Items.add(new Item(2, "ic_action_calculator.png", "Calculator"));
Items.add(new Item(3, "ic_action_google_play.png", "Play"));
Items.add(new Item(4, "ic_action_line_chart.png", "Line Chart"));
Items.add(new Item(5, "ic_action_location_2.png", "Location"));
Items.add(new Item(6, "ic_action_news.png", "News"));
Items.add(new Item(7, "ic_action_stamp.png", "Stamp"));
}
public static Item GetbyId(int id){
for(Item item : Items) {
if (item.Id == id) {
return item;
}
}
return null;
}
}
Layouts
In the main.xml which is the layout used by MainActivity, we will
place a ListView widget and set it’s layout_width and layout_height to
wrap_content. ListView will also have a id set because we’ll need to
reference it in code. Here are contents of main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/listView" />
</LinearLayout>
Now this is important. If we were just displaying text then there
would be no need to create a custom layout, we could just use one from
sdk resources. But since we are displaying more than text, we need to
create a new layout which will be the template for each item. Let’s call
it row.xml
<?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:gravity="center_vertical"
android:minHeight="64dp">
<ImageView
android:id="@+id/imageView"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="9dp"
android:layout_alignParentTop="true"/>
<TextView
android:layout_alignBottom="@+id/imageView"
android:layout_width="97dp"
android:layout_height="32dp"
android:id="@+id/textView"
android:layout_alignParentLeft="true"
android:layout_marginLeft="66dp"
android:layout_alignParentRight="true"
android:gravity="center_vertical"/>
</RelativeLayout>
See how I have placed an ImageView and a TextView within RelativeLayout. For each item one of these will be used.
Adapter
A ListView needs an adapter to display items. And because of our
slightly custom requriement of displaying images and text, we will
create our own custom adapter. This can be done by creating a class
which extends ArrayAdatpter<String>. In this class
getView
method is of interest to us. Within this method we will inflate the row
layout we created earlier. We will then write some code to populate
both ImageView and TextView. Below is the full code for our adapter.
package com.debugrelease.android.listviewwithimagesandtext;
import android.content.Context;
import android.graphics.drawable.Drawable;
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 java.io.IOException;
import java.io.InputStream;
public class ItemAdapter extends ArrayAdapter<String> {
private final Context context;
private final String[] Ids;
private final int rowResourceId;
public ItemAdapter(Context context, int textViewResourceId, String[] objects) {
super(context, textViewResourceId, objects);
this.context = context;
this.Ids = objects;
this.rowResourceId = textViewResourceId;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(rowResourceId, parent, false);
ImageView imageView = (ImageView) rowView.findViewById(R.id.imageView);
TextView textView = (TextView) rowView.findViewById(R.id.textView);
int id = Integer.parseInt(Ids[position]);
String imageFile = Model.GetbyId(id).IconFile;
textView.setText(Model.GetbyId(id).Name);
// get input stream
InputStream ims = null;
try {
ims = context.getAssets().open(imageFile);
} catch (IOException e) {
e.printStackTrace();
}
// load image as Drawable
Drawable d = Drawable.createFromStream(ims, null);
// set image to ImageView
imageView.setImageDrawable(d);
return rowView;
}
}
What’s left now is to load the Model by calling Model.LoadModel
static method, finding the ListView and assigning it the adapter. This
is done in MainActivity class within overridden onCreate method.
package com.debugrelease.android.listviewwithimagesandtext;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
public class MainActivity extends Activity {
ListView listView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Model.LoadModel();
listView = (ListView) findViewById(R.id.listView);
String[] ids = new String[Model.Items.size()];
for (int i= 0; i < ids.length; i++){
ids[i] = Integer.toString(i+1);
}
ItemAdapter adapter = new ItemAdapter(this,R.layout.row, ids);
listView.setAdapter(adapter);
}
}
Conclusion
In conclusion, displaying image and text in each cell of ListView is
pretty simple. All you need to do is define your preferred layout for
each cell, and create an adapter which will load that view for each
position.
The code for this post and all my Android related posts is in a
Github repository. For this tutorial look for ListViewWithImagesAndText folder within the repository.
Icons used in this post and the code are from
androidicons.com
