Android – Sectioned Headers in ListViews

 






File: main.xml

<?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">

 <ListView
  android:id="@+id/add_journalentry_menuitem"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" />
 <ListView
  android:id="@+id/list_journal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" />
</LinearLayout>

File: list_header.xml

<TextView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/list_header_title"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:paddingTop="2dip"
 android:paddingBottom="2dip"
 android:paddingLeft="5dip"
 style="?android:attr/listSeparatorTextViewStyle" />

File: list_item.xml



<?xml version="1.0" encoding="utf-8"?>
<!-- list_item.xml -->
<TextView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/list_item_title"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:paddingTop="10dip"
 android:paddingBottom="10dip"
 android:paddingLeft="15dip"
 android:textAppearance="?android:attr/textAppearanceLarge"
 />

File: list_complex.xml



<?xml version="1.0" encoding="utf-8"?>
<!-- list_complex.xml -->
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:paddingTop="10dip"
 android:paddingBottom="10dip"
 android:paddingLeft="15dip"
 >
 <TextView
  android:id="@+id/list_complex_title"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  />
 <TextView
  android:id="@+id/list_complex_caption"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textAppearance="?android:attr/textAppearanceSmall"
  />
</LinearLayout>


File: add_journalentry_menuitem.xml



<?xml version="1.0" encoding="utf-8"?>
<!-- list_item.xml -->
<TextView
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/list_item_title"
 android:gravity="right"
 android:drawableRight="@drawable/ic_menu_add"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:paddingTop="0dip"
 android:paddingBottom="0dip"
 android:paddingLeft="10dip"
 android:textAppearance="?android:attr/textAppearanceLarge" />


File: ListSample.java





import java.util.HashMap;
import java.util.Map;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class ListSample extends Activity
 {

  public final static String ITEM_TITLE = "title";
  public final static String ITEM_CAPTION = "caption";

  // SectionHeaders
  private final static String[] days = new String[]{"Mon", "Tue", "Wed", "Thur", "Fri"};

  // Section Contents
  private final static String[] notes = new String[]{"Ate Breakfast", "Ran a Marathan ...yah really", "Slept all day"};

  // MENU - ListView
  private ListView addJournalEntryItem;

  // Adapter for ListView Contents
  private SeparatedListAdapter adapter;

  // ListView Contents
  private ListView journalListView;

  public Map<String, ?> createItem(String title, String caption)
   {
    Map<String, String> item = new HashMap<String, String>();
    item.put(ITEM_TITLE, title);
    item.put(ITEM_CAPTION, caption);
    return item;
   }

  @Override
  public void onCreate(Bundle icicle)
   {
    super.onCreate(icicle);

    // Sets the View Layer
    setContentView(R.layout.main);

    // Interactive Tools
    final ArrayAdapter<String> journalEntryAdapter = new ArrayAdapter<String>(this, R.layout.add_journalentry_menuitem, new String[]{"Add Journal Entry"});

    // AddJournalEntryItem
    addJournalEntryItem = (ListView) this.findViewById(R.id.add_journalentry_menuitem);
    addJournalEntryItem.setAdapter(journalEntryAdapter);
    addJournalEntryItem.setOnItemClickListener(new OnItemClickListener()
     {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long duration)
       {
        String item = journalEntryAdapter.getItem(position);
        Toast.makeText(getApplicationContext(), item, Toast.LENGTH_SHORT).show();
       }
     });

    // Create the ListView Adapter
    adapter = new SeparatedListAdapter(this);
    ArrayAdapter<String> listadapter = new ArrayAdapter<String>(this, R.layout.list_item, notes);

    // Add Sections
    for (int i = 0; i < days.length; i++)
     {
      adapter.addSection(days[i], listadapter);
     }

    // Get a reference to the ListView holder
    journalListView = (ListView) this.findViewById(R.id.list_journal);

    // Set the adapter on the ListView holder
    journalListView.setAdapter(adapter);

    // Listen for Click events
    journalListView.setOnItemClickListener(new OnItemClickListener()
     {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long duration)
       {
        String item = (String) adapter.getItem(position);
        Toast.makeText(getApplicationContext(), item, Toast.LENGTH_SHORT).show();
       }
     });
   }

 }



