Creating a chat bubble using Shapes or 9-patch image

Question

I am trying to create a template for my chat bubbles in an android app i am currently working on. The end result should look something like this:

I tried it with Shapes, but i could not get the multiple layers right. I also tried a 9-patch image, but creating the 9-patch was as far as i got. I hade no clue as to how to use it, specifically with the avatar, message header and content placements.

Can anyone help out?

My knowledge on shapes is fairly limited, although, i think i know just enough to understand what you guys will be saying :)

Answer 1

A 9 patch would be really easy. Here's a nice tutorial: Simple Guide to 9 Patch.
Just make the extension .9.png, not just .png.
Use it as a background for your ViewGroup (your View container), as in:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bubble_left"
    android:layout_margin="8dp"
    android:padding="8dp"
    >
    <!-- The User -->
    <TextView
        android:id="@+id/txtUser"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
    />
    <!-- The Date -->
    <TextView
        android:id="@+id/txtDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtUser"
    />
    <!-- The Message -->
    <TextView
        android:id="@+id/txt2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/txtDate"
    />
</RelativeLayout>

I left you free to choose the graphics you desire (to match your taste and not to ruin your fun).

Obviously, you might want to prepare a bubble for the left side and a bubble for the right side (or have bubbles with differently coloured corners), and swap them accordingly in your Java code.