Header ListView using BaseAdapter – Android

In the previous post, ListView using BaseAdapter – Android we learned to create a list with custom views. In this post, we will create a Header ListView using BaseAdapter.

Advice

Before proceeding with this tutorial, we would like to share one piece of advice. If it is a problem only a ListView can solve, then only use ListView. Android has provided a new component RecyclerView. It is similar to ListView implementation. But, have many modifications for memory management. In addition to that, RecyclerView also provides animations for transitions like addition, removal and update of the list item. For its implementation, we have provided a tutorial RecyclerView – Android.

Create Header ListView using BaseAdapter

Create Android Application Project

If you are new to Android Studio, then you could learn about creating new projects from our tutorial Create Android Application Project in Android Studio Continued.

Create Android application project with following attributes.

Project Name ListViewHeader
Package Name com.pcsalt.example.listviewheader
Minimum SDK Version 16
Activity Type Empty Activity
Activity Name MainActivity
Layout Name activity_name

Prepare layout screens

activity_main.xml: Layout for MainActivity.java. For this demo application, it would contain only a ListView.




layout_list_item.xml: Layout for list items to be displayed in ListView. In this list, each list item will display two TextView.

layout_list_section.xml: Layout for list sections header. The header will display the title in center.

Create Model classes

Generally, for a normal list, we had a uniform list of a given type. But, for sectioned list, we have to provide all the section title and corresponding section list items. To achieve this, we would create a parent ListItem which would help us in creating a List of uniform items.

Create parent of List items: ListData

This class would be the parent of all the elements listed in a ListView. It will be  used for tagging purpose only. If you can think of any functionality, which would be common for both, headers and list item, then feel free to add in it.

Create List Header items: ListSection

This class would be used to populate the Header of List. Currently, this contains only a title in the center, but many other fields could be added to fulfill the requirement of the problem.

Create List item: ListItem

To populate the list items, this model class would be used. In case, if list items use a different type of elements create a separate subclass of ListData and use them. Instead of adding all elements in a single class and using if…else to show/hide the View.

For this demo, we have all the model classes we needed. Now, we will customize BaseAdapter to display the list.

Subclass BaseAdapter to customize ListView

Since, we are going to create a list with different types of views. The adapter needs same instance check. Otherwise, it would throw ClassCastException.

Subclass BaseAdapter and implement abstract methods

Subclassing BaseAdapter and implementing its abstract methods are same as described in earlier post ListView using BaseAdapter – Android. The difference is in displaying different View types in the ListView.

Create all view type constants

Displaying list item of different types, BaseAdapter provides a method getItemViewType(). This method gets called every time getView() gets called. It accepts a position of the view in the list and returns the type of view it is. To get the exact ViewType, match the instance of the list item and return the type of View. For this, create constants for each ViewType including NONE.

Now, overload getItemViewType() and return expected ViewType after instance match.

Inflate view for Header and List item

In getView() check the ViewType and inflate the corresponding layout.

Complete code of BaseAdapter

Populate data in ListView

For demo purpose, a static list with few headers and list items would be created. This list will be displayed in a ListView

Download Source Code

The complete source code is pushed in GitHub repo. Browse it by clicking on the octocat icon.
Download source code from GitHub

About Krrishnaaaa

Socially known as Navkrishna.. An Android application developer. He likes to create tutorials and post them here or on YouTube or GitHub.. All these activities are shared on Facebook, Twitter, and G+ page.

  • alendra

    Way to go dude..
    such nice tutorial..
    can’t wait for search view addition to this type listview+header..
    as i told you, i already tried to extend the item become an item with several text view and image, however during performingfilter, i have got trouble filtering and updating the view. I able to capture the constraint, but failed to update datalist, so it can be updated everytime i put a character in searchview dialog.
    What did i missed, do i need to update the inflater directly ? several tutorial suggest us to update only the datalist.
    Btw thanks a lot for this tutorial

    • For SearchView implementation, you need to provide a temporary data list. That temporary data list will contain the filtered list.

      I will try to provide a blog post for SearchView implementation in ListView.

      • alendra

        can’t wait for it, a good things to learn in this new year