Android Tutorial : Custom adapter for ListView to create bubble shaped list rows


Hi.
I am seeing many people interested in writing their own adapters for various reasons. the primary reason being their need to implement their custom layouts in the rows.
In this tutorial, I am going to explain how you can set custom layouts to your lists and their rows.
Although, here's an in-depth article (An excerpt from his awesome book) about custom adapters from the great book of 'CommonsGuy' Mark Murphy at his website, but this tutorial is a quick way of doing that.

For this example, I have created a ListView which has a custom background, and custom rows representing a conversation in bubble format.

Here's the screenshot to make things clear:



Find the whole source code at this link.

The whole concept works like this-
  • You create two layouts:
    • One for Even rows
    • One for Odd rows
  • These layouts are designed keeping in mind that they'll be used as layouts of a row.
  • Your code has an array containing the data that will be displayed in the list view.
  • Inside your code, write a simple class extending BaseAdapter.
    • In this class we implement following methods of Android.Widget.Adapter super class, in order to get things working:
      • getCount() - returns the total number of elements in your data array
      • getIterm() - returns the data item associated with the specified position in the data set. Not implemented at this point.
      • getItemId() - returns the row id associated with the specified position in the list. Not implemented at this point.
      • getView() - returns the row that has to be drawn. This is the method we're interested in the most. It will be called every time the ListView draws a new row.
        Here, you can control what gets drawn in a particular row, by selecting a layout and setting data into it.
        In our example, we are checking whether the position of the row is even or odd, and according to that, we are setting the row's layout.
  • I have also set a background to the layout which holds the list.
  • A list has a transparent background in normal conditions which makes you see the image that you set as the layout background, but when the List is scrolled, it doesn't remain transparent any more.
  • If you want you background image to be visible while scrolling too, set cacheColorHint of your ListView.

Refer to the project for more, and revert for feedback.

Download the source code here.
Happy Coding!

26 comments:

mkvreak said...

It should be getView, not getRow. I was looking 5 minutes frantically to find getRow in Android docs …

Aman Alam said...

Man! Thanks a lot for pointing this out.
That's a silly typo.
Even in the source it is correct (its getView)
Thanks for pointing it our. I have corrected it.

javaid said...

How to create a dynamic size bubble? I could see for large text messages, the text coming outside of the bubble.

Aman Alam said...

Use the 9-patch image for the background. it will stretch automatically.

jaya said...

hai..
can i have code for dynamic expandable list view

jaya said...

how we can hide and unhide the dynamic list view items

sri said...

can i have the code for dynamic expandable list view in android

dim5b said...

Hi a Quick question is it possible to hide the line between the the rows??

Aman Alam said...

@dim5b Yes, you can hide the separator. in the XML, where is defined, include android:divider="@null"
just check if its 'separator' or 'divider'

@Jaya, @Sri I'll be working on Expandable List View soon, and will post the code somewhere. thanks for the patience

zohar said...

thanks you code work great,

i would like to use the listview in better way like this:

if ( convertView == null) {
if(position%2==0)
{
//calling list_row_layout_even
}
else
{
//calling list_row_layout_odd
}
holder = new Holder.Wall();
holder.data = (TextView)
}
else
{
holder = (Holder.Wall)convertView.getTag();
}
}

in this way the list load faster, but the order of the list_row_layout not consist, one row is green and two row are black with out any logical order..

can you think about a way to solve it?
thanks(:
( sorry for this long comment... )

sergoto said...

find here another example : http://android-apps-blog.blogspot.com/2011/04/how-to-create-listview-with-custom.html

Aman Alam said...

@sergoto Not a very good way to promote your blog! x-(

@Zohar I would like to see the code in Action. The code I have put here is quite old, and I might have done the things the way they're done for any specific reason only. Please modify my current code with your suggestion and send it to me, then let me see what's wrong

VarunDroid said...
This comment has been removed by the author.
VarunDroid said...

Aman but did you notice these bubbles will be static what if we need to create dynamic bubbles for example set bubble dimensions as per text size. How to accomplish that?

Aman Alam said...

@VarunDroid: Of course they will be static, since its only for the case when one has to implement even/odd pattern.
There'll be a number of ways to modify and optimize it.
Get to my git, fork it, modify it and lets see what it becomes like. :)

shane bob said...

This is the great feature which provide the facility to developer to create bubble shaped list row which people may like and for that they are wish to download your apps for their mobile phone.

mobile signal booster

Yunus Luniwala said...

Hi Aman,
Its a nice tutorial.
But my need it little different from the one you provided.
I am using
public void populateListView(){
ArrayAdapter userAdapter = new ArrayAdapter(
this, R.layout.user_list_item, userArrayList);
setListAdapter(userAdapter);
}
In above code, on line setListAdapter(..), I am getting following compile time error: The method setListAdapter(ArrayAdapter) is undefined for the type GetUsersByIdActivity
How can I deal with it?
Do I have to make my own setListAdapter custom method?
Thanks and Regards
Yunus

Yunus Luniwala said...
This comment has been removed by the author.
Yunus Luniwala said...

Due to some reason, the code I am posting at your blog is not being visible properly. Can you please check this link : http://paste.org/49960
Thanks

sarah said...

Thanks for all the information, it was very helpful i really like that you are providing information on android app development ,being enrolled in android app development for beginners http://www.wiziq.com/course/3303-android-app-development-for-beginners i was looking for such android app development online course to assist me and your information helped me a lot. I really like that you are providing such information,thanks.

Aman Alam said...

@Sarah, Thank you! :)
I just try to share what I know, and as of now haven't started asking people for money for it :D

And yeah, thanks for highlighting this post!
I now know that there's something that I need to correct here.

Tharu Kan said...

I want to download this code. But downloading link is not working.pls help.thanks

Rino Wellyanto said...

the link is not working. please reupload the source code

Aman Alam said...

Sorry guys, my bad.
I'll have the things corrected and the download link working as soon as possible.

Thanks.

pramod kumar said...

I am unable to download the code Can you please send another link? thanks in advance

Debbie Negron said...

I really enjoyed this post. thanks for awesome sharing.
cracked software downloads