Home Projects Tutorials About

bartinger.at
stop(); //Hammertime Type your search here...

Featured Post

Tutorial: Local game scores with SQLite

Create a standard Android-Project, or include the following into your game. At first we need a class which creates a database if it doesnt exist and can access the database. Make a new class and call it ScoreDatabase and extend it from SQLiteOpenHelper import android.content.Context; import... Read More

ListView with Sections/Separators

Posted by Bartinger | Posted in All, Tutorials | Posted on 11-07-2011 Tags: android, item, list, listview, section, separator, tutorial
65

E dit : ListView tutorial part 2 is about clickable widgets in ListView items Take a look!

If youve ever used ListView, and i bet you had, then you will have noticed that it is not very handy if you want to display a huge amount of data. I found a few solutions, how to categorize list items like in your phones preferences. This post wont be about how it looks rather more about how to write it. Ill show you 2 solutions and describe one if it more detailed. There is no perfect solution, but you can decide which one you prefer.

Solution #1:
One is to include the Sectionview in every item of your list and set its visibility to GONE. Then make it visible in each first item. I dont like this one, because then you have a lot of unused TextViews (or whatever) which consumes memory. If you want to read much more about ListView and sectioning, Cyril wrote a great post about it. And here is my preferred way for sectioning list items.

Solution #2:
I didnt like the first version so i thought about my own way to do it. (Before Cyrils post was written ). So what did I do? I created 2 xml files. One for the section and one for the list item. If you want to have your section item look like that one in the preferences you can get its attributes like that:
< L i n e a r L a y o u t x m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : l a y o u t _ w i d t h = " f i l l _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : o r i e n t a t i o n = " v e r t i c a l " > < i n c l u d e a n d r o i d : i d = " @ + i d / l i s t _ i t e m _ s e c t i o n _ t e x t " l a y o u t = " @ a n d r o i d : l a y o u t / p r e f e r e n c e _ c a t e g o r y "/ > < L i n e a r L a y o u t >

Of course you can design your section header however you want. The second xml is for all the list items. I copied it from another project of mine, you can use it if you want.
< L i n e a r L a y o u t x m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : l a y o u t _ w i d t h = " f i l l _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : m i n H e i g h t = " ? a n d r o i d : a t t r / l i s t P r e f e r r e d I t e m H e i g h t " a n d r o i d : g r a v i t y = " c e n t e r _ v e r t i c a l " a n d r o i d : p a d d i n g R i g h t = " ? a n d r o i d : a t t r / s c r o l l b a r S i z e " > < I m a g e V i e w a n d r o i d : i d = " @ + i d / l i s t _ i t e m _ e n t r y _ d r a w a b l e " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " a n d r o i d : s r c = " @ a n d r o i d : d r a w a b l e / i c _ m e n u _ p r e f e r e n c e s " a n d r o i d : p a d d i n g L e f t = " 9 d p " / > < R e l a t i v e L a y o u t a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ m a r g i n L e f t = " 1 0 d i p " a n d r o i d : l a y o u t _ m a r g i n R i g h t = " 6 d i p " a n d r o i d : l a y o u t _ m a r g i n T o p = " 6 d i p " a n d r o i d : l a y o u t _ m a r g i n B o t t o m = " 6 d i p " a n d r o i d : l a y o u t _ w e i g h t = " 1 " > < T e x t V i e w a n d r o i d : i d = " @ + i d / l i s t _ i t e m _ e n t r y _ t i t l e " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : s i n g l e L i n e = " t r u e " a n d r o i d : t e x t A p p e a r a n c e = " ? a n d r o i d : a t t r / t e x t A p p e a r a n c e L a r g e "

a n d r o i d : e l l i p s i z e = " m a r q u e e " a n d r o i d : f a d i n g E d g e = " h o r i z o n t a l "/ > < T e x t V i e w a n d r o i d : i d = " @ + i d / l i s t _ i t e m _ e n t r y _ s u m m a r y " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ b e l o w = " @ i d / l i s t _ i t e m _ e n t r y _ t i t l e " a n d r o i d : l a y o u t _ a l i g n L e f t = " @ i d / l i s t _ i t e m _ e n t r y _ t i t l e " a n d r o i d : t e x t A p p e a r a n c e = " ? a n d r o i d : a t t r / t e x t A p p e a r a n c e S m a l l " a n d r o i d : s i n g l e L i n e = " t r u e " a n d r o i d : t e x t C o l o r = " ? a n d r o i d : a t t r / t e x t C o l o r S e c o n d a r y "/ > < / R e l a t i v e L a y o u t > < / L i n e a r L a y o u t >

