adding header sections to my listview... how to add these sections according to my code

Question

I have an android application that has a custom list view with an image and a text and works as it should but I want to add a header section to separate between two items.

I have been searching for several days now without any success can anyone help me?

this is my list :

i need to add header section with value "Group A" before the first item that the second header section will be before the Spain flag "Group B"

so can anyone help me ??

this is the xml FILE for the list view

(activity_group_list.xml)

**<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".GroupList" >
    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>
</RelativeLayout>**

xml File for the item row

row_list_group

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dip" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/algeria_flag" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageView1"
        android:ems="10" />

</RelativeLayout>

CustomAdapter.java

package com.devleb.expandablelistdemo3;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView.FindListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

    private static ArrayList<ItemDetails> itemDetailsarrayList;

    LayoutInflater layoutInflater;
    String[] teamName;
    int[] teamFlag;
    Context context;

    public CustomAdapter(ArrayList<ItemDetails> result, Context c) {
        itemDetailsarrayList = result;
        context = c;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return itemDetailsarrayList.size();
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return itemDetailsarrayList.get(arg0);
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        layoutInflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View row = layoutInflater.inflate(R.layout.row_list_group, parent,
                false);
        TextView txt = (TextView) row.findViewById(R.id.textView1);
        ImageView imgv = (ImageView) row.findViewById(R.id.imageView1);
        txt.setText(itemDetailsarrayList.get(position).getName());
        imgv.setImageResource(itemDetailsarrayList.get(position).getImage());

        return row;
    }

}

// in the GroupList file i need to add String array for the groups as the String array of name

GroupList.java

package com.devleb.expandablelistdemo3;

import java.lang.reflect.Array;
import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.content.ClipData.Item;
import android.view.Menu;
import android.widget.ListView;

public class GroupList extends Activity {

    int[] img = { R.drawable.brazil_flag, R.drawable.croatian_flag,
            R.drawable.mexico_flag, R.drawable.cameroon_flag, R.drawable.spain,
            R.drawable.netherlands_flag, R.drawable.czech_republic_flag,
            R.drawable.australia, R.drawable.colombia_flag, R.drawable.gress,
            R.drawable.cote_divoire_flag, R.drawable.japan,
            R.drawable.uruguay_flag, R.drawable.costa_rica_flag,
            R.drawable.england_flag, R.drawable.italy_flag,
            R.drawable.switzerland, R.drawable.ecuador_flag,
            R.drawable.france_flag, R.drawable.honduras_flag,
            R.drawable.argentina_flag, R.drawable.bousna, R.drawable.iran_flag,
            R.drawable.nigeria_flag, R.drawable.germany_flag,
            R.drawable.portugal, R.drawable.ghana_flag,
            R.drawable.united_states_flag, R.drawable.belgium_flag,
            R.drawable.algeria_flag, R.drawable.russia_flag,
            R.drawable.korea_flag };
    String[] name = { "BRA", "CRO", "MEX", "CMR", "ESP", "NED", "CHI", "AUS",
            "COL", "GRE", "CIV", "JPN", "URU", "CRC", "ENG", "ITA", "SUI",
            "ECU", "FRA", "HON", "ARG", "BIH", "IRN", "NGA", "GER", "POR",
            "GHA", "USA", "BEL", "ALG", "RUS", "KOR" };

    ItemDetails item_details;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_group_list);

        ArrayList<ItemDetails> result = getList();
        ListView lv = (ListView) findViewById(R.id.list);
        lv.setAdapter(new CustomAdapter(result, getApplicationContext()));

    }

    private ArrayList<ItemDetails> getList() {
        ArrayList<ItemDetails> results = new ArrayList<ItemDetails>();
        for (int i = 0; i < name.length; i++) {
            item_details = new ItemDetails();
            item_details.setName(name[i]);
            item_details.setImage(img[i]);
            results.add(item_details);
        }
        return results;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.group_list, menu);
        return true;
    }

}

Answer 1

Using your current code, try modifying your arrays slightly like this:

int[] img = { null, R.drawable.brazil_flag, R.drawable.croatian_flag,
        R.drawable.mexico_flag, R.drawable.cameroon_flag, null, R.drawable.spain,
        R.drawable.netherlands_flag, R.drawable.czech_republic_flag,
        R.drawable.australia, null, ... };

String[] name = { "Group A", "BRA", "CRO", "MEX", "CMR", "Group B","ESP", "NED", "CHI", "AUS", ... };

And then in the getView method in your adapter do this:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    layoutInflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View row = null;
    /// inflate a header view here
    if (itemDetailsarrayList.get(position).getImage()==null) {
            row = layoutInflater.inflate(R.layout.row_group_header, parent,
            false);
            TextView txt = (TextView) row.findViewById(R.id.groupTitle);
            txt.setText(itemDetailsarrayList.get(position).getName());
    /// Inflate your regular item row here.
    } else {
            row = layoutInflater.inflate(R.layout.row_list_group, parent,
            false);
            TextView txt = (TextView) row.findViewById(R.id.textView1);
            ImageView imgv = (ImageView) row.findViewById(R.id.imageView1);
            txt.setText(itemDetailsarrayList.get(position).getName());
            imgv.setImageResource(itemDetailsarrayList.get(position).getImage());
    }
    return row;
}

EDIT

/// FILE: res/layout/row_group_header.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#000"
    android:padding="5dip" >

    <TextView
        android:id="@+id/groupTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageView1"
        android:textColor="#FFF"
        android:ems="10" />

</RelativeLayout>

Notice the Null on the image array and the "Group X" in the names array.