Creating ListView With Sections

February 13, 2015 /
Android /
By Chetana

ListView is very powerful and important widget in android. Since now I have posted many blogs on list view and we have already know how to create a ListView with BaseAdapter and how to create a custom list view etc. Check my post Custom ListView in a Dialog in android and Creating ListView for more details.

Now in above cases if you want to make your list with a header to make it more user friendly and interactive its a bit difficult. Same as these two cases in the post I wrote earlier there may be many other cases where we want our ListView more fancy and interactive but seems not possible.

So to create the ListView with section we need to create various xml as per our requirement such as:

1.) Header
2.) ListRow
3.) Activity with listview
4.) and its adapter

Follow the steps shown in the tutorial below to create a Listview with Section Headers.

Step1: Create a project in Android studio.

Step2: Create and write below into section1.xml inside res/layout folder:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="@+id/text"
android:layout_height="50dp"
android:gravity="center_vertical"
android:text="Section1"
android:visibility="visible"
android:layout_width="fill_parent"
android:textColor="#FF000000"
android:background="#FFFFFFFF" />
</LinearLayout>

Step3: Create and write below into section2.xml inside res/layout folder:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView
android:id="@+id/textSeparator"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Section2"
android:visibility="visible"
android:layout_width="fill_parent"
android:textColor="#FFFFFFFF"
android:background="#000" />
</LinearLayout>

Step4: Write following into your activity:

package com.example.listviewsection;

import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.TreeSet;

public class MainActivity extends ListActivity implements OnTouchListener{

private MyAdapter mAdapter;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mAdapter = new MyAdapter();
for (int i = 1; i < 50; i++) {
mAdapter.addItem("Menu Item List " + i);
if (i % 4 == 0) {
mAdapter.addSeparatorItem("Menu " + i);
}
}
setListAdapter(mAdapter);
}
//Adapter Class
private class MyAdapter extends BaseAdapter {

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

private ArrayList<String> mData = new ArrayList<String>();
private LayoutInflater mInflater;

private TreeSet<Integer> mSeparatorsSet = new TreeSet<Integer>();

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

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

public void addSeparatorItem(final String item) {
mData.add(item);
// save separator position
mSeparatorsSet.add(mData.size() - 1);
notifyDataSetChanged();
}

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

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

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

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

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

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
int type = getItemViewType(position);
if (convertView == null) {
holder = new ViewHolder();
switch (type) {
case TYPE_ITEM:
convertView = mInflater.inflate(R.layout.section1, null);
holder.textView = (TextView)convertView.findViewById(R.id.text);
break;
case TYPE_SEPARATOR:
convertView = mInflater.inflate(R.layout.section2, 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;
}

public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return false;
}
}

Step5: Run for the Output:

Check my previous blog posted yesterday on Customizing the Material theme with Android 5.0

Creating ListView With Sections

Related Posts

Leave a Comment:

Popular posts

Socket Programming

Use Of SQLite

TicTacToe Game Implementation

View Pager Example In Android Development