You can see how these layouts look like on the screenshot above. Next step is the j a v acode. I created 3 classes and one interface. EntryAdapter (ArrayAdapter) Interface: Item SectionItem (implements Item) EntryItem (implements Item) The Item interface contains the method: i s S e c t i o n ( ) ;This will return true when its a SectionItem and return false when its a EntryItem so that we can keep the two apart. Item, EntryItem and SectionItem arent that hard to understand, because there isnt really much code. There are included in the project zip file at the end of the post. The Adapter should be a explained in more detail. Heres the code:
p u b l i cc l a s sE n t r y A d a p t e re x t e n d sA r r a y A d a p t e r{ p r i v a t eC o n t e x tc o n t e x t ; p r i v a t eA r r a y L i s ti t e m s ; p r i v a t eL a y o u t I n f l a t e rv i ; p u b l i cE n t r y A d a p t e r ( C o n t e x tc o n t e x t , A r r a y L i s ti t e m s ){ s u p e r ( c o n t e x t , 0 ,i t e m s ) ; t h i s . c o n t e x t=c o n t e x t ; t h i s . i t e m s=i t e m s ; v i=( L a y o u t I n f l a t e r ) c o n t e x t . g e t S y s t e m S e r v i c e ( C o n t e x t . L A Y O U T _ I N F L A T E R _ S E R V I C E ) ; } @ O v e r r i d e p u b l i cV i e wg e t V i e w ( i n tp o s i t i o n ,V i e wc o n v e r t V i e w ,V i e w G r o u pp a r e n t ){ V i e wv=c o n v e r t V i e w ; f i n a lI t e mi=i t e m s . g e t ( p o s i t i o n ) ; i f( i! =n u l l ){ i f ( i . i s S e c t i o n ( ) ) { S e c t i o n I t e ms i=( S e c t i o n I t e m ) i ; v=v i . i n f l a t e ( R . l a y o u t . l i s t _ i t e m _ s e c t i o n ,n u l l ) ; v . s e t O n C l i c k L i s t e n e r ( n u l l ) ; v . s e t O n L o n g C l i c k L i s t e n e r ( n u l l ) ; v . s e t L o n g C l i c k a b l e ( f a l s e ) ; f i n a lT e x t V i e ws e c t i o n V i e w= ( T e x t V i e w )v . f i n d V i e w B y I d ( R . i d . l i s t _ i t e m _ s e c t i o n _ t e x t ) ; s e c t i o n V i e w . s e t T e x t ( s i . g e t T i t l e ( ) ) ; }e l s e{ E n t r y I t e me i=( E n t r y I t e m ) i ; v=v i . i n f l a t e ( R . l a y o u t . l i s t _ i t e m _ e n t r y ,n u l l ) ; f i n a lT e x t V i e wt i t l e= ( T e x t V i e w ) v . f i n d V i e w B y I d ( R . i d . l i s t _ i t e m _ e n t r y _ t i t l e ) ; f i n a lT e x t V i e ws u b t i t l e= ( T e x t V i e w ) v . f i n d V i e w B y I d ( R . i d . l i s t _ i t e m _ e n t r y _ s u m m a r y ) ; i f( t i t l e! =n u l l )t i t l e . s e t T e x t ( e i . t i t l e ) ;

i f ( s u b t i t l e! =n u l l )s u b t i t l e . s e t T e x t ( e i . s u b t i t l e ) ; } } r e t u r nv ; } }

The interesting part is the getView() method. Here you have to keep the two apart and inflate either the section xml or the entry xml. Cast the item, then inflate the right xml to get the view. Setup the TextViews or whatever you use in your items and then return the view. Now how to actually add items in your activity (I use ListActivity for this example):
A r r a y L i s ti t e m s=n e wA r r a y L i s t ( ) ; i t e m s . a d d ( n e wS e c t i o n I t e m ( " C a t e g o r y1 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m1 " ," T h i si si t e m1 . 1 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m2 " ," T h i si si t e m1 . 2 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m3 " ," T h i si si t e m1 . 3 " ) ) ; i t e m s . a d d ( n e wS e c t i o n I t e m ( " C a t e g o r y2 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m4 " ," T h i si si t e m2 . 1 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m5 " ," T h i si si t e m2 . 2 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m6 " ," T h i si si t e m2 . 3 " ) ) ; i t e m s . a d d ( n e wE n t r y I t e m ( " I t e m7 " ," T h i si si t e m2 . 4 " ) ) ; E n t r y A d a p t e ra d a p t e r=n e wE n t r y A d a p t e r ( t h i s ,i t e m s ) ; s e t L i s t A d a p t e r ( a d a p t e r ) ;