File: SeparatedListAdapter.java





import java.util.LinkedHashMap;
import java.util.Map;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Adapter;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;

public class SeparatedListAdapter extends BaseAdapter
 {
  public final Map<String, Adapter> sections = new LinkedHashMap<String, Adapter>();
  public final ArrayAdapter<String> headers;
  public final static int TYPE_SECTION_HEADER = 0;

  public SeparatedListAdapter(Context context)
   {
    headers = new ArrayAdapter<String>(context, R.layout.list_header);
   }

  public void addSection(String section, Adapter adapter)
   {
    this.headers.add(section);
    this.sections.put(section, adapter);
   }

  public Object getItem(int position)
   {
    for (Object section : this.sections.keySet())
     {
      Adapter adapter = sections.get(section);
      int size = adapter.getCount() + 1;

      // check if position inside this section
      if (position == 0) return section;
      if (position < size) return adapter.getItem(position - 1);

      // otherwise jump into next section
      position -= size;
     }
    return null;
   }

  public int getCount()
   {
    // total together all sections, plus one for each section header
    int total = 0;
    for (Adapter adapter : this.sections.values())
     total += adapter.getCount() + 1;
    return total;
   }

  @Override
  public int getViewTypeCount()
   {
    // assume that headers count as one, then total all sections
    int total = 1;
    for (Adapter adapter : this.sections.values())
     total += adapter.getViewTypeCount();
    return total;
   }

  @Override
  public int getItemViewType(int position)
   {
    int type = 1;
    for (Object section : this.sections.keySet())
     {
      Adapter adapter = sections.get(section);
      int size = adapter.getCount() + 1;

      // check if position inside this section
      if (position == 0) return TYPE_SECTION_HEADER;
      if (position < size) return type + adapter.getItemViewType(position - 1);

      // otherwise jump into next section
      position -= size;
      type += adapter.getViewTypeCount();
     }
    return -1;
   }

  public boolean areAllItemsSelectable()
   {
    return false;
   }

  @Override
  public boolean isEnabled(int position)
   {
    return (getItemViewType(position) != TYPE_SECTION_HEADER);
   }

  @Override
  public View getView(int position, View convertView, ViewGroup parent)
   {
    int sectionnum = 0;
    for (Object section : this.sections.keySet())
     {
      Adapter adapter = sections.get(section);
      int size = adapter.getCount() + 1;

      // check if position inside this section
      if (position == 0) return headers.getView(sectionnum, convertView, parent);
      if (position < size) return adapter.getView(position - 1, convertView, parent);

      // otherwise jump into next section
      position -= size;
      sectionnum++;
     }
    return null;
   }

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

 }

Use of SQLite -- 2

5.) Create a Activity SaveData.java to Save the information :

package com.app.DatabaseSample;

import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;

