Skip to main content

Android Studio ListView with Speech Bubble

Hi,

Android Speech Bubble
example
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.

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 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."

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.

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.


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 :)

Comments

  1. Very informative post.Thanks for share it.

    android development

    ReplyDelete
  2. Thanks for sharing I was looking for a good tutorial and this one was the best ;)

    Ill use this in a commercial application wheres your donate key!

    ReplyDelete
  3. Hi,

    Thanks 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 .

    ReplyDelete
    Replies
    1. 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

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Will it be somthing like this ?

      LinearLayout
      RelativeLayout
      TextView message
      TextView date/time
      RelativeLayout
      LinearLayout

      Delete
  4. Thanks Adil for sharing my ListView talk!

    ReplyDelete
  5. nice! but
    how to mix icon with text in the bubble

    ReplyDelete
    Replies
    1. What? I didn't get you, can you explain a bit more about what you want to do.

      Delete
  6. Thank 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.

    ReplyDelete
    Replies
    1. Hi 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.

      Delete
  7. Can you explain your code A little as to what happens after onCreate()
    Because there is no call to sendmessage() but still it is executing on send button ,.. pls explain

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. ok great ! good work indeed :)
      one 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 ?

      Delete
    3. 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.

      Delete
    4. Im getting reply from others when i run this source code.But how it is working..?can u please explain..?

      Delete
    5. @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.

      Delete
  8. Hi adil .. I have A doubt again :)
    how 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?

    ReplyDelete
    Replies
    1. What other option do you have rather than the sqlite? sqlite is your way to go.

      Delete
  9. I am getting a problem in this code while using layout parameters and setting gravity to right or left

    ReplyDelete
    Replies
    1. What kind of issue are you facing? Whats the problem with layout? please explain.

      Delete
    2. I 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.

      Delete
  10. how to this conntection to internet like chat..skpy

    ReplyDelete
  11. project is failed to import "no project found" error

    ReplyDelete
    Replies
    1. Sarwar, you need to unzip the project and then try importing it with eclipse.

      Delete
  12. thanks Dear for posting this nice code :)

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. big thankssssssssssssssssssssssssssssssssssss...
    great work sir...
    thanku.....

    ReplyDelete
  15. Appreciated Work...!!! Thank you.

    ReplyDelete
  16. Hi 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 ?

    ReplyDelete
    Replies
    1. Hi, 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).

      Delete
    2. Ok 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 ?

      Delete
    3. yes, you could use two textviews or, you could set margin programmatically in getView() of adapter.

      Delete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. First 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
    Replies
    1. @Vijay, what is your question specifically? What problem are you facing?

      Delete
  19. hi every one its awesome tut thanks for i want to fetch messages from Sqlite DB so i need suggestion for that please help me

    ReplyDelete
  20. Very informative Tutorial for me.... Thank you.

    ReplyDelete
  21. Good tut, How can I fetch messages from Sqlite? thanks.

    ReplyDelete
  22. What if i want to put an image inside that bubble ??

    ReplyDelete
  23. Very 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.

    ReplyDelete
  24. Hi Karthik, thanks. Those psds are there for anyone who want to change the color of speech bubble or re-shape it by themselves.

    ReplyDelete
  25. Very nice tutorial,any body know the profile image with bubble chat in android and share me the total code

    ReplyDelete
  26. Awesome Layout
    I sucessfully Implemented it in my application Thanks

    ReplyDelete
  27. How to add image / picture, after capture camera?

    ReplyDelete
    Replies
    1. Hey, 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

Post a Comment

Popular posts from this blog

Android Studio How to use 9 patch png?

Hi, 2nd blog post after almost 1.5 year :) Today I'm going to discuss about 9 patch image and how to use 9 patch png in android apps. What is 9 patch? 9 patch is technique used to scale the image in such a way that the 4 corners remain unscaled, but the four edges are scaled in one axis and the middle is scaled in both axis. So the graphical representation of this scenario will be something like this: Icon when divided into 9  patch Simple Icon file The image at left side when divided into 9 patch will look like the image at the right side. Now the interesting part, the four corners of the image will be remain unscaled and the edges will be scaled in single axis, which may be X or Y. and the center of the 9 patch image will be scaled in both axis. Now we include an image which will represent the parts of image unscaled, scaled into Y axis and scaled into Y and scaled into both direction with color differentiation. Here it is. 9 ...

How to add arabic text on photos using iPhone

This question can come across your mind many times, while you want to share a simple photo with some arabic caption on it. There's no built-in app there on iPhone OS that can add arabic text to photos. Add arabic to photos Well we've made a nice app that can let you do that in seconds with few taps. Here's how you can add text to photos using iPhone. Download the app. Select and open your photos in editor. Select the 'Add Text' option from bottom toolbar. Enter your text. Change font, color, stroke, border, and many customization. Save your photo. Where to download?  Imagitor is a great tool to add text to your photos. https://appsto.re/i6725K2 Be more creative and let your imagination design your next facebook post, business card, event flyer, motivational quote, fan poster or political review using Imagitor. See Screenshots. Add Arabic to Photos Choose arabic fonts.