Pretty simple huh? Theres just one thing that you have to take care of. In the onListItemClick() method (and long click as well of course) you have to check if the clicked item isnt a Section item.
i f ( ! i t e m s . g e t ( p o s i t i o n ) . i s S e c t i o n ( ) ) { E n t r y I t e mi t e m=( E n t r y I t e m ) i t e m s . g e t ( p o s i t i o n ) ; T o a s t . m a k e T e x t ( t h i s ," Y o uc l i c k e d"+i t e m . t i t l e,T o a s t . L E N G T H _ S H O R T ) . s h o w ( ) ; }

Thats all. Its definitely not the best solution, but I thinks its kinda handy and easy to understand. I tested it with 2000 items and had no problem running it on the emulator and on my device. The full example can be downloaded here. SectionListExample (6837) If you have any questions feel free to leave a comment and Ill reply as soon as possible. So have a nice day. Subscribe to this blog

64 comments Leave a message...

Best Community A mjat h 4
2 years ago

Share

14

Avatar

good post. really useful for me to implement categorized list view

Reply

Share

Avatar

s unil 1

7 days ago

how to add the search item in this list view. Please help me thanks

Reply

Share
Mod

Dominic B art l

> sunil

7 days ago

What do you mean by search item? If I understood you correctly, what you could do is create a layout xml with an EditText, add
i s S e a r c h I t e m ( ) ;

in the Item interface and create a new class SearchItem which also implements the Item interface.
Reply s unil Share
7 days ago

> Dominic Bartl

Reply

Avatar
upile
3 months ago

can you please add same functionality and mail me at sunil.gupta676@gmail.com thanks
Share

Hi Great tutorial, im new to android development and was wondering how you would make the code not repeat the category if it already exists, thanks
1

Reply

Share

Avatar

B hupendra 1

8 months ago

how to categorized the expandable listview like same u did for listview
Reply Share

Avatar

t ot e

a year ago

ok i was able to correct my code by removing i check in the getView event. The code I had was checking to see if convertView had already been inflated and set to something and if it had to just return it as is. I removed the check and now just have it inflate a new view for each row all the time and I get the data I want, but the scrolling seems to lag a little bit.
1

Reply

Share
Mod

Dominic B art l

> tote

a year ago

Avatar
Raven3221

Yes, sorry that I couldn't reply. I had the some problem once and did the same mistake.
Reply Share

2 years ago

What about View Holder pattern? You're not reusing the views that were already created. Solution 1 can use this pattern and save a lot of inflating.
1

Reply

Share
Mod

Dominic B art l

> Raven3221

2 years ago

I know. I already created a list with a holder. I'll put up another tutorial with this pattern soon.
Reply Share


Avatar
dhara 1

Reply

Share

2 years ago

Thanks for the post

Reply

Share
2 years ago

Avatar

B randon Ulas iewic z

This is a great resource. Thanks for the post :-) I have a quick question about this ... is there a way to have a static background image to be placed behind everything so that when you you scroll the image will stay put and the list will scroll?
1

Reply

Share
Mod

Dominic B art l

> Brandon Ulasiewicz

2 years ago

Avatar
k dawg

Sorry I forgot to answer to your comment. What you can try is to create a layout via xml with a LinearLayout and a ListView in it. Set the background image to the LinearLayout and make the background of the list items transparent.
Reply Share

2 years ago

Great post. Will this implementation support fast scrolling? In particular, what would be great is to have fast scrolling where only the "section items" appear in the zoomed view. I am a bit new to this and would appreciate your thoughts.
1

Reply

Share
Mod

Dominic B art l

> kdawg

2 years ago

Just call: getListView().setFastScrollEnabled(true); and you will have the drag-able Image on the right. I'll have a look on it with the SectionItems. Maybe I'll make an Part 2 of this Tutorial with fastscrolling
1

Reply

Share

Avatar

Mamil 1

2 years ago

exactly what im looking for thaks

