CODEWITHSUNDEEP
androidlistview
Julian Suarez
Julian Suarez

Reputation: 4521

ListView with sections and custom backgrounds for each section

Layout

I want to accomplish the above layout using a listvview. I have several sections (dynamically generated) and several items. I need to encapsulate each section on its own background but I need the user to be able to scroll everything as normal listview, and not only the smaller sections. (So implementing N-listviews for each sections is rulled out)

So my question is how would you go about building a layout like this?

Upvotes: 0

Views: 317

Answers (3)

vovahost
vovahost

Reputation: 36027

It's not difficult. I done this with a ListView and it's working with recycling. In this piece of code It will switch color for every list item between green and red. 

@Overrid
public int getItemViewType(int position) {
        if((position % 2) == 0) {
            return TYPE_GREEN;
        } else {
            return TYPE_RED;;
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    int type = getItemViewType(position);

    if (type == TYPE_RED) {
        convertView = mInflater.inflate(R.layout.list_item_red,
                null);
    } else if (type == TYPE_GREEN) {
        convertView = mInflater.inflate(R.layout.list_item_green,
                null);
    }

}

Upvotes: 1

pradeep
pradeep

Reputation: 176

For ur ref , I have implemented the same thing in the following application

this is how I have implemented, 1) kept all the data in an Arraylist. For example:

private String HEADING_TAG="heading";
private String ITEM_TAG="item" ;
ArrayList<String> data=
new ArrayList<String>();
data.add( HEADING_TAG+"@selector");
data.add( ITEM_TAG+ "@item1")
/* in the above line "heading" is a tag, just to know that the 
following listitem is a heading.
"@" is a separator using which we wl split the string later in 
the adapter*/

2) Now implement a custom adapter and overide getView() method. Note: pass the length of the list to the adapter. 3) access the data list inside getView() method, an arguement called position will be available in getView method. Use that variable to iterate list. For Example:

getView(....,....,int pos,....)
{
String temp[]= data.get(position).split("@");
if(temp[0].equals( HEADING_TAG ))
{
// change the background to the layout which u r inflating.
// Set the heading to the textview or what ever view u defined
//the layout
}
else if (temp[1].equals( ITEM_TAG ) )
{
// set the item to the view
}
}

Hope this helps...

Upvotes: 0

Krylez
Krylez

Reputation: 17820

The simplest solution is to not use a ListView at all. Use series of LinearLayout containers, adding the items manually. Keep in mind that this option will not use View recycling and will be a performance disaster for long lists.

If performance problems prevent LinearLayouts, you'll have to do some clever manipulation of the list items to achieve your goal. You can make it appear that the sections have continuous backgrounds by setting the backgrounds of all items in a list to use a similar background and then offset the content of the items within an inner View. You'd pad the top of the first item of a section, the bottom of the last item in a section, and the sides of all items. In order to maintain the illusion, remove the ListView divider and set one in your view within the list item. Once you start interacting with the list, the selector will look funny, so you'll likely want to customize it.

                                  ---
|-------------------------|        |
|#########################|        |
|##|-------------------|##|        |
|##|                   |##|  Actual list item
|##|                   |##|        |
|##|                   |##|        |
|##|-------------------|##|       ---
|##|                   |##|        |
|##|                   |##|  Actual list item
|##|                   |##|        |
|##|-------------------|##|       ---
|##|                   |##|        |
|##|                   |##|        |
|##|                   |##|  Actual list item
|##|-------------------|##|        |
|#########################|        |
|-------------------------|        |
                                  ---  
|-------------------------|        |
|@@@@@@@@@@@@@@@@@@@@@@@@@|        |
|@@|-------------------|@@|        |
|@@|                   |@@|  Actual list item
|@@|                   |@@|        |
|@@|                   |@@|        |
|@@|-------------------|@@|       ---
|@@|                   |@@|        |
|@@|                   |@@|        |
|@@|                   |@@|  Actual list item
|@@|-------------------|@@|        |
|@@@@@@@@@@@@@@@@@@@@@@@@@|        |
|-------------------------|        |
                                  ---

Upvotes: 0

Related Questions