Hi,
Today I'm going to discuss how to make a ListView with speech bubble same as native android message app or some other apps out there. First of all we need to discuss the making of a row layout with speech bubble.
So an adapter is responsible to provide data, view as well as count of rows to AdapterView.
Good to remember: ListView, Gallery, GridView, ExpandableListView, Spinner etc are subclasses of AdapterView. So an adapter made for ListView can be used for other controls too and vice versa, with some minor modification.
We will customize the Adapter for that we need to have an xml layout and a java class extending BaseAdapter.
In the above layout, we have defined a LinearLayout containing a TextView. We have set its background to one of the image we made as 9 patch (speech_bubble_green.9.png) and now we will use it in Adapter, so that we can use this layout in ListView.
 |
| Android Speech Bubble example |
How to make Speech Bubble?
Well that is the most interesting part of the development. I've already posted a blog post about how to make 9 patch image of speech bubble, you can find that post here.
Here we will discuss how to use them in our application. You will copy them into your project in relevant hdpi, ldpi, xhdpi and mdpi folders accordingly. Now we come to the coding part.
We need to make simple ListActivity with ListView. There are lot of tutorials available:
and lot more. You can find customization of the ListView there too. Here I'll discuss the Adapter part of the ListView only.
What is Adapter in Android?
Android documentation says:
"An Adapter object acts as a bridge between an
"An Adapter object acts as a bridge between an
AdapterView and the underlying data for that view. The Adapter provides access to the data items. The Adapter is also responsible for making a View for each item in the data set."Good to remember: ListView, Gallery, GridView, ExpandableListView, Spinner etc are subclasses of AdapterView. So an adapter made for ListView can be used for other controls too and vice versa, with some minor modification.
We will customize the Adapter for that we need to have an xml layout and a java class extending BaseAdapter.
XML Layout for row
Here is the layout for the row:In the above layout, we have defined a LinearLayout containing a TextView. We have set its background to one of the image we made as 9 patch (speech_bubble_green.9.png) and now we will use it in Adapter, so that we can use this layout in ListView.
Adapter for the ListView
Now we come to the java part and make an Adapter, here's how to customize the getView() method of the adapter to implement some sender and receiver side messages representation:
In the above code, we are first checking if the current message is ours ie. isMine() then we are aligning it to the right side and setting green background to it, and if its not ours then we are aligning the TextView to left side and setting orange background to it, that's all, we set this adapter to a ListView as traditional way and get a nice looking SMS messages ListView for android app.
In the above code, we are first checking if the current message is ours ie. isMine() then we are aligning it to the right side and setting green background to it, and if its not ours then we are aligning the TextView to left side and setting orange background to it, that's all, we set this adapter to a ListView as traditional way and get a nice looking SMS messages ListView for android app.
Where to go now? (Gimme Code)
Well you can find the full source code here. I've included the photoshop psd for the bubbles in relavent hdpi, ldpi, xhdpi and mdpi, if anyone want to edit them and use them for their project.
Suggestion and comments are welcome :)
Very informative post.Thanks for share it.
ReplyDeleteandroid development
thanks for share it
ReplyDeleteThanks for sharing I was looking for a good tutorial and this one was the best ;)
ReplyDeleteIll use this in a commercial application wheres your donate key!
Hi,
ReplyDeleteThanks for such a informative post ,I have implemented your code in one of my app.
As you show message only , but i want to show date and time as well so i have taken new textview within linearlayout in xml , and set background image to layout instead of textview so that "message and date time" are within same bubble. But the problem is that on layout gravity is not working .. all baubles align left .
Please suggest .
Hello, a quick suggestion, wrap your TextViews inside another ReativeLayout (or whatever suits you) and then wrap that RelativeLayout to a LinearLayout. set Gravity of RelativeLayout. It'll work out. If not come here for discussion, in Indo-Pak office hours. http://chat.stackoverflow.com/rooms/5098/android-people
DeleteThis comment has been removed by the author.
DeleteWill it be somthing like this ?
DeleteLinearLayout
RelativeLayout
TextView message
TextView date/time
RelativeLayout
LinearLayout
Thanks Adil for sharing my ListView talk!
ReplyDeleteSir! this was an honor for me. :)
DeleteIt's amazing sharing I will apply soon.
ReplyDeleteAndroid Development
nice! but
ReplyDeletehow to mix icon with text in the bubble
What? I didn't get you, can you explain a bit more about what you want to do.
DeleteThank you so much for such a great tutorial on adding item in the ListView , but i dint get the complete code for adding a new element to the list , when i press send from my app, after writing something.
ReplyDeleteHi thanks for compliments. I wonder, haven't you downloaded the source code from here. There in the source code, I've written a method sendMessage() in MessageActivity. Please have a look at that method.
DeleteThank you very much for the sharing. Hire a PHP Developer
ReplyDeleteCan you explain your code A little as to what happens after onCreate()
ReplyDeleteBecause there is no call to sendmessage() but still it is executing on send button ,.. pls explain
Hi, if you see main.xml's line number 13, you will see that I've added "sendMessage" to the "onClick" attribute of the Button tag.
Deleteok great ! good work indeed :)
Deleteone thing more is it a good practise to add onclick in layout itself or set onclicklistener and also i want to capture enter button as send how can i do it ?
Both are for convenience. and to capture the Enter key event have a look at this Stackoverflow.com post android: Softkeyboard perform action when Done key is pressed.
DeleteIm getting reply from others when i run this source code.But how it is working..?can u please explain..?
Delete@John Weasley: There's a set of hardcoded messages, so whenever you send out a message, a message from the set is added to the array at random. Totally hardcoded thing.
DeleteYou are awesome, thanks!
ReplyDeleteHi adil .. I have A doubt again :)
ReplyDeletehow do store the instance state.. when I press Back button....
Like when i press home button and open the app again.. I am presented the saved state like the recent convo that I have updated in thread.. but When I press back button the activity is destroyed and I am presented the initial listview
... I know I can do it by storing my data in db and then retrieving it.. but I don't want to do that.. How can i do it?
What other option do you have rather than the sqlite? sqlite is your way to go.
DeleteI am getting a problem in this code while using layout parameters and setting gravity to right or left
ReplyDeleteWhat kind of issue are you facing? Whats the problem with layout? please explain.
DeleteI want to show message and time inside my bubble. I cant wrap both the textviews inside a single bubble background and Layout parameters are also not working.
Deletehow to this conntection to internet like chat..skpy
ReplyDeleteproject is failed to import "no project found" error
ReplyDeleteSarwar, you need to unzip the project and then try importing it with eclipse.
Deletethanks Dear for posting this nice code :)
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThanks @Adil nice work ..
ReplyDeletebig thankssssssssssssssssssssssssssssssssssss...
ReplyDeletegreat work sir...
thanku.....
Appreciated Work...!!! Thank you.
ReplyDeleteHi Adil Soomro Great tutorial, i implemented your code and it's working fine, including i created my own 9patch images and it's working perfectly, but there's something i'd like to know, as you can see the bubble fits all the screen, horizontaly i mean, what should i do to make it smaller and occupy a less portion of the screen ?
ReplyDeleteHi, you could introduce little transparent area around the image in your png using photoshop. or you could give margin to the left or right in your list item (row).
DeleteOk but to use margin left or right i shoul use 2 TextView on my listItem layout ? One to left other to right side of the message ?
Deleteyes, you could use two textviews or, you could set margin programmatically in getView() of adapter.
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteFirst of all Thank you Adil for this wonderful tutorial.I need you help adil, I am trying to use bubble for my app conversation here In my app I get input from edittext field and show another user answer in textview field after seeing your tutorial I get some idea that how to go ahead but I am still confuse.can you tell me what should I have to do. please help me.
ReplyDelete@Vijay, what is your question specifically? What problem are you facing?
Deletehi every one its awesome tut thanks for i want to fetch messages from Sqlite DB so i need suggestion for that please help me
ReplyDeleteVery informative Tutorial for me.... Thank you.
ReplyDeleteGood tut, How can I fetch messages from Sqlite? thanks.
ReplyDeleteWhat if i want to put an image inside that bubble ??
ReplyDeleteThank you very nice
ReplyDeleteVery nice tutorial,can i know why you have added green.psd and orange.psd file in every drawable folder? i have never seen it being used in the code.
ReplyDeleteHi Karthik, thanks. Those psds are there for anyone who want to change the color of speech bubble or re-shape it by themselves.
ReplyDeleteThanks.and it was an awesome tutorial.
DeleteVery nice tutorial,any body know the profile image with bubble chat in android and share me the total code
ReplyDeleteAwesome Layout
ReplyDeleteI sucessfully Implemented it in my application Thanks
How to add image / picture, after capture camera?
ReplyDeleteHey, this was just an example to get people started on the 9 patch concepts. The images can be added to rows using ImageView, the same way the rows are showing TextView. You'll have to do a little bit more work to get it implemented.
Delete