Reply

Share

Avatar

Rahul

3 months ago

Avatar
James

If i want to remove element..then how that can be done.......

Reply Share

7 months ago

Avatar

awesome..but how to remove a row using this approach?

Reply Share
7 months ago

Miguel A ngel Jimenez S anc hez

good job, you could join your proyect to http://www.theultimateandroidl...

Avatar

Avatar

good job, you could join your proyect to http://www.theultimateandroidl...

Reply Share

hongk en

9 months ago

Avatar

I really appreciate it. You saved me !!!

Reply Share

Oli V iner

a year ago

Avatar Hi!

Great tutorial. I have been parsing a JSON with items and sub-items and this has worked a treat, except for one major issue - the SectionItems are appearing in a random order?! The entries are associated with the correct sections but the sections are all over the place. When I check the JSON or parse it using an expandable listview (which I do not want as it is very slow and I want the groups permanently expanded) they are in the correct order. Any ideas why this may be happening?
Reply Share

S t eph68

a year ago

First, congrats for that sectionned listview, very nice! :-D I am just wondering how could it be possible to include a footer within? Could you maybe help? ;-)

Thanks.
Reply S t eph68 Share

> Steph68

a year ago

Sorry for multiple posts.

Avatar
S t eph

I expected to see my question sorted by date, on the top of the list, so I meant it didn't worked...
Reply Share

a year ago

Hi! First, congrats for that sectionned listview, very nice! :-D I am just wondering how could it be possible to include a footer within? Could you maybe help? ;-)

Avatar
S t eph

Thanks.
Reply Share

a year ago

Hi! First, congrats for that sectionned listview, very nice! :-D I am just wondering how could it be possible to include a footer within?

Could you maybe help? ;-)

Avatar
Ivan

Thanks.
Reply Share

a year ago

This is a very useful tutorial. I need a longest Listview so ill add more items and done. I have a question, I would also like to have an image on each section (but different in each one) as there is only a list_item_section, how can I do it? Thanks in advance and congrats again for the tutorial
Reply Share
Mod

Dominic B art l

> Ivan

a year ago

So what you want is a different image in each section-item?

Reply Ivan Share
a year ago

> Dominic Bartl

Reply

Yes, would it be possible?

Share
Mod

Dominic B art l

> Ivan

a year ago

If you want a background image just add an id to the LinearLayout in the section xml-file and set the background image in your code. Or you just add an ImageView and set the image in code, but I'm not quite sure if that works. You have to edit the section xml-file though.
Reply Share
a year ago

ivan

> Dominic Bartl

Im really lost Bartinger, im sorry. I have to modify list_item_section.xml I thought it was easier by adding an ImageView but I dont know how to set the image because it would be different in every section and if I add a background image in LinearLayout I dont know how to add the different image in each section. Thanks again my friend
Reply Share
Mod

Dominic B art l

> ivan

a year ago

In the SectionItem class add a new field private final int drawableID; You need to update the constructor and add getters as well. In the getView method if the item is a SectionItem you just get your ImageView exactly like the TextView and with imageView.setImageResource(si.getDrawableId()); you can set the Image
Reply Share


Ivan

Reply

Share
a year ago

> Dominic Bartl

I dis as you said, this is SectionItem: private final String title; private final int drawableID; public SectionItem(String title, int drawableID) { this.title = title; this.drawableID = drawableID; } public String getTitle(){ return title; } public boolean isSection() { return true; } public int getDrawableID() { return drawableID; }

