I am creating an app in Android which implements Chat feature in it. I have 2 kind of chat bubbles – blue for other user and orange for logged in user. I am using Nine-patch images for these bubbles because the bubble can be stretched.
The text in the blue bubble is showing fine – right in the center(as shown in the figure below). But the text in the orange bubble is showing after some vertical gap from the upper border of the image. I can’t figure out why this is happening. Both the bubbles have same properties and have been created following the same procedure. Please help. Thanks in advance.
Here is the orange chat bubble:
The problem is in the nine-patch.. the right hand border defines where the content goes and you have it starting just under the pointy part of the speech bubble. Continue the border up to where you want the content to start and it will work!
To clarify: the right and bottom borders define where the content can go, and the top and left borders define the area of the image that will be repeated when the image needs to be stretched.
Try this:
