Working with 9-Patch Images, Adapter Classes, Layouts in Android.
Before starting this new task I never wondered ..”How does that bubble around our chat messages wraps around the width of the text written by us??”.
The image being used as the background of our messages are called 9-Patch images.
They stretch themselves according to the text length and font size!
Android will automatically resize to accommodate the contents , like–
How great it would be if the clothes we wear could also work the same way.
Fit according to the body-size. I could then still wear my childhood cute nostalgic dresses..
Below, are the 9-Patch image I edited. There are two set of bubble images which are different for incoming and outgoing SIP messages.
These images have to be designed a certain way and should be stored as the smallest size and leave 1px to all sides. Details are clearly explained in Android Documentation–
https://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
Then, save the image by concatenating “.9” between the file name and extension.
For example if your image name is bubble.png. Rename it to bubble.9.png
They should be stored like any other image file in res/drawable folder.
Using 9-patch images these problems are taken care of–
- The image proportions are set according to different screen sizes automatically.
You don’t have to create multiple PNGs of different pixels for multiple screen sizes. - The image resizes itself accroding to the Text size set in the user’s phone.
I had to modify the existing Lumicall SIP Message screen which had simple ListView as the chat message holder and replace it with 9-patch bubble images to make it more interactive 🙂
Voila! What a simple way to provide a simple yet valuable usability feature.