with private final int drawableID; and public int getDrawableID(). Then I add in EntryAdapter final ImageView imageView = (ImageView) v.findViewById(R.id.list_item_entry_drawable);imageView.setImageResource(si.getDraw And now to add the image in the main activityitems.add(new SectionItem("Euromillones", R.drawable.circulo_blanco)); and the app doesnt. Do I need to add an ImageView in list_item_section.xml before the include?

Ivan

Thanks again to be so patient

Reply Share

> Ivan

a year ago

Avatar
udi
a year ago

and if so, how can I do it??

Reply Share

Avatar
A llene

thank you very much

Reply Share

a year ago

Great Post. It Helped me a Lot in creating section list view. I have a created a listview with your code, with a little modification to the xml file. i removed one textview and inserted edittext view in the xml file. now i want to get the value from the edittext view form each item and store it in respective variables for further calculation. problem is i can't get the value through findViewById, because i have only one ID for edittext view. i have no idea how to solve this problem.
Reply Share
Mod

Dominic B art l

> Allene

a year ago

Avatar
t ot e

I wouldn't even put a EditText into a ListView. What I would do is to pop up a dialog with an EditText and then let the user make his input there. However if you really want to have it in your ListView you could store the EditText in the EntryItem and when you click on it you read the value
Reply Share

a year ago

@Bartinger : Helpful post, for sure. I'm having problems applying it when I have many items in my list where the user has to scroll through the items.It seems that only the items in view are retrieved through get view. So at first my list and headers look fine. Once I start scrolling down past what was initially visible, for some reason I get repeats of headers that should not be there. My items arrayList looks fine


Avatar

visible, for some reason I get repeats of headers that should not be there. My items arrayList looks fine structurally. I have a section i position 1. 1 item under that section. Then another section. Then 27 more items for that section. But when I start scrolling things get messed, and I get duplicate sections with items that belong to another section etc.... anyone see anything like this?
Reply Share
a year ago

Johnnie Hammonds

First off, I want to say thanks for the post. You've done a really nice job with it. I also thought I would mention that I extended your work a bit to make the Activity generic. This allows me to use the same set of classes for any number of custom lists that I want. To do this, all I had to do was pass in the ArrayList via the intent when starting the activity (using startActivityForResult), then return the selected item as a result when exiting the activity.

Thanks again!
Reply Share
Mod

Dominic B art l

> Johnnie Hammonds

a year ago

Avatar

glad i could help!

Reply Share

Us ha K ees ara

a year ago

Avatar

in this program where is the main.xml calling

Reply Share

P adman009

a year ago

Avatar

Hello there,the code is excellent but how can I use different icons for the list items?
Reply Share

Y us uf W agh

2 years ago

Great Example Helped me a lot but i had an Issue i have used your structure my listview row contains images which are coming from server and when i scroll it again n again it gets crashed and memory warning is issued .. because layout is getting inflated every time
Reply apac he Share

> Yusuf Wagh

6 months ago

Yes :) After one year I discovered it. How did you menaged it? For me putting if (v==null){ ... } in getview kinda solved problem
Reply Share

Avatar

A mit Mohit e27

2 years ago

Avatar

nice post, very helpful

Reply Share
2 years ago

Mahes h Chunk hade

hello..it is really very good tutorial for section list view.. it help me lot to understand how to construct section list view

Avatar
_x enix

thanks

Reply

Share

2 years ago

Avatar

Hello, good post. I want explication under the question "I have a quick question about this ... is there a way to have a static background image to be placed behind everything so that when you you scroll the image will stay put and the list will scroll?" i not understand how do you do... Thanks
Reply Share
2 years ago

Damiano Corrado

Avatar

Thank you
Reply Share

DroidRook ie

2 years ago

That helps Bartinger. A simple and effective piece of code which never flashed in my brain

Avatar

Reply

Share
2 years ago

Mark us W eller

Is there anything I have have to take care of if this is not my main Activity? I have writen a XML File with a list in it and have a setContentView to this View.But nothing is displayed, my list remains empty and the getView Methode is never used.
Reply Share
Mod

Dominic B art l

> Markus Weller

2 years ago

Hey Markus. If you're using a normal Activity instead of a ListActivity like me and added the ListView via the XML layout, you have to change this line: "setListAdapter(...)" to something like this... ListView listView = (ListView) findViewById(R.id.your_listview); listView.setAdapter(adapter);

Did you do that ?

Reply Share

Load more comments

Su b s cri b e

Ad d D i s q u s to yo u r s i te

About

I'm 20 years old, currently working as a freelance web and Android developer, interested in a widerange of technology topics, including programming languages, data storage, opensource and any other cool technology that catches my eye. I love developing apps for Android, designing and coding websites. Follow me Google

Tags
3g

android blackberry

blog bluetooth brightness clockworkmod flash

free game guide howto item java lg lg2x list

listview market minecraft modaco nvflash optimus organisation pattern playbook programming language rescue ringermode rom
root score section separator settings wifi

smartphone Smart Phone software sql sublime tegra tips tutorial volume

Links
Alexander Ott Grub2 Basics Me on Twitter Mobile Tuts+ Smart GWT Smart Phone ThomasJirout TomTasche

bartinger.at
All Rights Reserved. bartinger.at | Powered by : WordPress Designed by : WebDesignLessons.com