custom list view with section headers

22.3k views Asked by At

Newbie question

I have a json file which contains multiple categories with the same name.

For example

{"long_description":"test",
 "short_description":"test",
 "category_name":"work",
 "id":1},
{"long_description":"test2",
 "short_description":"test2",
 "category_name":"work",
 "id":2},
{"long_description":"test",
 "short_description":"test",
 "category_name":"home",
 "id":3}

My question is how to create list view with sections (category name) I'm using a custom adapter heres my loop

try {

    JSONObject responseObject = new JSONObject(response);
    JSONObject itemsObject = responseObject.getJSONObject("items");


    Iterator<?> keysIterator = itemsObject.keys();

    while(keysIterator.hasNext()) {
         String keyString = (String)keysIterator.next();
         JSONObject coupon = couponsObject.getJSONObject(keyString);

         Item item = new Item();
         item.setLongDescription(item.getString("long_description"));
         itemList.add(item);
     }

} catch (Exception e) {
    e.printStackTrace();
}

adapter.notifyDataSetChanged();
1

There are 1 answers

3
Piyush On

Use below links very good examples of listview with header.

http://applidium.github.io/HeaderListView/

http://javatechig.com/android/listview-with-section-header-in-android

http://sunil-android.blogspot.in/2013/08/section-header-listview-in-android.html

in given below code just update data with your header and list item this example is simplest

<?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:background="#2F2F2F"
    android:gravity="center_vertical" >

    <TextView
        android:id="@+id/textSeparator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="8dp"
        android:text=""
        android:textAllCaps="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#FFF"
        android:textStyle="bold"
        android:visibility="visible" />

</LinearLayout>

CustomAdapter.java

import java.util.ArrayList;
import java.util.TreeSet;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

class CustomAdapter extends BaseAdapter {

    private static final int TYPE_ITEM = 0;
    private static final int TYPE_SEPARATOR = 1;

    private ArrayList<String> mData = new ArrayList<String>();
    private TreeSet<Integer> sectionHeader = new TreeSet<Integer>();

    private LayoutInflater mInflater;

    public CustomAdapter(Context context) {
        mInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public void addItem(final String item) {
        mData.add(item);
        notifyDataSetChanged();
    }

    public void addSectionHeaderItem(final String item) {
        mData.add(item);
        sectionHeader.add(mData.size() - 1);
        notifyDataSetChanged();
    }

    @Override
    public int getItemViewType(int position) {
        return sectionHeader.contains(position) ? TYPE_SEPARATOR : TYPE_ITEM;
    }

    @Override
    public int getViewTypeCount() {
        return 2;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public String getItem(int position) {
        return mData.get(position);
    }

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

    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder = null;
        int rowType = getItemViewType(position);

        if (convertView == null) {
            holder = new ViewHolder();
            switch (rowType) {
            case TYPE_ITEM:
                convertView = mInflater.inflate(R.layout.snippet_item1, null);
                holder.textView = (TextView) convertView.findViewById(R.id.text);
                break;
            case TYPE_SEPARATOR:
                convertView = mInflater.inflate(R.layout.snippet_item2, null);
                holder.textView = (TextView) convertView.findViewById(R.id.textSeparator);
                break;
            }
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.textView.setText(mData.get(position));

        return convertView;
    }

    public static class ViewHolder {
        public TextView textView;
    }

}

SectionListView.java

import android.app.ListActivity;
import android.os.Bundle;

public class SectionListView extends ListActivity {

    private CustomAdapter mAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mAdapter = new CustomAdapter(this);
        for (int i = 1; i < 30; i++) {
            mAdapter.addItem("Row Item #" + i);
            if (i % 4 == 0) {
                mAdapter.addSectionHeaderItem("Section #" + i);
            }
        }
        setListAdapter(mAdapter);
    }

}