ListView with Sections in android.

By | February 24, 2012

Hello all……….

We have seen many posts about ListViews like creating a listview, adding data to it, customizing a listview etc.

Take a look at some of these examples

1. Single Selection ListView in android
2. Flitering a ListView using an input from an EditText in Android.
3. How to create a custom ListView in android?
4. Android dialog with ListView.
5. Expandable ListView in ANDROID using SimpleExpandableListAdapter, a simple example.
6. Android listView with icons.
7. Creating scrolling ListView in android.

ListView with sections in android

ListView with sections in android

Today also we will see another customization of listviews.
Today I will show you how to create listviews with sections.

This is the main.xml layout file which contains the ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/orange"
    >
    <ListView
		 	android:id="@+id/list1"
			android:cacheColorHint="#00000000"
			android:scrollbars="none"
			android:background="@drawable/bg_transparent"
			android:fadingEdge="vertical"
			android:soundEffectsEnabled="true"
			android:divider="@drawable/green"
			android:dividerHeight="1px"
			android:padding="0dip"
			android:smoothScrollbar="true"
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:drawSelectorOnTop="false"
		    android:layout_marginTop="5dip"
		    android:layout_marginLeft="5dip"
		    android:layout_marginRight="5dip"
		    android:layout_marginBottom="5dip"
		    android:layout_weight="1"/>

</LinearLayout>

I am using some resources in this, one of which is the “customshape_header.xml” file which is saved in res/drawable directory.
This will ptovide the background for the section header.
customshape_header.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="3dp" />
    <solid android:color="#FFFFFF"/>
    <stroke
        android:width="1dip"
        android:color="#C0C0FF" />
</shape>

Strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">ListView with Sections</string>
    <drawable name="white">#ffffff</drawable>
	<drawable name="black">#000000</drawable>
	<drawable name="green">#347C2C</drawable>
	<drawable name="pink">#FF00FF</drawable>
	<drawable name="violet">#a020f0</drawable>
	<drawable name="grey">#778899</drawable>
	<drawable name="red">#C11B17</drawable>
	<drawable name="yellow">#FFFF8C</drawable>
	<drawable name="PowderBlue">#b0e0e6</drawable>
	<drawable name="brown">#2F1700</drawable>
	<drawable name="Hotpink">#7D2252</drawable>
	<drawable name="orange">#FFA500</drawable>
	<drawable name="darkgrey">#606060</drawable>
</resources>

This is the “lv_layout.xml” file which I am using for each row in the listview.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/l1"
    >
</LinearLayout>

Now the main java file which implements the logic for creating the listview with sections.

package com.coderzheaven.pack;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

public class SectionListViewDemo extends Activity {

	ListView L1;
	myAdapter myadp;
	String last_item = "B";
	static final String[] labels_array = new String[] {
		  "Afghanistan", "Albania",
		  "Bahrain", "Bangladesh",
		  "Cote d'Ivoire", "Cambodia",
		  "Estonia", "Ethiopia", "Faeroe Islands",
		  "Former Yugoslav Republic of Macedonia"
		};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        L1 = (ListView)findViewById(R.id.list1);
        myadp = new myAdapter(this,labels_array);
        L1.setAdapter(myadp);

        L1.setOnItemClickListener(new OnItemClickListener(){
    		@Override
    		public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
    				long arg3) {
    		}
    	});
    }

    /* The adapter class.... */
    class myAdapter extends ArrayAdapter<String>
    {
  	   TextView label;
  	   View row;
  	   public myAdapter(Context context,String[] arr)
  	   {
  		    super(context, android.R.layout.simple_list_item_1, arr);
  	   }

  	   public View getView(int position, View convertView, ViewGroup parent)
  		{
  	 		   try{
  	 				LayoutInflater inflater=getLayoutInflater();
  	 				row = inflater.inflate(R.layout.lv_layout, parent, false);

  	 				LinearLayout L1 = (LinearLayout)row.findViewById(R.id.l1);
  	 				TextView header = new TextView(getApplicationContext());
  	 				L1.addView(header);
  	 				TextView label = new TextView(getApplicationContext());
  	 				L1.addView(label);
  					System.out.println("LAST : " + last_item);
  					header.setText(last_item);
  					label.setText(labels_array[position]);
  					label.setPadding(4, 1, 1, 1);
  					L1.setPadding(4, 4, 4, 4);

  					label.setTextColor(Color.BLACK);

  					if(!labels_array[position].substring(0,1).equalsIgnoreCase(last_item)){
  						System.out.println("ADD :  " + last_item);
  						header.setBackgroundResource(R.drawable.customshape_header);
  						header.setPadding(4, 1, 1, 1);
  						row.setEnabled(false);
  						header.setTextColor(Color.BLACK);
  						header.setText(labels_array[position].substring(0,1));
  						//label.setVisibility(View.GONE);
  						//position-=2;
  					}else{
  						System.out.println("REM :  " + last_item);
  						header.setVisibility(View.GONE);
  					}
  					last_item = labels_array[position].substring(0,1);

  	 		   }catch(Exception e){

  			   }
  		    return row;
  		}
    }
}

Now its ready to run the application.

Please leave your valuable comments on this post.

2 thoughts on “ListView with Sections in android.

  1. syam

    section listview is not working first time it is working fine after scroll it is not showing correct listview

    Reply
  2. Jan Bos

    Thank you.

    I have it implemented in my adressbook app. 😉

    Reply

Leave a Reply

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