Outreachy- Week 8 & 9 Progress

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–

ninepatch_examples-1
Source- developer.android.com

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.

bubble_incoming-9           bubble1-9

 

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–

  1. 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.
  2. 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.

 


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: