Professional Documents
Culture Documents
bartinger.at
stop(); //Hammertime Type your search here...
Featured Post
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
Share
14
Avatar
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
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
Reply
Share
2 years ago
Avatar
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
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
Reply
Share
Avatar
Rahul
3 months ago
Avatar
James
7 months ago
Avatar
Avatar
Avatar
hongk en
9 months ago
Avatar
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
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?
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
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
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
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
> Ivan
a year ago
Avatar
udi
a year ago
Avatar
A llene
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
a year ago
Avatar
Us ha K ees ara
a year ago
Avatar
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
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
2 years ago
Avatar
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
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);
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
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