1

I am trying to create a chat bubble like viber, whatsapp and facebook chat have. Please look at this screenshot:

enter image description here

The last bubble does not have an arrow. I am wondering if those bubbles are a 9-patch images or something which is made programmatically. I have googled a while but I cannot find exactly this image, tho it is the same in many apps (viber, whatsapp).

My second question is, how do I create that bottom line in the bubbles which shows if the message has been delivered. Is it an ImageButton with Html.fromHtml() inside (a for bottom line)? Is it a LinearLayout with two TextViews?

I am also searching for these ✓✓. Viber and WhatsApp have the same, but it does not seem to be utf. Is it an image maybe?

Thx.

Emil Adz
  • 40,709
  • 36
  • 140
  • 187
NoobieNoob
  • 887
  • 2
  • 11
  • 31
  • The bubbles can me made using patch 9 backgrounds, also the ticks are probably images aligned to the right/bottom of whatever layout is used. – sprocket12 Jan 30 '14 at 15:33

1 Answers1

3

I am wondering if those bubbles are a 9-patch images or something which is made programmatically

The bubble (with the the arrow and without) are nine-patches.

My second question is, how do I create that bottom line in the bubbles which shows if the message has been delivered.

the message status at the bottom of this bubble is an ImageView that changes from no ✓ to an image with one ✓ and then when the message arrived to the receiver the two ✓✓ image is shown.

Emil Adz
  • 40,709
  • 36
  • 140
  • 187
  • So it is basically: – NoobieNoob Jan 30 '14 at 15:41
  • It can be any other layout as well, but basically yeah. – Emil Adz Jan 30 '14 at 15:42
  • you have to remember that 9-patches come to aid you in you application design, and each time you can use them and avoid designing in code, do that! – Emil Adz Jan 30 '14 at 15:43
  • So it is basically: I tried to reproduce it like that. Unluckily I am not able to make this LinearLayout clickable like an ImageButton with android:background="?android:attr/selectableItemBackground" because Background is already the nine patch image. – NoobieNoob Jan 30 '14 at 15:43
  • Right... So you have to create a selector that consists of several 9-patch images for different states of the bubble and apply it as a background, check this: http://stackoverflow.com/questions/14023886/android-button-selector – Emil Adz Jan 30 '14 at 15:45