public class SaveData extends Activity implements OnClickListener { 
    private DataManipulator dh;    
    static final int DIALOG_ID = 0;

    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.save);
        View add = findViewById(R.id.Button01add);
        add.setOnClickListener(this);
        View home = findViewById(R.id.Button01home);
        home.setOnClickListener(this);          
    }

    public void onClick(View v){
        switch(v.getId()){
            case R.id.Button01home:
                Intent i = new Intent(this, DatabaseSample.class);
                startActivity(i);
            break;
            case R.id.Button01add:
                View editText1 = (EditText) findViewById(R.id.name);
                View editText2 = (EditText) findViewById(R.id.number);
                View editText3 = (EditText) findViewById(R.id.skypeId);
                View editText4 = (EditText) findViewById(R.id.address);
                String myEditText1=((TextView) editText1).getText().toString();
                String myEditText2=((TextView) editText2).getText().toString();
                String myEditText3=((TextView) editText3).getText().toString();
                String myEditText4=((TextView) editText4).getText().toString();
                this.dh = new DataManipulator(this);
                this.dh.insert(myEditText1,myEditText2,myEditText3,myEditText4);
                showDialog(DIALOG_ID);
            break;
        }
    } 
    protected final Dialog onCreateDialog(final int id) {
        Dialog dialog = null;
        switch(id) {
            case DIALOG_ID:
                AlertDialog.Builder builder = new AlertDialog.Builder(this);
                builder.setMessage("Information saved successfully ! Add Another Info?").setCancelable(false).setPositiveButton("No", newDialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int id) {
                                SaveData.this.finish();
                        }
                }).setNegativeButton("Yes", new DialogInterface.OnClickListener(){
                        public void onClick(DialogInterface dialog, int id) {
                                dialog.cancel();
                        }
                });
                AlertDialog alert = builder.create();
                dialog = alert;
                break;

             default:
        }
        return dialog;
    }
}

6.) Create a ListView to show the all data in a list in res/layout/check.xml :

<?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" >
<TextView android:id="@+id/selection2" android:layout_width="fill_parent"android:layout_height="wrap_content"
android:text="NAME – TELPHONE NO – SKYPE ID- ADDRESS" />
<TextView android:id="@+id/selection" android:layout_width="fill_parent"android:layout_height="wrap_content" />
<ListView android:id="@android:id/list" android:layout_width="fill_parent"android:layout_height="fill_parent" android:drawSelectorOnTop="false"android:textSize="3dip" />
</LinearLayout>

7.) Create a Activity CheckData.java :

package com.app.DatabaseSample;

import java.util.ArrayList;
import java.util.List;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class CheckData extends ListActivity  {    
    TextView selection;
    public int idToModify;
    DataManipulator dm;

    List<String[]> list = new ArrayList<String[]>();
    List<String[]> names2 =null ;
    String[] stg1;
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.check);
        dm = new DataManipulator(this);
        names2 = dm.selectAll();

        stg1=new String[names2.size()];
        int x=0;
        String stg;

        for (String[] name : names2) {
                stg = name[1]+" – "+name[2]+ " – "+name[3]+" – "+name[4];
                stg1[x]=stg;
                x++;
        }

        ArrayAdapter<String> adapter = newArrayAdapter<String>(this,android.R.layout.simple_list_item_1,stg1);
        this.setListAdapter(adapter);
        selection=(TextView)findViewById(R.id.selection);
   }      

   public void onListItemClick(ListView parent, View v, int position, long id) {
        selection.setText(stg1[position]);
   }
}

9.) Run the Application.

Steps to Create:

1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. DatabaseSample. Enter following information:
Project name: DatabaseSample
Build Target: Android 2.1
Application name: DatabaseSample
Package name: com.app.DatabaseSample
Create Activity: DatabaseSample

On Clicking Finish DatabaseSample code structure is generated with the necessary Android Packages being imported along with DatabaseSample.java. DatabaseSample class will look like following :

package com.app.DatabaseSample;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;

public class DatabaseSample extends Activity implements OnClickListener {
    /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        View button1Click = findViewById(R.id.button1);
        button1Click.setOnClickListener(this);
        View button2Click = findViewById(R.id.button2);
        button2Click.setOnClickListener(this);      
   }
   @Override
   public void onClick(View v) {
        // TODO Auto-generated method stub
        switch(v.getId()){
            case R.id.button1:
                Intent i = new Intent(this, SaveData.class); 
                startActivity(i);
            break;
            case R.id.button2:
                Intent i1 = new Intent(this, CheckData.class); 
                startActivity(i1);
            break;
        }
    }
}

To download source code of above example Click Here.

Output – The final output: