Android Adding Dynamic ListView Header

Question

I have a list view and I am trying to set header for it so that it looks like a table header. Here is the XML file of my list view row:

PS: I have removed some codes to shorten the question

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/txtDisplayDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
<TextView
    android:id="@+id/txtDisplayCat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
</LinearLayout>

And my XML file of my header list view:

<?xml version="1.0" encoding="utf-8"?>

<TextView
    android:id="@+id/txtDisplayDate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Date" />
<TextView
    android:id="@+id/txtDisplayCat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Category" />

And the class where I populate the list view:

private class ListAdapter extends BaseAdapter {
    LayoutInflater inflater;
    ViewHolder viewHolder;

    public ListAdapter(Context context) {
        // TODO Auto-generated constructor stub
        inflater = LayoutInflater.from(context);
        LinearLayout listHeaderView = (LinearLayout)inflater.inflate(
                R.layout.trans_header_layout, null);
        listview.addHeaderView(listHeaderView);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return _translist.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {     
        // TODO Auto-generated method stub
        if (convertView == null) {

            convertView = inflater.inflate(R.layout.trans_listview_row,
                    null);
            viewHolder = new ViewHolder();

            viewHolder.txt_ddate = (TextView) convertView
                    .findViewById(R.id.txtDisplayDate);
            viewHolder.txt_dcat = (TextView) convertView
                    .findViewById(R.id.txtDisplayCat);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.txt_ddate.setText(_translist.get(position).getDate()
                .trim());
        viewHolder.txt_dcat.setText(_translist.get(position)
                .getCategory().trim());
        return convertView;
    }
}

However, by using these codes, here is the output that I've gotten:

enter image description here

The header does not match with the column below it. I wonder is there any alternate way to add header to list view so that it looks like a table header.

Thanks in advance.

EDIT

My transaction_rec.XML where the listview is located:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Date" />

        <TextView
            android:id="@+id/txtDisplayDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Category" />

        <TextView
            android:id="@+id/txtDisplayCat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>  
</LinearLayout>

<ListView
    android:id="@+id/listview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
</ListView>
</LinearLayout>

And my transactionRec.java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.transaction_rec);
    context = this;
    listview = (ListView) findViewById(R.id.listview);

    //Code to get data from database
}

private class ListAdapter extends BaseAdapter {
    LayoutInflater inflater;
    ViewHolder viewHolder;

    public ListAdapter(Context context) {
        // TODO Auto-generated constructor stub
        inflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return _translist.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {     
        // TODO Auto-generated method stub
        if (convertView == null) {

            convertView = inflater.inflate(R.layout.transaction_rec,
                    null);
            viewHolder = new ViewHolder();

            viewHolder.txt_ddate = (TextView) convertView
                    .findViewById(R.id.txtDisplayDate);

            viewHolder.txt_dcat = (TextView) convertView
                    .findViewById(R.id.txtDisplayCat);

        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        viewHolder.txt_ddate.setText(_translist.get(position).getDate()
                .trim());
        viewHolder.txt_dcat.setText(_translist.get(position)
                .getCategory().trim());

        return convertView;
        }
    }
}

And the output I've gotten now:

enter image description here

Imho you could use width wage. Here is probably a solution http://stackoverflow.com/a/4517358/619673 — deadfish, Aug 29 '14 at 06:02
But is there any way to set the width according to the column of the rows below? — , Aug 29 '14 at 06:03
So you should verride onMeasure for header layout and use the same params for row layout. However wages are easier (It is about to set wage width for items in header and item row too. Let's say: wage is 1 so for headers (we have 5) .20,.20,.20,.20,.20 and for row layout also the same values. ) — deadfish, Aug 29 '14 at 06:07
So basically what am I supposed to do is set the width to 0dp instead of wrap_content? — , Aug 29 '14 at 06:09
Yes. Check example of link what I've gave you. However 0dp not always works for all phones. I use to set 1dp. Just for in case.. — deadfish, Aug 29 '14 at 06:09
Put your columns in vertical LinearLayouts. Then put each LinearLayout into a single horizontal LinearLayout and give each a weight of 1. — Christopher Perry, Aug 29 '14 at 06:13
@ChristopherPerry Sorry but what do you mean? I am quite confused — , Aug 29 '14 at 06:14
@deadfish Nope it does not work even after I changed the width of all textviews in header_list_view to 1dp. — , Aug 29 '14 at 06:15
@ChristopherPerry Hello I've updated my question. Could you please help me take a look? — , Aug 29 '14 at 06:40
@ChristopherPerry Do you have any idea? Because the problem now is the header will be keep repeated to displayed at each row by using the codes you provided previously. — , Aug 29 '14 at 07:42
What you are wanting to do is bad UX, and basically impossible to get right and not screw up the user's content. Why do you think I didn't do this with [Moola](https://play.google.com/store/apps/details?id=nefarious.apps.moolapro&hl=en)? — Christopher Perry, Aug 29 '14 at 07:47

score 0 · Answer 1 · answered Aug 29 '14 at 07:06

0

try this...

        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"

with all text views.

answered Aug 29 '14 at 07:06

Sar

550
4
18

can you provide more details about what and why have you suggested this answer? it will for sure help the author to better grasp the answer – Bogdan Emil Mariesan Aug 29 '14 at 07:33

Android Adding Dynamic ListView Header

1 Answers1