How to draw a section header in android listview just like the ios's UITableview?

Question

I want to draw some section headers in android listview just like the Contacts app did. When the listview was dragged the section headers will move flatly,thanks.

Answer 1

Create a HEADER LAYOUT in your List Item Layout. We use the VISIBILITY option to show and hide the HEADER LAYOUT. This will act like a section header.

In the adapters "getView" method, check the first letter of the "name field (in the case you are showing in accords to Name)" with the first letter of the previous LIST ITEMS "name field". If it macthes hide the HEADER LAYOUT (with a text view) else show the HEADER LAYOUT with the Header Text showing the first letter of the Name Field.

Here is the code

String nameFirstLetter = "A"; // Declare this globally, not inside the getView.

// Inside the getView String nameF = Name.slice(0,1);

 if(!nameFirstLetter.equals(nameF )){
        nameFirstLetter = nameF ;           
        holder.headerText.setText(nameFirstLetter );
        holder.headerLayout.setVisibility(View.VISIBLE);
    }else{
        holder.headerLayout.setVisibility(View.GONE);
    }

This is the easiest method to show section header in Android List view, but it wont work like Iphone section header, ie. The section header hide along with other list items when we scroll up/down.

Answer 2

I found some examples in Android can resolve this issuse: Please find the example about PinnedHeaderListView PinnedHeaderListView Example

Answer 3

Just look at this Android – Sectioned Headers in ListViews example, Its nicely describe how to implement Sectioned Headers in ListViews.

And

android-amazing-listview

Jeff Sharkey's SeparatedListAdapter

MergeAdapter by CommonsWare

Thanks.

Answer 4

You can have a look into SectionedMergeAdapter. If you have multiple sub-lists of data, you can stitch them together and have headers for them.

Example code -

ListView listView = (ListView) findViewById(android.R.id.list);

ArrayAdapter<Integer> adapter1 =
        new ArrayAdapter<>(this, R.layout.item_list, android.R.id.text1, arrayList1);
ArrayAdapter<Integer> adapter2 =
        new ArrayAdapter<>(this, R.layout.item_list, android.R.id.text1, arrayList2);
ArrayAdapter<Integer> adapter3 =
        new ArrayAdapter<>(this, R.layout.item_list, android.R.id.text1, arrayList3);

TextView tv1 = new TextView(this);
tv1.setText("Header 1");
TextView tv2 = new TextView(this);
tv2.setText("Header 2");
TextView tv3 = new TextView(this);
tv3.setText("Header 3");

SectionedMergeAdapter adapter = new SectionedMergeAdapter();

adapter.addSection(new SectionedMergeAdapter.Section(tv1, adapter1));
adapter.addSection(new SectionedMergeAdapter.Section(tv2, adapter2));
adapter.addSection(new SectionedMergeAdapter.Section(tv3, adapter3));

listView.setAdapter(adapter);

Answer 5

If anyone needs a different solution, especially those more used to iOS development, prefer it, or want to emulate the iOS look and feel; I recommend the following:

http://applidium.com/en/news/headerlistview_for_android/

The logic is the same as for iOS, and does most of the leg-work for you