Multi-Line ListView Entries in Android

How to Place Multiple Lines in Each Android ListView Entry

When most people think of a list they think of a single line of text per line. On an Android device a list can have one, two, three and many more lines per list entry. In the article Two Line Lists In Android it was shown how to create a two line entry for each list item. For multiple lines per list entry the same code is used, it is just extended for each additional line. Read the previous article to understand the principles involved. Here we extend that article’s code to add another, third, line to each list entry.

Define the Data

Again the data used is the name of an Amercian State and the state Capital, plus the state population from the 2010 census. The array containing this data is now defined thus:

[code lang=”Java”]private String[][] States_Capitals_Population =
{{"Alabama","Montgomery","4,779,736"},
{"Alaska","Juneau","710,231"},
{"Arizona","Phoenix","6,392,017"},
{"Arkansas","Little Rock","2,915,918"},
{"California","Sacramento","37,253,956"},
{"Colorado","Denver","5,029,196"},
{"Connecticut","Hartford","3,574,097"},
{"Delaware","Dover","897,934"},
{"Florida","Tallahassee","18,801,310"}};[/code]

Define the View for Each List Entry

The file my_two_lines.xml now becomes multi_lines.xml, with a new TextView with id line_c to hold the state population, for example:

[code lang=”xml”]<?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="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/line_a"
android:textSize="14dp"
android:textColor="#FFFFFF"
android:textStyle="italic"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/line_b"
android:textSize="12dp"
android:textColor="#BFFF00"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView android:id="@+id/line_c"
android:textSize="10dp"
android:textColor="#BFFF00"
android:textStyle="italic"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>[/code]

Load the HashMaps

The HashMap is given the new key for the new line and its data:

[code lang=”Java”]HashMap<String,String> item;
for(int i=0;i<States_Capitals_Population.length;i++){
item = new HashMap<String,String>();
item.put( "line1", States_Capitals_Population[i][0]);
item.put( "line2", States_Capitals_Population[i][1]);
item.put( "line3", States_Capitals_Population[i][2]);
list.add( item );
}[/code]

Tell the SimpleAdapter

The SimpleAdapter is changed to link the HashMap key to the View line:

[code lang=”Java”]sa = new SimpleAdapter(this, list,
R.layout.multi_lines,
new String[] { "line1","line2", "line3" },
new int[] {R.id.line_a, R.id.line_b, R.id.line_c});[/code]

Android ListView with Multiple LinesAnd now each list entry has three lines instead of two.

And So On

Likewise for additional lines, if for example a states geographical area was added to the data as another string in each state’s array entry, {“Alabama”,”Montgomery”,”4,779,736″,”52,419 square miles”}. Then another TextView with an id would be added to multi_lines.xml, another key to the HashMap and the SimpleAdapter told of the link between the two.

See Also

To read back the data from an item selected in the multi-line list see our article Grab the Data From a Multi-line Android List.

One thought on “Multi-Line ListView Entries in Android

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.