android how to create a multiline list view

Question

I am trying to create a list item which consists of two list item on above the other. The code I am using is this:

package com.example.list2;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView lv1=(ListView)findViewById(R.id.listView1);
        Level data[] = new Level[]
                {
                new Level("Heading 1", "Subheading 1"),
                new Level("Heading 2", "Subheading 2"),
                new Level("Heading 3", "Subheading 3")
                };
        LevelAdapter adp=new LevelAdapter(this, R.layout.list_item, data);
        lv1.setAdapter(adp);


    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

the level.java file is this:

package com.example.list2;

public class Level {
    //public int icon;
    public String title;
    public String title2;

    public Level()
    {
        super();
    }

    public Level(String title,String title2) {
        super();
        //this.icon = icon;
        this.title = title;
        this.title2=title2;
    }

}

the leveladapter is this

package com.example.list2;

import android.app.Activity;
import android.content.Context;
import android.graphics.Typeface;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class LevelAdapter extends ArrayAdapter<Level> {

     static Context context;
        static int layoutResourceId;   
         Level data[] = null;

     public LevelAdapter(Context context, int layoutResourceId, Level[] data) {
            super(context, layoutResourceId, data);
            this.layoutResourceId = layoutResourceId;
            this.context = context;
            this.data = data;
        }


        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View row = convertView;
            WeatherHolder holder = null;

            if(row == null)
            {
                LayoutInflater inflater = ((Activity)context).getLayoutInflater();
                row = inflater.inflate(layoutResourceId, parent, false);
               //row.setMinimumHeight(200);
                holder = new WeatherHolder();
              // holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);
                holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);
                holder.txtTitle2 = (TextView)row.findViewById(R.id.txtTitle2);

                row.setTag(holder);
            }
            else
            {
                holder = (WeatherHolder)row.getTag();
            }

            Level weather = data[position];
            holder.txtTitle.setText(weather.title);
        //    holder.imgIcon.setImageResource(weather.icon);

            return row;
        }

        static class WeatherHolder
        {
         //   ImageView imgIcon;
            TextView txtTitle;
            TextView txtTitle2;
        //    ImageView imgIcon2;
        }

}

the list item layout is this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp">



     <TextView android:id="@+id/txtTitle"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:textStyle="bold"
        android:textSize="22sp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" 
        android:padding="50dip"
        android:textColor="#736F6E"
        android:layout_alignParentLeft="true"
        android:textAppearance="@android:attr/textAppearanceLarge"
       />
     <TextView 
         android:id="@+id/txtTitle2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical"
        android:layout_below="@id/txtTitle"
        android:textStyle="bold"
        android:textSize="12sp"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" 
        android:padding="50dip"
        android:textColor="#736F6E"
        android:layout_alignParentLeft="true"
        android:textAppearance="@android:attr/textAppearanceLarge"
         />

</RelativeLayout>

and finally the layout for the main activity is this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >


    <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:dividerHeight="1dp"

         />

</RelativeLayout>

In the output, all i get is a list item which has a very large height, but only the headings get displayed and not the subheadings. Where am i going wrong? Thanks

i have done that because i have the list view occupying the entire screen. — Shivam Bhalla, Jul 22 '13 at 14:12
Possible duplicate of [Material design suggestions for lists with avatar, text and icon](https://stackoverflow.com/questions/27661305/material-design-suggestions-for-lists-with-avatar-text-and-icon) — Zon, Apr 11 '18 at 10:31

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Well, I narrowed the list item XML dimensions to:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp" >

    <TextView
        android:id="@+id/txtTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="2dp"
        android:layout_marginTop="2dp"
        android:gravity="center_vertical"
        android:padding="2dip"
        android:textAppearance="@android:attr/textAppearanceLarge"
        android:textColor="#736F6E"
        android:textSize="22sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtTitle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/txtTitle"
        android:layout_marginBottom="2dp"
        android:layout_marginTop="2dp"
        android:gravity="center_vertical"
        android:padding="2dip"
        android:textAppearance="@android:attr/textAppearanceLarge"
        android:textColor="#736F6E"
        android:textSize="12sp"
        android:textStyle="bold" />

</RelativeLayout>

and in LevelAdapter#getView, just before return row I've added: holder.txtTitle2.setText(weather.title2);

The result is below image file: Result image after below two changes

Is that what you're trying to achieve? I am not mentioning other improvements as removing static fields from LevelAdapter.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 22 '13 at 14:30

gunar

14,660
7
56
87

yes this is exactly what i am trying to achieve. Could you also tell me what other changes you have made ? – Shivam Bhalla Jul 22 '13 at 14:32
Only those 2 that I mentioned. – gunar Jul 22 '13 at 14:33
I replaced `fill_parent` with `wrap_content` and removed those huge margins and paddings you had in `TextView`. Also, in Adapter added the code to display subheading. – gunar Jul 22 '13 at 14:35
I am also facing an issue now that if i try to make the list clickable, I can only click on that part of the list which has the two texts(the left side) while the entire right side which is empty cannot be clicked. Why is that so? – Shivam Bhalla Jul 22 '13 at 14:42
Change list item `layout_width` to `match_parent`. – gunar Jul 22 '13 at 15:06
Thanks it works now. One small question. If, in the adapter, I try to set text color like this `holder.txtTitle2.setTextColor(R.color.holo_blue_dark);` It gives me an error. Why is that so ? – Shivam Bhalla Jul 22 '13 at 18:30
To get the color code you need to call `Color.getColor (R.etc)` as R.color.etc is the color id, not its value. – gunar Jul 22 '13 at 18:51

android how to create a multiline list view

1 Answers1

Linked