Android Multi Column ListView With Sticky Header Example

Android Multi Column ListView With Sticky Header Example is today’s shining topic.

Multi column listview means that every row of the listview have more than one column and this listview is developing a table like structure.

You need to create a ListView with multiple columns in many applications to show multiple data.

Sometimes you want to have a static headers and just below that header, you want multi column listview.

For example, to show a order summary of any restaurant, you have two sticky headers like name of the restaurant and name of the customer.

Just after these two headers, your listview starts where every row includes columns like name of product, price of product, quantity of product etc.

We will develop just this kind of example in this article.

Step 1. Making a List Item File

For creating a ListView, we need to make separate xml layout file.

This layout file represents the whole view structure of each listview row item.

So make a new file named list_item.xml in res->layout structure.

Add the below source code in list_item.xml file.

  • In listview, we have two columns in every row item. One column is showing product name and another is showing the quantity of the product.
  • In the above list_item.xml file, two textviews are representing these two columns.
  • We will use this list_item.xml file in the adapter class where compiler will inflate it in every iteration while making each row for listview.

Step 2. Food Model

The proper way to make a reliable listview in every scenario is to make a listview with help of the model class.

Model class includes getter and setter methods for data maintenance.

For example, in our example we have data in the form of product name and it’s quantity.

We can store product name in String and quantity in integer format.

Create a new java class named FoodModel.java in your app.

Following is the coding lines for FoodModel.java class

  • As I have said earlier, above model class includes get and set method for both product name and quantity.

Step 3. Food Adapter Class

Now let us create a food adapter class which will generate data set for the listview.

Prepare a new java class and set it’s name as FoodAdapter.java

Write down the following lines in FoodAdapter.java class

Diving Step by Step

Hang on, we will now understand above code one by one snippets.

Consider the below code snippet

  • First line is creating object of context.
  • Second is creating an ArrayList with the objects of the FoodModel class.
  • This arraylist (foodModelArrayList) is our main data provider. We are filling this arraylist (foodModelArrayList) with data in Main Activity. We will see this in next step.
  • Then I have created one Constructor. We will get context and arraylist (foodModelArrayList) via the parameters of this constructor.

Look at the below lines

  • Above are necessary method to be overriden. Mainly I have used that arraylist (foodModelArrayList)  in above methods.

Read the following code snippet

  • Above getView() creates every row of the listview.
  • This method is called for the number of times which is equal to the number of rows of the listview.
  • For example, if listview have five rows then getView() method is called for five times.
  • In this getView() method, compiler will first inflate the row layout (list_item.xml) which we have already created in step 1.
  • Then we will fill the values of two textviews. (One is for product name and another is for quantity.)
  • We are using arraylist (foodModelArrayList) to fill the values in textviews.

Step 4. Making Final Changes

Now let us create our app’s main layout structure.

For this, you need to replace your existing code of activity_main.xml with the following one

  • In the above file, I have added three sticky or static headers. It means that these headers can not be changed or modified.
  • First two TextViews and LinearLayout with horizontal orientation represents these three sticky headers.
  • Just below these headers, I have added our multi column listview.

After this, write down the below code snippet in MainActivity.java file.

What does above code means ?

See the below snippet

  • First line is creating one string array called Products. It includes the names of the various food products.
  • Similarly, second line is creating one integer array which holds the quantity of the food products.
  • Third and fourth lines are making objects ArrayList and Listview respectively.

Attend below lines

  • Second line is creating a new object of FoodAdapter class and third one is setting this adapter object with the ListView.
  • First line will insert the data in foodModelArrayList using populateList() method.

populateList() method holds the below code

  • One for loop is there with six iterations.
  • In every iteration, compiler will create the object of the FoodModel class.

Then it will set the product name and quantity to this object. After this, compiler adds this object in the arraylist.

See Our MultiColumn ListView

Download Source Code for Android Multi Column ListView

[sociallocker]Download Source Code For ListView_Multi_Column[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *