Multi Line ListView Entries in Android

When most people think of a list they think of a single line of text per line. On an Android device a ListView 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, using a two TextViewcustom layout. For a 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. This example extends the previous article's code to add another, third, TextView line to each list entry.

Android Logo

(This Android multi line ListView tutorial assumes that Android Studio is installed, a basic App can be created and run, and the code in this article can be correctly copied into Android Studio. The example code can be changed to meet your own requirements. When entering code in Studio add import statements when prompted by pressing Alt-Enter.)

How to Place Multiple Lines in Each Android ListView Entry

For a ListView with multiple TextViews in Android:

The data must be available in a suitable format.
A custom layout must be defined.
A HashMap for each ListView entry needs creating and loading.
The Adapter linking the TextViews to the data is configured. In this example a SimpleAdapter is used.

Define the Data

As for the previous article the data used is the name of the Amercian states and their state Capital. This is being extended to the third line by adding the state population, from the 2013 census. As for the two line list example the data is stored in an array of arrays. Here the array of arrays is renamed to States_Capitals_Population, the data is now defined thus:

private String[][] States_Capitals_Population =
    {{"Alabama","Montgomery","4,833,722"},
    {"Alaska","Juneau","735,132"},
    {"Arizona","Phoenix","6,626,624"},
    {"Arkansas","Little Rock","2,959,373"},
    {"California","Sacramento","38,332,521"},
    {"Colorado","Denver","5,268,367"},
    {"Connecticut","Hartford","3,596,080"},
    {"Delaware","Dover","925,749"},
    {"Florida","Tallahassee","19,552,860"},
    {"Georgia","Atlanta","9,992,167"},
    {"Hawaii","Honolulu","1,404,054"},
    {"Idaho","Boise","1,612,136"},
    {"Illinois","Springfield","12,882,135"},
    {"Indiana","Indianapolis","6,570,902"},
    {"Iowa","Des Moines","3,090,416"},
    {"Kansas","Topeka","2,893,957"},
    {"Kentucky","Frankfort","4,395,295"},
    {"Louisiana","Baton Rouge","4,625,470"},
    {"Maine","Augusta","1,328,302"}};

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:

<?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="vertical">

    <TextView
        android:id="@+id/line_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/line_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#DF0000"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/line_c"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="#DF0000"
        android:textSize="12sp" />
</LinearLayout>

Load the HashMaps

In the Java class file (here called MainActivity.java) the HashMap is given the new key for the new line and its data:

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 );
}

Tell the SimpleAdapter

The SimpleAdapter is changed to link the new HashMap key to the renamed layout and its new TextView line:

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});

And now each list entry has three lines instead of two.

Android ListView with Multiple Lines

Grab the example source from the multi-line.zip file ready for importing into Android Studio. The zip file is also available from the free Android Example Projects page which has instructions on importing.

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.

Comments

Diksha on 2020/11/02 at 20:07 said: This code is not working.

Tek Eye on 2020/11/03 at 09:59 said: I checked the code in Android Studio 4.1, it runs correctly, however, the import for the project from the zip file did not work. Yet, again newer versions of Android Studio break old projects. I have updated the project zip file to support the newer Android Studio.